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中each循环的简单回滚操作
May 05 jQuery
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
js/jQuery实现全选效果
Jun 17 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
jquery更改元素属性attr()方法操作示例
May 22 jQuery
jQuery实现二级导航菜单的示例
Sep 30 jQuery
jQuery实现计算器功能
Oct 19 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 AJAX实例根据邮编自动完成地址信息
2008/11/23 PHP
PHP不用递归遍历目录下所有文件的代码
2014/07/04 PHP
WordPress中调试缩略图的相关PHP函数使用解析
2016/01/07 PHP
PHP 代码简洁之道(小结)
2019/10/16 PHP
一个用js实现控制台控件的代码
2007/09/04 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
2013/04/26 Javascript
用js实现输入提示(自动完成)的实例代码
2013/06/14 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
jquery实现table鼠标经过变色代码
2013/09/25 Javascript
js操作css属性实现div层展开关闭效果的方法
2015/05/11 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
2016/05/16 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
jQuery仿写百度百科的目录树
2017/01/03 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
node.js-v6新版安装具体步骤(分享)
2017/09/06 Javascript
JS开发中基本数据类型具体有哪几种
2017/10/19 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
2018/09/20 Javascript
JavaScript链式调用实例浅析
2018/12/19 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
2019/05/06 Javascript
Vue实现数据请求拦截
2019/10/23 Javascript
Python编程之string相关操作实例详解
2017/07/22 Python
Django错误:TypeError at / 'bool' object is not callable解决
2019/08/16 Python
python中线程和进程有何区别
2020/06/17 Python
使用python把xmind转换成excel测试用例的实现代码
2020/10/12 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
CSS3 Media Queries详细介绍和使用实例
2014/05/08 HTML / CSS
HTML5本地存储之Web Storage应用介绍
2013/01/06 HTML / CSS
中学老师的自我评价
2013/11/07 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
先进典型事迹材料
2014/12/29 职场文书
2015年食堂工作总结报告
2015/04/23 职场文书
英雄儿女观后感
2015/06/09 职场文书
葬礼主持词
2015/07/02 职场文书
小学语文的各类谚语(70首)
2019/08/15 职场文书
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis