放大镜并不是一个难以实现的效果, 只是因为牵涉到一些精确的数值计算, 显得比较繁琐. 在未来的一段日子, 我会不定期地写关于 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 获取鼠标位置了吧?) 留个课后思考题, 当镜片带边框时, 如何保证边框不影响镜片移动时的精确度?

　　推荐阅读

　　基于JQuery的动态删除Table表格的行和列的代码

首先要获取Table表格的行数，我是通过后台添加表格的所以我在前台获取的时候length一下就获取到了总数赋值例如上图： 如果我要打印这个表格但不想要操作那列的内容咋办？ 复制代码 代码如下: for(var i=0;i<num+1;>>>详细阅读

本文标题：JavaScript 放大镜 移动镜片效果代码

地址：http://www.17bianji.com/kaifa2/JS/24587.html

 1/2    1