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插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
jQuery轮播图功能制作方法详解
Dec 03 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
jQuery实现穿梭框效果
Jan 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打造智能化的柱状图程序,用于报表等
2015/06/19 PHP
使用jscript实现二进制读写脚本代码
2008/06/09 Javascript
Ajax,UTF-8还是GB2312 eval 还是execScript
2008/11/13 Javascript
input的focus方法使用
2010/03/13 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
Angularjs注入拦截器实现Loading效果
2015/12/28 Javascript
去除html代码里面的script正则方法
2016/05/19 Javascript
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
Json按某个键的值进行排序
2016/12/22 Javascript
基于nodejs res.end和res.send的区别
2018/05/14 NodeJs
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
2019/02/28 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
2019/11/09 Javascript
在Chrome DevTools中调试JavaScript的实现
2020/04/07 Javascript
微信小程序仿抖音短视频切换效果的实例代码
2020/06/24 Javascript
[07:40]DOTA2每周TOP10 精彩击杀集锦vol.4
2014/06/25 DOTA
[02:49]2018DOTA2亚洲邀请赛主赛事决赛日战况回顾 Mineski鏖战5局夺得辉耀
2018/04/10 DOTA
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
Python循环语句之break与continue的用法
2015/10/14 Python
pygame游戏之旅 创建游戏窗口界面
2018/11/20 Python
代码实例讲解python3的编码问题
2019/07/08 Python
Python 导入文件过程图解
2019/10/15 Python
Python实现遗传算法(二进制编码)求函数最优值方式
2020/02/11 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
商业计算机应用专业自荐书
2014/06/09 职场文书
基层工作经验证明样本
2014/11/16 职场文书
网络营销计划书
2015/01/17 职场文书
慰问信模板
2015/02/14 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
Python List remove()实例用法详解
2021/08/02 Python