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 相关文章推荐
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
jQuery中DOM常见操作实例小结
Aug 01 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
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
easyui的tabs update正确用法分享
2014/03/21 PHP
ThinkPHP采用实现三级循环代码实例
2014/07/18 PHP
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
ExtJs之带图片的下拉列表框插件
2010/03/04 Javascript
jquery多浏览器捕捉回车事件代码
2010/06/22 Javascript
js中对象的声明方式以及数组的一些用法示例
2013/12/11 Javascript
javascript实现删除前弹出确认框
2015/06/04 Javascript
jquery实用技巧之输入框提示语句
2016/07/28 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
2016/08/08 Javascript
微信小程序 Storage API实例详解
2016/10/02 Javascript
VueJS如何引入css或者less文件的一些坑
2017/04/25 Javascript
vue滚动轴插件better-scroll使用详解
2017/10/17 Javascript
Node.js中你不可不精的Stream(流)
2018/06/08 Javascript
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
[02:48]DOTA2超级联赛专访海涛:你们的选择没有错
2013/06/07 DOTA
Python去除字符串两端空格的方法
2015/05/21 Python
Python模块包中__init__.py文件功能分析
2016/06/14 Python
Python构建图像分类识别器的方法
2019/01/12 Python
python使用PIL和matplotlib获取图片像素点并合并解析
2019/09/10 Python
Python:slice与indices的用法
2019/11/25 Python
I.T集团香港官方商城:ITeSHOP.com Hong Kong
2019/02/15 全球购物
华三通信H3C面试题
2015/05/15 面试题
运动会广播稿400字
2014/01/25 职场文书
个人求职信范文分享
2014/01/31 职场文书
幼儿园五一活动方案
2014/02/07 职场文书
法律进学校实施方案
2014/03/15 职场文书
教学改革实施方案
2014/03/31 职场文书
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
大学生标准自荐书
2014/06/15 职场文书
坎儿井导游词
2015/02/09 职场文书
读《解忧杂货店》有感:请相信一切都是最好的安排
2019/11/07 职场文书
利用Python判断你的密码难度等级
2021/06/02 Python
零基础学java之循环语句的使用
2022/04/10 Java/Android