基于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 相关文章推荐
ExtJs 3.1 XmlTreeLoader Example Error
Feb 09 Javascript
关于删除时的提示处理(确定删除吗)
Nov 03 Javascript
ExtJS实现文件下载的方法实例
Nov 09 Javascript
关于jquery中全局函数each使用介绍
Dec 10 Javascript
Js实现滚动变色的文字效果
Jun 16 Javascript
node.js中的events.emitter.removeListener方法使用说明
Dec 10 Javascript
JavaScript实现五子棋游戏的方法详解
Jul 08 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 Javascript
微信小程序换肤功能实现代码(思路详解)
Aug 25 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
Aug 27 Javascript
javascript实现多边形碰撞检测
Oct 24 Javascript
JS异步堆栈追踪之为什么await胜过Promise
Apr 28 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连接MSSQL2008/2005数据库(SQLSRV)配置实例
2014/10/22 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
php file_get_contents取文件中数组元素的方法
2017/04/01 PHP
php实现将数据做成json的格式给前端使用
2018/08/21 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
javascript fullscreen全屏实现代码
2009/04/09 Javascript
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
2014/07/10 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
js打造数组转json函数
2015/01/14 Javascript
jQuery+jRange实现滑动选取数值范围特效
2015/03/14 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
基于canvas的二维码邀请函生成插件
2017/02/14 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
2017/05/17 Javascript
基于BootStrap的文本编辑器组件Summernote
2017/10/27 Javascript
ajax请求+vue.js渲染+页面加载的示例
2018/02/11 Javascript
vue的常用组件操作方法应用分析
2018/04/13 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
2019/03/28 Javascript
vue-week-picker实现支持按周切换的日历
2019/06/26 Javascript
ant-design-vue 快速避坑指南(推荐)
2020/01/21 Javascript
vue自定义标签和单页面多路由的实现代码
2020/05/03 Javascript
vue.js实现h5机器人聊天(测试版)
2020/07/16 Javascript
三剑客:offset、client和scroll还傻傻分不清?
2020/12/04 Javascript
用python实现的去除win下文本文件头部BOM的代码
2013/02/10 Python
详解Django框架中的视图级缓存
2015/07/23 Python
Python决策树分类算法学习
2017/12/22 Python
pandas 读取各种格式文件的方法
2018/06/22 Python
Python PyQt5模块实现窗口GUI界面代码实例
2020/05/12 Python
python 实现百度网盘非会员上传超过500个文件的方法
2021/01/07 Python
Django使用django-simple-captcha做验证码的实现示例
2021/01/07 Python
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
英国领先的豪华时尚家居网上商店:Amara
2019/08/12 全球购物
学生实习证明范文
2014/09/28 职场文书
违反交通安全法检讨书
2014/10/24 职场文书