小编给大家分享一下jQuery鼠标移动图片上实现放大效果的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
首先界面上要有图片,下面是图片
<img id="big-circle" src="images/pic2.jpg" alt=""/>其次在script代码段中加入如下代码,进行适量修改即可 $(document).ready(function () { var x = 10; var y = 20; $("#big-circle").mouseover(function (e) { var tooTip = "<div id='tooTip'><img src='" + this.href + "'></img><div>"; $("body").append(tooTip); $("#tooTip").css({ position: "absolute", 'top': (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }).show("fast"); }).mouseout(function () { $("#tooTip").remove(); }).mousemove(function (e) { $("#tooTip").css({ position: "absolute", 'top': (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }); }); });
以上是“jQuery鼠标移动图片上实现放大效果的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。