网站建设资讯

NEWS

网站建设资讯

jQuery鼠标移动图片上实现放大效果的示例分析

小编给大家分享一下jQuery鼠标移动图片上实现放大效果的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

创新互联公司专业为企业提供禅城网站建设、禅城做网站、禅城网站设计、禅城网站制作等企业网站建设、网页设计与制作、禅城企业网站模板建站服务,十多年禅城做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

首先界面上要有图片,下面是图片

其次在script代码段中加入如下代码,进行适量修改即可
$(document).ready(function () {
     var x = 10;
     var y = 20;
     $("#big-circle").mouseover(function (e) {
       var tooTip = "
";        $("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鼠标移动图片上实现放大效果的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


文章名称:jQuery鼠标移动图片上实现放大效果的示例分析
网站URL:http://cdweb.net/article/jeceji.html