基于jquery的放大镜效果


Posted in Javascript onMay 30, 2012

核心代码:

$(function(){ 
var mouseX = 0; //鼠标移动的位置X 
var mouseY = 0; //鼠标移动的位置Y 
var maxLeft = 0; //最右边 
var maxTop = 0; //最下边 
var markLeft = 0; //放大镜移动的左部距离 
var markTop = 0; //放大镜移动的顶部距离 
var perX = 0; //移动的X百分比 
var perY = 0; //移动的Y百分比 
var bigLeft = 0; //大图要移动left的距离 
var bigTop = 0; //大图要移动top的距离 
//改变放大镜的位置 
function updataMark($mark){ 
//通过判断,让小框只能在小图区域中移动 
if(markLeft<0){ 
markLeft = 0; 
}else if(markLeft>maxLeft){ 
markLeft = maxLeft; 
} if(markTop<0){ 
markTop = 0; 
}else if(markTop>maxTop){ 
markTop = maxTop; 
} 
//获取放大镜的移动比例,即这个小框在区域中移动的比例 
perX = markLeft/$(".small").outerWidth(); 
perY = markTop/$(".small").outerHeight(); 
bigLeft = -perX*$(".big").outerWidth(); 
bigTop = -perY*$(".big").outerHeight(); 
//设定小框的位置 
$mark.css({"left":markLeft,"top":markTop,"display":"block"}); 
} 
//改变大图的位置 
function updataBig(){ 
$(".big").css({"display":"block","left":bigLeft,"top":bigTop}); 
} 
//鼠标移出时 
function cancle(){ 
$(".big").css({"display":"none"}); 
$(".mark").css({"display":"none"}); 
} 
//鼠标小图上移动时 
function imgMouseMove(event){ 
var $this = $(this); 
var $mark = $(this).children(".mark"); 
//鼠标在小图的位置 
mouseX = event.pageX-$this.offset().left - $mark.outerWidth()/2; 
mouseY = event.pageY-$this.offset().top - $mark.outerHeight()/2; 
//最大值 
maxLeft =$this.width()- $mark.outerWidth(); 
maxTop =$this.height()- $mark.outerHeight(); 
markLeft = mouseX; 
markTop = mouseY; 
updataMark($mark); 
updataBig(); 
} 
$(".small").bind("mousemove",imgMouseMove).bind("mouseleave",cancle); 
})

这个里面主要有二点

1.如何大图跟随"放大镜"的位置,同时移动大图?

其实就是用到一个比例关系,当“放大镜”移动多少比例(是比例,不是具体值),大图也同时用这个比例去乘以大图的宽和高,就可以算出大图该移动多少距离了;

2.显示区域和放大镜的关系?

这里的“放大镜”应该和大图的显示区域的比例,应该是大图和小的比例关系一样。比如大图和小图的比例是1:2,那个“放大镜”区域的大小,和显示大图区域的大小比例也应该是1:2,不然“放大镜”罩住的小图区域,和大图的显示区域,所显示的图像信息,不能保持一致。(妙味课堂里讲的那个实例,就是没有保持一至);

在线演示:http://demo.3water.com/js/2012/mymagnifier/
打包下载:https://3water.com/jiaoben/45315.html

Javascript 相关文章推荐
javascript appendChild,innerHTML,join性能比较代码
Aug 29 Javascript
父子窗体间传递JSON格式的数据的代码
Dec 25 Javascript
Jquery图片滚动与幻灯片的实例代码
Apr 08 Javascript
浅析用prototype定义自己的方法
Nov 14 Javascript
angularjs学习笔记之双向数据绑定
Sep 26 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
Jan 28 Javascript
一次$.getJSON不执行的简单记录
Jul 19 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
Oct 31 Javascript
Vue.js实现数据响应的方法
Aug 13 Javascript
微信小程序手机号码验证功能的实例代码
Aug 28 Javascript
jquery+php后台实现省市区联动功能示例
May 23 jQuery
解决vue项目 build之后资源文件找不到的问题
Sep 12 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
May 27 #Javascript
Javascript的常规数组和关联数组对比小结
May 24 #Javascript
基于mootools插件实现遮罩层新手引导
May 24 #Javascript
jQuery 拖动层(在可视区域范围内)
May 24 #Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
May 24 #Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
May 24 #Javascript
js动态在form上插入enctype=multipart/form-data的问题
May 24 #Javascript
You might like
php MsSql server时遇到的中文编码问题
2009/06/11 PHP
php is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
php trim 去除空字符的定义与语法介绍
2010/05/31 PHP
php文件上传简单实现方法
2015/01/24 PHP
php微信公众号开发之校园图书馆
2018/10/20 PHP
PHP实现通过文本文件统计页面访问量功能示例
2019/02/13 PHP
jQuery 1.2.x 升? 1.3.x 注意事项
2009/05/06 Javascript
JS的千分位算法实现思路
2013/07/31 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
html判断当前页面是否在iframe中的实例
2016/11/30 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
基于vue cli重构多页面脚手架过程详解
2018/01/23 Javascript
vue-router重定向不刷新问题的解决
2018/06/25 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
2019/03/29 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
2019/10/31 Javascript
vue在路由中验证token是否存在的简单实现
2019/11/11 Javascript
[26:40]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第一局
2016/02/25 DOTA
在Python编程过程中用单元测试法调试代码的介绍
2015/04/02 Python
python引用DLL文件的方法
2015/05/11 Python
Python实现快速排序算法及去重的快速排序的简单示例
2016/06/26 Python
详解python 发送邮件实例代码
2016/12/22 Python
Python工程师面试必备25条知识点
2018/01/17 Python
python使用Matplotlib画饼图
2018/09/25 Python
python opencv根据颜色进行目标检测的方法示例
2020/01/15 Python
Python 随机按键模拟2小时
2020/12/30 Python
Python实现微信表情包炸群功能
2021/01/28 Python
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
《逃家小兔》教学反思
2014/02/23 职场文书
2014年计生标语
2014/06/23 职场文书
2015年社会治安综合治理工作总结
2015/04/10 职场文书
演讲开场白台词大全
2015/05/29 职场文书
铁人纪念馆观后感
2015/06/16 职场文书
公司管理建议书
2015/09/14 职场文书
幼儿园小班教学反思
2016/03/03 职场文书