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文件里远程调用jquery.js会在ie8下的一个奇怪问题
Nov 28 Javascript
jquery绑定事件不生效的解决方法
Feb 11 Javascript
Node.js编程中客户端Session的使用详解
Jun 23 Javascript
JavaScript类型系统之正则表达式
Jan 05 Javascript
高效Web开发的10个jQuery代码片段
Jul 22 Javascript
JavaScript使用Range调色及透明度实例
Sep 25 Javascript
bootstrap vue.js实现tab效果
Feb 07 Javascript
React Native之TextInput组件解析示例
Aug 22 Javascript
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
js实现简单的日历显示效果函数示例
Nov 25 Javascript
vue项目打包之开发环境和部署环境的实现
Apr 23 Javascript
原生js实现轮播图特效
May 04 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
德生9700DX电路分析
2021/03/02 无线电
PHP动态创建Web站点的方法
2011/08/14 PHP
php用正则表达式匹配中文实例详解
2013/11/06 PHP
thinkphp浏览历史功能实现方法
2014/10/29 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
不错的一个日期输入 动态
2006/11/06 Javascript
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
2007/03/06 Javascript
Js 获取当前日期时间及其它操作实现代码
2021/03/04 Javascript
js本身的局限性 别让javascript做太多事
2010/03/23 Javascript
Javascript调用C#代码
2011/01/17 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
2013/09/27 Javascript
php析构函数的具体用法小结
2014/03/11 Javascript
使用jquery写个更改表格行顺序的小功能
2014/04/29 Javascript
通过JS来动态的修改url,实现对url的增删查改
2014/09/01 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
2016/11/29 Javascript
从零学习node.js之简易的网络爬虫(四)
2017/02/22 Javascript
vue v-model表单控件绑定详解
2017/05/17 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
2018/07/27 Javascript
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
vue项目查看vue版本及cli版本的实现方式
2020/10/24 Javascript
Node.js中的异步生成器与异步迭代详解
2021/01/31 Javascript
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
提升Python程序运行效率的6个方法
2015/03/31 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
python DES加密与解密及hex输出和bs64格式输出的实现代码
2020/04/13 Python
Philosophy美国官网:美国美容品牌
2016/08/15 全球购物
教师旷工检讨书
2014/01/18 职场文书
幼儿园家长评语大全
2014/04/16 职场文书
公务员上班玩游戏检讨书
2014/09/17 职场文书
西岭雪山导游词
2015/02/06 职场文书
医生个人年度总结
2015/02/28 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
排查并解决MySQL生产库内存使用率高的报警
2022/04/11 MySQL
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
2022/08/05 Vue.js