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学习笔记(十七)js 优化
Feb 04 Javascript
JS setCapture 区域外事件捕捉
Mar 18 Javascript
纯js模拟div层弹性运动的方法
Jul 27 Javascript
用js写的一个路由(简单实例)
Sep 24 Javascript
javascript实现数据双向绑定的三种方式小结
Mar 09 Javascript
Vuex和前端缓存的整合策略详解
May 09 Javascript
微信小程序适配iphoneX的实现方法
Sep 18 Javascript
Vue 引入AMap高德地图的实现代码
Apr 29 Javascript
微信小程序如何再次获取用户授权的方法
May 10 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
Sep 10 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
Feb 25 Javascript
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
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(三)
2012/03/22 PHP
thinkphp模板继承实例简述
2014/11/26 PHP
php语法检查的方法总结
2019/01/21 PHP
javascript十个最常用的自定义函数(中文版)
2009/09/07 Javascript
JS读取cookies信息(记录用户名)
2012/01/10 Javascript
在子窗口中关闭父窗口的一句代码
2013/10/21 Javascript
js调试系列 源码定位与调试[基础篇]
2014/06/18 Javascript
详解AngularJS实现表单验证
2015/12/10 Javascript
JavaScript类型系统之Object详解
2016/01/07 Javascript
js选择器全面解析
2016/06/27 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
js实现数组内数据的上移和下移的实例
2017/11/14 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
vue权限问题的完美解决方案
2019/05/08 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
JS实现烟花爆炸效果
2020/03/10 Javascript
EXTJS7实现点击拖拉选择文本
2020/12/17 Javascript
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
Python-基础-入门 简介
2014/08/09 Python
在Python中用split()方法分割字符串的使用介绍
2015/05/20 Python
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
说说如何遍历Python列表的方法示例
2019/02/11 Python
关于box-sizing的全面理解
2016/07/28 HTML / CSS
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
美国最大的旗帜经销商:Carrot-Top
2018/02/26 全球购物
新加坡第一大健康与美容零售商:屈臣氏新加坡(Watsons Singapore)
2020/12/11 全球购物
审核会计岗位职责
2013/11/08 职场文书
法律进学校实施方案
2014/03/15 职场文书
幼儿发展评估方案
2014/06/11 职场文书
乡镇爱国卫生月活动总结
2014/06/25 职场文书
工商管理自荐书
2014/07/06 职场文书
单位委托书格式范本
2014/09/29 职场文书
仓库管理制度范本
2015/08/04 职场文书
《秋思》教学反思
2016/02/23 职场文书
工作报告范文
2019/06/20 职场文书