基于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 相关文章推荐
纯js实现背景图片切换效果代码
Nov 14 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
Apr 01 Javascript
javascript淡入淡出效果的实现思路
Mar 31 Javascript
Angularjs 自定义服务的三种方式(推荐)
Aug 02 Javascript
Vue.js事件处理器与表单控件绑定详解
Mar 20 Javascript
webpack教程之webpack.config.js配置文件
Jul 05 Javascript
详解React native全局变量的使用(跨组件的通信)
Sep 07 Javascript
微信小程序 动画的简单实例
Oct 12 Javascript
JS实现调用本地摄像头功能示例
May 18 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
Mar 29 Javascript
如何用JavaScript检测当前浏览器是无头浏览器
Apr 27 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可应用于面包屑导航的递归寻找家谱树实现方法
2015/02/02 PHP
javascript css styleFloat和cssFloat
2010/03/15 Javascript
JavaScript入门之事件、cookie、定时等
2011/10/21 Javascript
JS的Document属性和方法小结
2013/09/17 Javascript
jQuery使用hide方法隐藏元素自身用法实例
2015/03/30 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
2016/01/25 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
2016/12/16 Javascript
基于require.js的使用(实例讲解)
2017/09/07 Javascript
vue中路由验证和相应拦截的使用详解
2017/12/13 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
2018/05/27 Javascript
新手简单了解vue
2019/05/29 Javascript
vue根据条件不同显示不同按钮的操作
2020/08/04 Javascript
win7安装python生成随机数代码分享
2013/12/27 Python
Python中声明只包含一个元素的元组数据方法
2014/08/25 Python
解决Python传递中文参数的问题
2015/08/04 Python
Python运算符重载详解及实例代码
2017/03/07 Python
基于python神经卷积网络的人脸识别
2018/05/24 Python
Python 爬虫之Beautiful Soup模块使用指南
2018/07/05 Python
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
python3 面向对象__类的内置属性与方法的实例代码
2018/11/09 Python
Python button选取本地图片并显示的实例
2019/06/13 Python
Python 读取串口数据,动态绘图的示例
2019/07/02 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
Django REST framework 单元测试实例解析
2019/11/07 Python
python实现简单猜单词游戏
2020/12/24 Python
python中time包实例详解
2021/02/02 Python
HTML实现代码雨源码及效果示例
2020/02/25 HTML / CSS
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
小米俄罗斯授权商店:Xiaomi俄罗斯
2019/12/08 全球购物
婚假请假条怎么写
2014/04/10 职场文书
2015年学校教育教学工作总结
2015/04/22 职场文书
实习证明格式范文
2015/06/16 职场文书
老干部座谈会主持词
2015/07/03 职场文书
详解redis在微服务领域的贡献
2021/10/16 Redis
CSS实现渐变色边框(Gradient borders)的5种方法
2022/03/25 HTML / CSS
代码复现python目标检测yolo3详解预测
2022/05/06 Python