jQuery鼠标移动图片上实现放大效果
更新时间：2017年06月25日 11:20:46 作者：hello_mr_anan
这篇文章主要介绍了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实现当鼠标停留在某区域3秒后自动执行，可以应用于很多场景，需要的朋友可以参考下2014-09-09
这篇文章主要介绍了jQuery实现动态给table赋值的方法,结合具体实例形式分析了jQuery动态操作table表格节点的相关技巧,需要的朋友可以参考下2017-07-07
jQuery的开发速度很快，几乎每半年一个大版本，每两个月一个小版本。每个版本都会引入一些新功能。今天我想介绍的，就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象。2011-08-08
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
对于 Boxy弹出框的使用之前写过一些文章（查看jquery.boxy基础），今天主要是在解决一个需要之后，觉得值得把它记录下来，所以就再写一篇，主要功能是，在弹出对话框后，隔N秒后自动隐藏，还有就是自动跳转2013-01-01
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
下面小编就为大家分享一篇jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
接下来几篇教程，将重点讲解jquery1.4新增的16个方法，有几个方法还是非常实用的。2010-02-02
这篇文章主要介绍了jQuery中wrapInner()方法用法,实例分析了wrapInner()方法的功能、定义及包裹匹配元素的使用技巧,需要的朋友可以参考下2015-01-01
上一篇提到jQuery中添加事件提供给客户端程序员的接口方法有很多bind/click等，但其实现的核心方法是jQuery.event.add。2011-07-07
这篇文章主要介绍了jQuery实现TAB风格的全国省份城市滑动切换效果代码,涉及jquery鼠标mouseover事件及页面元素遍历的相关技巧,非常具有实用价值,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了JQuery对表单元素的基本操作使用总结,需要的朋友可以参考下2014-07-07
最新评论