jQuery - Đi theo con trỏ với DIV

79

Làm cách nào để sử dụng jQuery để theo dõi con trỏ với DIV?

jquery html cursor

— Peter
nguồn

140

Bạn không thể theo dõi con trỏ bằng dấu DIV, nhưng bạn có thể vẽ dấu DIVkhi di chuyển con trỏ!

$(document).on('mousemove', function(e){
    $('#your_div_id').css({
       left:  e.pageX,
       top:   e.pageY
    });
});

Div đó phải nằm ngoài float, position: absolutenên được đặt.

— jAndy
nguồn

11

Tôi đã gặp một số rắc rối với việc làm cho điều này hoạt động chính xác. Sử dụng một giải pháp jQuery thuần túy thay vì .css()kết thúc với tôi. Bên trong hàm, hãy sử dụng dòng này thay thế: $('#your_div_id').offset({left: e.page, top: e.pageY});

— Brad

1

Bản demo tuyệt vời @Reigel! Tôi đã sửa đổi nó một chút để hiển thị một đường ngang ( jsfiddle.net/rg8S8 ). Tôi dự định sử dụng điều này để giúp mọi người đọc các biểu đồ (chúng là hình ảnh png, vì vậy tôi không thể làm gì nhiều để tự động hiển thị các giá trị dưới dạng văn bản). Nó sẽ hoạt động tốt hơn nhiều so với các giá trị "nhãn cầu".

— Tim Swast

2

@jAndy có thể làm điều này khi div nằm trong div mẹ không? vậy khi người dùng di chuyển chuột với div cha / container ... div con di chuyển trong container?

— MonteCristo

Giải pháp này thật kinh khủng! Trước hết, nó sử dụng jQuery, nhưng thứ hai, thiết lập trên cùng và bên trái rất kém hiệu quả, vì chúng gây ra sửa chữa. Google và những người khác đều khuyên bạn nên sử dụng biến đổi: dịch, vì điều đó sẽ không gây ra sửa chữa và rút ra từ bộ đệm GPU hiện có. Tôi biết câu trả lời này là 9 năm tuổi, nhưng ít nhất hãy CHỈNH SỬA nó. Thông tin thêm về điều này tại đây: html5rocks.com/en/tutorials/speed/high-performance-animations

— DavidsKanal

19

Bạn không cần jQuery cho việc này. Đây là một ví dụ làm việc đơn giản:

<!DOCTYPE html>
<html>
    <head>
        <title>box-shadow-experiment</title>
        <style type="text/css">
            #box-shadow-div{
                position: fixed;
                width: 1px;
                height: 1px;
                border-radius: 100%;
                background-color:black;
                box-shadow: 0 0 10px 10px black;
                top: 49%;
                left: 48.85%;
            }
        </style>
        <script type="text/javascript">
            window.onload = function(){
                var bsDiv = document.getElementById("box-shadow-div");
                var x, y;
    // On mousemove use event.clientX and event.clientY to set the location of the div to the location of the cursor:
                window.addEventListener('mousemove', function(event){
                    x = event.clientX;
                    y = event.clientY;                    
                    if ( typeof x !== 'undefined' ){
                        bsDiv.style.left = x + "px";
                        bsDiv.style.top = y + "px";
                    }
                }, false);
            }
        </script>
    </head>
    <body>
        <div id="box-shadow-div"></div>
    </body>
</html>

Tôi đã chọn position: fixed;để cuộn sẽ không thành vấn đề.

— yuppie lông
nguồn

15

Điều này làm việc cho tôi. Có một hành động bị trì hoãn tốt đẹp đang diễn ra.

var $mouseX = 0, $mouseY = 0;
var $xp = 0, $yp =0;

$(document).mousemove(function(e){
    $mouseX = e.pageX;
    $mouseY = e.pageY;    
});

var $loop = setInterval(function(){
// change 12 to alter damping higher is slower
$xp += (($mouseX - $xp)/12);
$yp += (($mouseY - $yp)/12);
$("#moving_div").css({left:$xp +'px', top:$yp +'px'});  
}, 30);

Đẹp và đơn giản

— Uller
nguồn

2

Câu trả lời của mình đang cung cấp một cái gì đó mới, một tác dụng giảm xóc

— Jonah