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 EasyUI之验证框validatebox实例详解
Apr 10 jQuery
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
jQuery Validate 校验多个相同name的方法
May 18 jQuery
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
jQuery 实现扁平式小清新导航
Jul 07 jQuery
jQuery实现回到顶部效果
Oct 19 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
php include的妙用,实现路径加密
2008/07/29 PHP
PHP 配置文件中open_basedir选项作用
2009/07/19 PHP
PHP与MySQL开发的8个技巧小结
2010/12/17 PHP
手把手教你打印出PDF(关于fpdf的简单应用)
2013/06/25 PHP
PHP实现无限极分类图文教程
2014/11/25 PHP
php技巧小结【推荐】
2017/01/19 PHP
Thinkphp实现站点静态化的方法详解
2017/03/21 PHP
PHP PDO操作MySQL基础教程
2017/06/05 PHP
Linux下安装Memcached服务器和客户端与PHP使用示例
2019/04/15 PHP
关于图片按比例自适应缩放的js代码
2011/10/30 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
2013/11/05 Javascript
一个CSS+jQuery实现的放大缩小动画效果
2014/02/19 Javascript
js中一维数组和二位数组中的几个问题示例说明
2014/07/17 Javascript
简介JavaScript中valueOf()方法的使用
2015/06/05 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
原生JS实现网络彩票投注效果
2016/09/25 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
Python函数的周期性执行实现方法
2016/08/13 Python
详解Python之数据序列化(json、pickle、shelve)
2017/03/30 Python
Python探索之ModelForm代码详解
2017/10/26 Python
pandas DataFrame 警告(SettingWithCopyWarning)的解决
2019/07/23 Python
Python Opencv轮廓常用操作代码实例解析
2020/09/01 Python
细说CSS3中的选择符
2008/10/17 HTML / CSS
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
2015/08/31 HTML / CSS
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
文秘自荐信
2013/10/20 职场文书
土木工程专业个人求职信
2013/12/05 职场文书
迎国庆演讲稿
2014/09/05 职场文书
机关职员工作检讨书
2014/10/23 职场文书
参观监狱警示教育心得体会
2016/01/15 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书
图解上海144收音机
2021/04/22 无线电
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python
GoFrame gredis缓存DoVar Conn连接对象 自动序列化GoFrame gredisDo/DoVar方法Conn连接对象自动序列化/反序列化总结
2022/06/14 Golang