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


Posted in jQuery onJune 25, 2017

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

<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 相关文章推荐
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
jquery实现图片放大点击切换
Jun 06 jQuery
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
jquery图片放大镜效果
Jun 23 #jQuery
jquery单击文字或图片内容放大并居中显示
Jun 23 #jQuery
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 #jQuery
详谈表单格式化插件jquery.serializeJSON
Jun 23 #jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 #jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 #jQuery
jQuery实现可拖动进度条实例代码
Jun 21 #jQuery
You might like
实用函数10
2007/11/08 PHP
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
PHP使用mysql_fetch_object从查询结果中获取对象集的方法
2015/03/18 PHP
php版微信公众平台接口开发之智能回复开发教程
2016/09/22 PHP
CI(CodeIgniter)框架视图中加载视图的方法
2017/03/24 PHP
PHP的反射机制实例详解
2017/03/29 PHP
详解php命令注入攻击
2019/04/06 PHP
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
在textarea中屏蔽js的某个function的javascript代码
2007/04/20 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
Javascript判断图片尺寸大小实例分析
2014/06/16 Javascript
使用CamanJS在Web页面上处理图像的技巧
2015/08/18 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
2017/05/22 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
详解jQuery中的isPlainObject()使用方法
2018/02/27 jQuery
javascript实现前端成语点击验证优化
2020/06/24 Javascript
python使用BeautifulSoup与正则表达式爬取时光网不同地区top100电影并对比
2019/04/15 Python
python读写csv文件并增加行列的实例代码
2019/08/01 Python
tensorflow 重置/清除计算图的实现
2020/01/19 Python
NumPy排序的实现
2020/01/21 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
Python 制作查询商品历史价格的小工具
2020/10/20 Python
python3.7中安装paddleocr及paddlepaddle包的多种方法
2020/11/27 Python
详解HTML5中的picture元素响应式处理图片
2018/01/03 HTML / CSS
鞋子女王塔玛拉·梅隆同名奢侈品牌:Tamara Mellon
2017/11/22 全球购物
Lou & Grey美国官网:主打舒适性面料服饰
2017/12/21 全球购物
static全局变量与普通的全局变量有什么区别
2014/05/27 面试题
测量工程专业求职信
2014/02/24 职场文书
爱耳日活动总结
2014/04/30 职场文书
工作岗位职责范本
2015/02/15 职场文书
挂职锻炼个人总结
2015/03/05 职场文书
致我们终将逝去的青春观后感
2015/06/10 职场文书
早上好问候语大全
2015/11/10 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers
mysql升级到5.7时,wordpress导数据报错1067的问题
2021/05/27 MySQL