欢迎来到代码驿站!

jquery

当前位置:首页 > 网页前端 > jquery

jQuery鼠标移动图片上实现放大效果

时间:2021-03-04 13:54:03|栏目: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鼠标移动图片上实现放大效果,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

上一篇:jquery datepicker参数介绍和示例

栏    目:jquery

下一篇:ajax异步请求详解

本文标题:jQuery鼠标移动图片上实现放大效果

本文地址:http://www.codeinn.net/misctech/74313.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有