名站网址导航为大家提供关于网站网页设计设计相关的的教程知识。
- 本篇文章具体介绍如下
本次我们先了解如何在缩略图上移动镜片. (这是 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 获取鼠标位置了吧?)
留个课后思考题, 当镜片带边框时, 如何保证边框不影响镜片移动时的精确度?
好了关于网站网页设计设计相关的这篇文章就给大家介绍到这里不明白的地方给本站留言。声明,本站内容来源于互联网,如果侵犯了你的权益请联系本站删除。,分享14个很酷的jQuery导航菜单插件-jquery