欢迎光临
我的个人博客网站

jQuery使用鼠标事件实现图片跟随效果


前段时间学习完jQuery中的show()、hide()函数后,又学习到了很多其他函数
最近接触到了鼠标事件中的mouseover()和mouseout()函数,于是结合两者做了一个图片跟随的练习,以下为完整代码:

小提示:代码中的图片可以在此链接图片跟随案例图片中获取

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>图片跟随</title>     <style type="text/css">         body {             text-align: center;         }          #small {             margin-top: 150px;         }          #showBig {             position: absolute;             display: none;         }     </style>     <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>     <script type="text/javascript">         $(function () {             $("#small")                 // 当鼠标移至小图片的时候显示大图片                 .mouseover(function () {                     $("#showBig").show();                 })                 // 当鼠标在小图片中移动的同时设置大图片对于当前视口的相对偏移量。                 .mousemove(function (event) {                     // 设置大图片的偏移量offset中必需规定以像素计的top和left坐标。                     // 获取到小图片event事件中pageX/pageY鼠标相对于文档的左/右边缘的位置。                     // 并同时赋值给大图片offset的top和left坐标值以达到移动跟随的效果                     $("#showBig").offset({top: event.pageY + 10, left: event.pageX + 10});                 })                 // 当鼠标移出小图片的时候隐藏大图片                 .mouseout(function () {                     $("#showBig").hide();                 });         });     </script> </head> <body> <img id="small" src="img/small.jpg"/> <div id="showBig">     <img src="img/big.jpg"> </div> </body> </html> 
代码运行效果:

jQuery使用鼠标事件实现图片跟随效果

赞(0) 打赏
未经允许不得转载:张拓的天空 » jQuery使用鼠标事件实现图片跟随效果
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏