js進階 12-3 如何實現元素跟隨鼠標移動

一、總結

一句話總結：獲取鼠標位置，將鼠標位置設置為元素偏移即可。

1、用什么事件獲取鼠標位置？

用mousemove可以獲取鼠標移動的時候的位置

        $(document).mousemove(function(e){

2、mousemove的調用對象是誰？

想知道在哪個里面動，就調誰，這里是document

        $(document).mousemove(function(e){

3、如何獲取鼠標的具體坐標？

event對象的pageX和pageY屬性

        $(document).mousemove(function(e){ //event.pageX/event.pageY鼠標相對於文檔的坐標位置。 var x=e.pageX+'px'; var y=e.pageY+'px'; $('#txt').val(x+' '+y)

4、動態測試變量的值用什么方法好？

將值動態的顯示在標簽中，就像示例一樣。

二、如何實現元素跟隨鼠標移動

1、相關知識

mousemove() 當鼠標指針在指定的元素中移動時觸發。

2、代碼

<!DOCTYPE html>
<html lang="en">
<style>
</style>
<head>
    <meta charset="UTF-8">
    <title>演示文檔</title>
    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
    <style type="text/css">
        #div1{width: 100px;height: 100px;background: orange;border-radius: 50px;position: absolute;}
    </style>
</style>
</head>
<body>
    <div id="div1"></div>
    <p>鼠標坐標(mousemove):<input type="text" id="txt"></p>
    <script type="text/javascript">
        $(document).mousemove(function(e){
            //event.pageX/event.pageY鼠標相對於文檔的坐標位置。
            var x=e.pageX+'px';
            var y=e.pageY+'px';
            $('#txt').val(x+' '+y)
            $("#div1").css({
                'left':x,
                'top':y
            })
        })
    </script>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js 實現div跟隨鼠標移動 JS實現圖片跟隨鼠標移動 js實現圖片跟隨鼠標移動效果 js實現彈出框跟隨鼠標移動 js原生實現元素跟隨鼠標拖動 JS實現圖片跟隨鼠標移動 jquery對div元素進行鼠標移動（稍稍修改下可以實現div跟隨鼠標） three.js 相機跟隨鼠標移動 JS 圖片跟隨鼠標移動案例 WIN32進階必備:跟隨鼠標移動的子窗口