JavaScript 放大镜 移动镜片效果代码


Posted in Javascript onMay 09, 2011

放大镜并不是一个难以实现的效果, 只是因为牵涉到一些精确的数值计算, 显得比较繁琐. 在未来的一段日子, 我会不定期地写关于 JavaScript 放大镜系列的文章, 每次讲一个点, 由点及面, 最后完成整个效果.
本次我们先了解如何在缩略图上移动镜片. (这是 DEMO)

缩略图和镜片组成的 DOM 结构如下.

<a id="thumb" href="#"> 
<img src="http://img.alibaba.com/photo/291909368/Free-Shipping-Popular-ladies-shoes-Tote-shoes-paypal-accept-201001.jpg" alt="Thumbnail" /> 
<span id="glass"></span> 
</a>

我在缩略图容器中放置图片和镜片节点, 以缩略图容器作为相对位置参考, 在触发 mousemove 事件时修改镜片的位置. 换个说法, 我们要解决的问题是, 算出镜片左上角的在缩略图容器中的位置. 计算镜片位移的 JavaScript 代码如下.
/** 
* 获取镜片在放大目标元素上的位置 
* @param ev 触发的事件 
* @param thumb 缩略图对象 
* @param glass 镜片对象 
* @return x:镜片在放大目标元素上的横向位置, y:镜片在放大目标元素上的纵向位置 
*/ 
function getGlassOffset(ev, thumb, glass) { 
var offset = { 
left:0, 
top:0 
}; // 偏移量 
var thumbOffset = getCumulativeOffset(thumb); 
// 鼠标在页面上的位置 
var mousePoint = getMousePoint(ev); 
// 镜片实际尺寸 
var glassSize = getSize(glass); 
// 简缩图实际尺寸 
var thumbSize = getSize(thumb); 
// 光标横向位置 
var cursorX = mousePoint.x - thumbOffset.left; 
// 镜片横向偏移量 
offset.left = cursorX - glassSize.width / 2; 
if(offset.left < 0) { 
offset.left = 0; 
} else if(offset.left > thumbSize.width - glassSize.width) { 
offset.left = thumbSize.width - glassSize.width; 
} 
// 光标纵向位置 
var cursorY = mousePoint.y - thumbOffset.top; 
// 镜片纵向偏移量 
offset.top = cursorY - glassSize.height / 2; 
if(offset.top < 0) { 
offset.top = 0; 
} else if(offset.top > thumbSize.height - glassSize.height) { 
offset.top = thumbSize.height - glassSize.height; 
} 
return offset; 
}

镜片左上角在缩略图容器中的位置 = 鼠标位置 - 缩略图左上角位置 - 镜片尺寸的一半
当镜片在容器外, 将镜片靠边. 全部代码请窥视 DEMO. (知道我为何上一篇写通过 JS 获取鼠标位置了吧?)

留个课后思考题, 当镜片带边框时, 如何保证边框不影响镜片移动时的精确度?

Javascript 相关文章推荐
js中AppendChild与insertBefore的用法详细解析
Dec 16 Javascript
jQuery中[attribute*=value]选择器用法实例
Dec 31 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
Apr 22 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
Sep 23 Javascript
js中scrollTop()方法和scroll()方法用法示例
Oct 03 Javascript
详解jQuery中基本的动画方法
Dec 14 Javascript
基本DOM节点操作
Jan 17 Javascript
轻松理解JavaScript之AJAX
Mar 15 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
Dec 22 Javascript
Angular4 ElementRef的应用
Feb 26 Javascript
浅谈Angular 观察者模式理解
Nov 01 Javascript
JS中的算法与数据结构之列表(List)实例详解
Aug 16 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
May 09 #Javascript
关于JavaScript的with 语句的使用方法
May 09 #Javascript
JavaScript的parseInt 取整使用
May 09 #Javascript
实现变速回到顶部的JavaScript代码
May 09 #Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
May 09 #Javascript
Chrome Form多次提交表单问题的解决方法
May 09 #Javascript
JQuery将文本转化成JSON对象需要注意的问题
May 09 #Javascript
You might like
PHP版国家代码、缩写查询函数代码
2011/08/14 PHP
PHP警告Cannot use a scalar value as an array的解决方法
2012/01/11 PHP
基于PHP对XML的操作详解
2013/06/07 PHP
PHP微框架Dispatch简介
2014/06/12 PHP
php简单实现MVC
2015/02/05 PHP
PHP使用stream_context_create()模拟POST/GET请求的方法
2016/04/02 PHP
在Z-Blog中运行代码[html][/html](纯JS版)
2007/03/25 Javascript
jquery 操作单选框,复选框,下拉列表实现代码
2009/10/27 Javascript
javascript中关于执行环境的杂谈
2011/08/14 Javascript
js 3秒后跳转页面的实现代码
2014/03/10 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
js从外部获取图片的实现方法
2016/08/05 Javascript
js多个物体运动功能实例分析
2016/12/20 Javascript
基于bootstrap风格的弹框插件
2016/12/28 Javascript
Angular 1.x个人使用的经验小结
2017/07/19 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
详解React 服务端渲染方案完美的解决方案
2018/12/14 Javascript
微信小程序中悬浮窗功能的实现代码
2019/08/02 Javascript
[02:53]DOTA2英雄基础教程 山岭巨人小小
2013/12/09 DOTA
[01:13:51]TNC vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
Python合并字典键值并去除重复元素的实例
2016/12/18 Python
pycharm安装图文教程
2017/05/02 Python
Python线程同步的实现代码
2018/10/03 Python
python判断所输入的任意一个正整数是否为素数的两种方法
2019/06/27 Python
俄罗斯Sportmarket体育在线商店:用于旅游和户外活动
2019/11/12 全球购物
美国在线家具网站:GDFStudio
2021/03/13 全球购物
2014年教师党员自我评议
2014/09/19 职场文书
单位一把手群众路线四风问题整改措施
2014/09/25 职场文书
分居协议书范本
2014/11/03 职场文书
关于召开会议的通知
2015/04/15 职场文书
大学毕业晚会开场白
2015/05/29 职场文书
用Python远程登陆服务器的步骤
2021/04/16 Python
MySQL sql_mode的使用详解
2021/05/08 MySQL
90后经典动画片排行:《数码宝贝》第二,《小鲤鱼历险记》在榜
2022/03/18 日漫