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 相关文章推荐
javascript 文本框水印/占位符(watermark/placeholder)实现方法
Jan 15 Javascript
JavaScript中使用Substring删除字符串最后一个字符
Nov 03 Javascript
js获取select标签的值且兼容IE与firefox
Dec 30 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
May 28 Javascript
初识Node.js
Mar 20 Javascript
jQuery实现html元素拖拽
Jul 21 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
Aug 21 Javascript
Function.prototype.apply()与Function.prototype.call()小结
Apr 27 Javascript
使用jquery.form.js实现图片上传的方法
May 05 Javascript
javascript事件冒泡简单示例
Jun 20 Javascript
extjs简介_动力节点Java学院整理
Jul 17 Javascript
详解node.js中的npm和webpack配置方法
Jan 21 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 is_file()和is_dir()用于遍历目录时用法注意事项
2010/03/02 PHP
linux iconv方法的使用
2011/10/01 PHP
Php Ctemplate引擎开发相关内容
2012/03/03 PHP
php curl_init函数用法
2014/01/31 PHP
PHP FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
ThinkPHP查询返回简单字段数组的方法
2014/08/25 PHP
php数组操作之键名比较与差集、交集赋值的方法
2014/11/10 PHP
百度地图经纬度转换到腾讯地图/Google 对应的经纬度
2015/08/28 PHP
PHP实现的DES加密解密实例代码
2016/04/06 PHP
PHP实现的限制IP投票程序IP来源分析
2016/05/04 PHP
php使用curl并发减少后端访问时间的方法分析
2016/05/12 PHP
PHP实现bitmap位图排序与求交集的方法
2016/07/28 PHP
JS求平均值的小例子
2013/11/29 Javascript
利用js读取动态网站从服务器端返回的数据
2014/02/10 Javascript
JS+CSS实现的经典tab选项卡效果代码
2015/09/16 Javascript
使用JavaScript为一张图片设置备选路径的方法
2017/01/04 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
微信小程序获取音频时长与实时获取播放进度问题
2018/08/28 Javascript
Django+vue跨域问题解决的详细步骤
2019/01/20 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
2019/05/02 Javascript
解决 window.onload 被覆盖的问题方法
2020/01/14 Javascript
JavaScript实现HSL拾色器
2020/05/21 Javascript
用Python计算三角函数之acos()方法的使用
2015/05/15 Python
python判断一个集合是否为另一个集合的子集方法
2018/05/04 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
使用Python刷淘宝喵币(低阶入门版)
2019/10/30 Python
python小项目之五子棋游戏
2019/12/26 Python
Pytorch 实现冻结指定卷积层的参数
2020/01/06 Python
在python中使用nohup命令说明
2020/04/16 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
在什么时候需要使用"常引用"
2015/12/31 面试题
乡镇庆八一活动方案
2014/02/02 职场文书
5.12护士节活动总结
2015/02/10 职场文书
吧主申请感言怎么写
2015/08/03 职场文书
面试官问我Mysql的存储引擎了解多少
2022/08/05 MySQL