前段时间学习完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>代码运行效果：
原文转载：http://www.shaoqun.com/a/521175.html
美森：https://www.ikjzd.com/w/1693
立刻网：https://www.ikjzd.com/w/2323
jQuery中使用鼠标事件mouseover()、mouseout()、show()、hide()等函数实现图片跟随效果前段时间学习完jQuery中的show()、hide()函数后，又学习到了很多其他函数最近接触到了鼠标事件中的mouseover()和mouseout()函数，于是结合两者做了一个图片跟随的练习，以下为完整代码：小提示：代码中的图片可以在此链接图片跟随案例图片中获取<!DO
斑马物联：斑马物联
tradeindia：tradeindia
又被两会热议！跨境电商大火，大卖日本需要知道这些！：又被两会热议！跨境电商大火，大卖日本需要知道这些！
亚马逊搜索排名规则：亚马逊搜索排名规则
（精品分析）亚马逊美国站电动冲牙器类目市场调查数据报告：（精品分析）亚马逊美国站电动冲牙器类目市场调查数据报告
No comments:
Post a Comment