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库冲突的完美解决办法
May 20 jQuery
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 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 中文处理技巧
2010/04/25 PHP
destoon实现商铺管理主页设置增加新菜单的方法
2014/06/26 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
javascript Base类 包含基本的方法
2009/07/22 Javascript
jquery imgareaselect 使用利用js与程序结合实现图片剪切
2009/07/30 Javascript
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
JavaScript的public、private和privileged模式
2009/12/28 Javascript
treepanel动态加载数据实现代码
2012/12/15 Javascript
js下拉框二级关联菜单效果代码具体实现
2013/08/03 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
javascript中数组array及string的方法总结
2014/11/28 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
jquery插件jquery.confirm弹出确认消息
2015/12/22 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/06 Javascript
jQuery获取随机颜色的实例代码
2018/05/21 jQuery
vue2.0获取鼠标位置的方法
2018/09/13 Javascript
Vue中点击active并第一个默认选中功能的实现
2020/02/24 Javascript
python读取oracle函数返回值
2016/07/18 Python
Python数据分析之获取双色球历史信息的方法示例
2018/02/03 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
用pyqt5 给按钮设置图标和css样式的方法
2019/06/24 Python
Python Django路径配置实现过程解析
2020/11/05 Python
送给他或她的礼物:FUN.com
2018/08/17 全球购物
党校培训自我鉴定
2014/02/01 职场文书
优秀应届生求职信
2014/06/16 职场文书
学校党的群众路线教育实践活动对照检查材料
2014/09/24 职场文书
活动总结模板大全
2015/05/11 职场文书
亮剑观后感300字
2015/06/05 职场文书
敬业奉献模范事迹材料(2016精选版)
2016/02/26 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书
赞美教师的句子
2019/09/02 职场文书
高端收音机+蓝牙音箱,JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电
详解Redis基本命令与使用场景
2021/06/01 Redis
Python实现的扫码工具居然这么好用!
2021/06/07 Python
JavaScript实现登录窗体
2021/06/22 Javascript