基于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代码
Apr 02 Javascript
jquery text,radio,checkbox,select操作实现代码
Jul 09 Javascript
High Performance JavaScript(高性能JavaScript)读书笔记分析
May 05 Javascript
js 用CreateElement动态创建标签示例
Nov 20 Javascript
jquery form表单序列化为对象的示例代码
Mar 05 Javascript
jquery分隔Url的param方法(推荐)
May 25 Javascript
js简单获取表单中单选按钮值的方法
Aug 23 Javascript
jQuery实现表格元素动态创建功能
Jan 09 Javascript
html5 canvas 详细使用教程
Jan 20 Javascript
Vuex提升学习篇
Jan 11 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
Jun 15 Javascript
基于JS实现table导出Excel并保留样式
May 19 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 获取当前访问的url文件名的方法小结
2010/02/08 PHP
Memcache 在PHP中的使用技巧
2010/02/08 PHP
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
PHP生成图片缩略图类示例
2017/01/12 PHP
PHP实现动态创建XML文档的方法
2018/03/30 PHP
zShowBox 图片放大展示jquery版 兼容性
2011/09/24 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
2012/02/03 Javascript
用js的document.write输出的广告无阻塞加载的方法
2014/06/05 Javascript
jQuery学习笔记之jQuery原型属性和方法
2014/06/09 Javascript
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
JavaScript脚本判断蜘蛛来源的方法
2015/09/22 Javascript
原生JS实现旋转木马式图片轮播插件
2016/04/25 Javascript
js实现的万能flv网页播放器代码
2016/04/30 Javascript
JavaScript 闭包机制详解及实例代码
2016/10/10 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
angular4自定义表单控件[(ngModel)]的实现
2018/11/23 Javascript
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
请求时token过期自动刷新token操作
2020/09/11 Javascript
python递归计算N!的方法
2015/05/05 Python
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
Python 两个列表的差集、并集和交集实现代码
2016/09/21 Python
Python实现在某个数组中查找一个值的算法示例
2018/06/27 Python
pygame游戏之旅 添加icon和bgm音效的方法
2018/11/21 Python
Python3实现腾讯云OCR识别
2018/11/27 Python
Python 中list ,set,dict的大规模查找效率对比详解
2019/10/11 Python
python如何通过pyqt5实现进度条
2020/01/20 Python
Python图像处理库PIL的ImageFilter模块使用介绍
2020/02/26 Python
python继承threading.Thread实现有返回值的子类实例
2020/05/02 Python
Django mysqlclient安装和使用详解
2020/09/17 Python
css3实现的下拉菜单效果示例
2014/01/22 HTML / CSS
西班牙拥有最佳品牌的动物商店:Animalear.com
2018/01/05 全球购物
澳大利亚优质的家居用品和生活方式公司:Bed Bath N’ Table
2019/04/16 全球购物
瑞典度假品牌:OAS
2019/05/28 全球购物
综合素质评价个性发展自我评价
2015/03/06 职场文书
2015年档案室工作总结
2015/05/23 职场文书
基督教追悼会答谢词
2015/09/29 职场文书