jQuery - एक DIV के साथ कर्सर का पालन करें

79

मैं DIV के साथ कर्सर का पालन करने के लिए jQuery का उपयोग कैसे कर सकता हूं?

jquery html cursor

140

आप एक के साथ कर्सर का पालन नहीं कर सकते हैं DIV, लेकिन आप DIVकर्सर को स्थानांतरित करते समय आकर्षित कर सकते हैं !

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

वह div फ्लोट से दूर होना चाहिए, इसलिए position: absoluteसेट किया जाना चाहिए।

— jAndy
स्रोत

11

मुझे इस काम को सही ढंग से करने में थोड़ी परेशानी हुई। .css()मेरे लिए काम करने के बजाय शुद्ध jQuery समाधान का उपयोग करना । फ़ंक्शन के अंदर, इस लाइन का उपयोग करें:$('#your_div_id').offset({left: e.page, top: e.pageY});

— ब्रैड

1

अच्छा डेमो @Reigel! मैंने क्षैतिज रेखा दिखाने के लिए इसे थोड़ा संशोधित किया ( jsfiddle.net/rg8S8 )। मैं प्लॉट पढ़ने में लोगों की मदद करने के लिए इसका उपयोग करने की योजना बना रहा हूं (वे png चित्र हैं, इसलिए मैं पाठ के रूप में मूल्यों को दिखाने के लिए बहुत कुछ नहीं कर सकता हूं, स्वचालित रूप से)। यह "नेत्रगोलक" मूल्यों की तुलना में बहुत बेहतर काम करना चाहिए।

— टिम स्वस्त

2

@jAndy क्या ऐसा करना संभव है जब div पैरेंट डिव में हो? इसलिए जब उपयोगकर्ता माता-पिता / कंटेनर डिव के साथ माउस को स्थानांतरित करता है ... तो क्या बच्चा डिव कंटेनर के भीतर जाता है?

— मोंटेक्रिस्टो

यह समाधान भयानक है! सबसे पहले, यह jQuery का उपयोग करता है, लेकिन सभी का दूसरा, सेटिंग शीर्ष और बाएं बहुत अक्षम हैं, क्योंकि वे repaints का कारण बनते हैं। Google और अन्य सभी ट्रांसफ़ॉर्मेशन का उपयोग करने की सलाह देते हैं: अनुवाद करें, क्योंकि यह मौजूदा जीपीयू बफर से रिपैट्स और ड्रॉ नहीं करेगा। मुझे पता है कि यह उत्तर 9 साल पुराना है, लेकिन कम से कम इसे संपादित करें । इस पर यहाँ और अधिक: html5rocks.com/en/tutorials/speed/high-performance-animations

— DavidsKanal

19

इसके लिए आपको jQuery की आवश्यकता नहीं है। यहाँ एक सरल काम उदाहरण है:

<!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>

मैंने चुना है position: fixed;इसलिए स्क्रॉल करना कोई समस्या नहीं होगी।

— बालों वाली युप्पी
स्रोत

16

यह मेरे लिए काम करता है। एक अच्छा देरी कार्रवाई चल रही है।

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);

अच्छा और अनुकरण करता है

— उलेर
स्रोत

2

उसका जवाब कुछ नया प्रदान कर रहा है, एक भयावह प्रभाव

— जोना