图片跟随鼠标移动（jquery）

最新推荐文章于 2023-09-08 18:50:39 发布

yy211zhu

最新推荐文章于 2023-09-08 18:50:39 发布

阅读量2.1k

点赞数

分类专栏： Jquery web 文章标签： jquery html

本文链接：https://blog.csdn.net/yy211zhu/article/details/51386954

版权

Jquery 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

web

13 篇文章 0 订阅

订阅专栏

下面是图片跟随鼠标移动的小demo,有很多实用的技巧，可以在此基础上进行延伸，比如可以改变图片的旋转方向的等。
html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{margin: 0; padding: 0;}
        #mydiv{width: 150px; height: 150px;  }
    </style>
    <title>获取鼠标坐标</title>
     <script src="http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.js"></script>
     <script src="shubiao.js"></script>
     <script>

         shub()

     </script>
</head>
<body>
    <P><input type="button" value="获取屏幕可见宽度" onclick="XY()"/></P>
    <div id="tx"></div>
    <div id="mydiv">
        <img src="./img/niao.gif"/>
    </div>
</body>
</html>

js代码


function shub(){ 

    var keycode=0;//初始键值为0；鼠标的左键键值为1；
    $(document).mousedown(function(e){
        keycode =(keycode +e.which)%2;//根据鼠标左键的点击判断是否要移动物体
        //console.log(keycode);
    })

$(document).bind('mousemove',function(e){
   // $("#tx").text("x"+e.pageX + "Y" + e.pageY);
   var px=e.pageX;//获取页面的可视区域宽度
   var py=e.pageY;//获取页面的高度
   console.log(keycode +1);
   if(keycode!=1){//如果简直不是1就让图片根据鼠标移动
      Mdiv(px,py);
  }

})

function Mdiv(x,y){
    //alert(x);
    var $div=$("#mydiv");
    var H=$(document).height()-$div.height();//页面可见高度-图片高度
    var W=$(document).width()-$div.width();
    if(x<W && y<H){//加个条件防止图片一直向右或向下无限移动
             $div.offset({top:y, left:x});
        }else if(x>W && y < H){
             $div.offset({top:y});
        }else{
             $div.offset({left:x});
        }

}
}

yy211zhu

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
图片跟随鼠标移动（jquery）

下面是图片跟随鼠标移动的小demo,有很多实用的技巧，可以在此基础上进行延伸，比如可以改变图片的旋转方向的等。 html代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> *{margin: 0; padding: 0;} #mydiv{width: 15
复制链接

扫一扫