基于jquery的商品展示放大镜


Posted in Javascript onAugust 07, 2010

直接上代码吧(一共也才100来行,小东西)

$(document).ready(function() { 
_el("biggerPic").style.marginLeft = (0 - (getOffsetNumber(_el("biggerPic").style.width) - getOffsetNumber(_el("container").style.width))) + "px"; 
_el("biggerPic").style.marginTop = (0 - (getOffsetNumber(_el("biggerPic").style.height) - getOffsetNumber(_el("container").style.height))) + "px"; 
$("#oriImage").bind('mouseleave', function(event) { 
_el("biggerPic").style.marginLeft = (0 - (getOffsetNumber(_el("biggerPic").style.width) - getOffsetNumber(_el("container").style.width))) + "px"; 
_el("biggerPic").style.marginTop = (0 - (getOffsetNumber(_el("biggerPic").style.height) - getOffsetNumber(_el("container").style.height))) + "px"; 
}); 
$("#oriImage").bind('mouseover', function(event) { 
$("#oriImage").bind('mousemove', function(event) { // 在鼠标移动至操作层以后才LazyBind鼠标移动事件 
var mouseX, mouseY; 
if (navigator.userAgent.indexOf("MSIE 6.0") >= 0) { //在IE6以上各版本下和GOOGLE浏览器下 
mouseY = _offsetY(event, "oriImage"); 
mouseX = _offsetX(event, "oriImage"); 
} else {//在FF浏览器下需要追加像素作为偏移量单位而不能是其他 
mouseY = _offsetY(event, "oriImage"); 
mouseX = _offsetX(event, "oriImage"); 
} 
var playOffsetX = 0 - mouseX / _xPercent(_el("oriImage").style.width, _el("biggerPic").style.width); 
var playOffsetY = 0 - mouseY / _yPercent(_el("oriImage").style.height, _el("biggerPic").style.height); 
//当大图X坐标大于0,也就是到达最左边距时重置为0,当图片的X偏移量已经超出显示的容器时,则重置为其X偏移量为图片与容器之差的负数 
if (playOffsetY < 0 - (getOffsetNumber(_el("biggerPic").style.height) - getOffsetNumber(_el("container").style.height)) - getOffsetNumber(_el("container").style.height) / 2 
&& playOffsetX > 0 - (getOffsetNumber(_el("biggerPic").style.width) - getOffsetNumber(_el("container").style.width))) { 
_el("biggerPic").style.marginLeft = playOffsetX > 0 ? 0 + "px" : 
playOffsetX + getOffsetNumber(_el("container").style.width) / 2 > 0 ? 0 + "px" : playOffsetX + getOffsetNumber(_el("container").style.width) / 2 + "px"; 
return; 
} 
//当大图Y坐标大于0,也就是到达最上边距时重置为0,当图片的Y偏移量已经超出显示的容器时,则重置为其Y偏移量为图片与容器之差的负数 
if (playOffsetX < 0 - (getOffsetNumber(_el("biggerPic").style.width) - getOffsetNumber(_el("container").style.width)) - getOffsetNumber(_el("container").style.width) / 2 
&& playOffsetY > 0 - (getOffsetNumber(_el("biggerPic").style.height) - getOffsetNumber(_el("container").style.height))) { 
_el("biggerPic").style.marginTop = playOffsetY > 0 ? 0 + "px" : 
playOffsetY + getOffsetNumber(_el("container").style.height) / 2 > 0 ? 0 + "px" : playOffsetY + getOffsetNumber(_el("container").style.height) / 2 + "px"; 
return; 
} 
if (playOffsetY >= 0 - (getOffsetNumber(_el("biggerPic").style.height) - getOffsetNumber(_el("container").style.height)) - getOffsetNumber(_el("container").style.height) / 2 
&& playOffsetX >= 0 - (getOffsetNumber(_el("biggerPic").style.width) - getOffsetNumber(_el("container").style.width)) - getOffsetNumber(_el("container").style.width) / 2) { 
//alert(0 - (getOffsetNumber(_el("biggerPic").style.height) - getOffsetNumber(_el("container").style.height)) - getOffsetNumber(_el("container").style.height) / 2); 
_el("biggerPic").style.marginLeft = playOffsetX > 0 ? 0 + "px" : 
playOffsetX + getOffsetNumber(_el("container").style.width) / 2 > 0 ? 0 + "px" : playOffsetX + getOffsetNumber(_el("container").style.width) / 2 + "px"; 
_el("biggerPic").style.marginTop = playOffsetY > 0 ? 0 + "px" : 
playOffsetY + getOffsetNumber(_el("container").style.height) / 2 > 0 ? 0 + "px" : playOffsetY + getOffsetNumber(_el("container").style.height) / 2 + "px"; 
return; 
} 
return; 
}); 
}); 
});

嗯上面就基本上是大体的逻辑了,这里稍微解释一下,

1 大家应该注意到了,还是有很多CSS HACK的地方,现在这个东西是兼容FF3.0,IE 6,
7 ,8 以及chrome的,其他的还没有来得及试验

2 开发当中当放大以后的图片也就是ID为biggerPic的图片在移动到边界的时候要做特殊
处理,左边和上边就很简单了,直接归零,但右边和下边就稍微麻烦一点,需要计算当前
图片相对于容器(也就是ID为container的DIV)的偏移量,这里有一个问题,如果想以一
个固定的值去重新覆盖掉图片距离容器的上边距或右边距的时候,当用户浏览会发现有类
似“跳帧”的现象,原因是因为我用来判断当前图片的偏移量时用到了鼠标相对于操作容
器(也就是ID为“oriImage”的DIV)的距离作为判断的条件,事后发现这种做法不够精
确,而且会造成“跳帧”,遂放弃了这种方案。现在采用的是分别判断鼠标位置的方法,
从而触发不同的逻辑,代码上写的很清楚了。

3 之所以在页面加载完毕以及鼠标离开操作层的时候将大图的位置设置为最右下方,是
因为为了避免第二点中提到的“跳帧”而用的分条件判断,在第一时间用户触发鼠标移动
事件的时候,如果由操作层的右侧或是下侧进入的话,就会有不正确的显示,这估计也是
很多网上直接把放大镜层在加载的时候设置为hidden的原因,我觉得这仍是一个BUG,希
望有大虾指点正确的做法。

4 HTML的写法如下:
下面是操作层以及其中放的小图的写法,CSS没有抽出来,最近很懒
<div id="oriImage" style="cursor:crosshair; background-color: Yellow; overflow:hidden; width: 150px; height: 150px;">
<img id="oriImg" src="3.jpg" style="width:150px;height:150px;" alt="鼠标划过查看细节" /><!--这个图片ID可以任意指定--></div>

下面是效果层以及其中放的大图的写法,CSS没有抽出来,真的很懒
<div id="container" style="position: absolute; top: 200px; left: 450px; width: 250px;height: 250px; z-index: 10; overflow:hidden;">
<img id="biggerPic" src="1.jpg" style="width:1500px;height:1500px;" alt="查看产品细节" /></div>

PS: 各个HTML元素的ID除了操作层中的图片也就是“oriImg”之外,修改的话要修改JS.
放大镜层的样式必须添加一个为“overflow:hidden;”这个本应该做到JS里面去,懒了一下.
好了东西讲完了,现在补充一下,本人刚涉足前端,很多不足,大家多多包涵,
东西虽然拙劣,但好歹是自己敲的,日后有用到的同学可以直接问我要.

Javascript 相关文章推荐
javascript下有关dom以及xml节点访问兼容问题
Nov 26 Javascript
jquery1.4后 jqDrag 拖动 不可用
Feb 06 Javascript
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
Mar 05 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
Feb 27 Javascript
浅析JavaScript中的常用算法与函数
Nov 21 Javascript
jQuery+HTML5加入购物车代码分享
Oct 29 Javascript
基于JavaScript实现回到页面顶部动画代码
May 24 Javascript
Angularjs结合Bootstrap制作的一个TODO List
Aug 18 Javascript
字太多用...代替的方法(两种)
Mar 15 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
Dec 01 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
详解webpack-dev-server使用方法
Sep 14 Javascript
jquery autocomplete自动完成插件的的使用方法
Aug 07 #Javascript
jQuery的实现原理的模拟代码 -5 Ajax
Aug 07 #Javascript
javascript new fun的执行过程
Aug 05 #Javascript
过虑特殊字符输入的js代码
Aug 05 #Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
Aug 05 #Javascript
javascript new后的constructor属性
Aug 05 #Javascript
FileUpload上传图片(图片不变形)
Aug 05 #Javascript
You might like
使用PHP的日期与时间函数技巧
2008/04/24 PHP
网友原创的PHP模板类代码
2008/09/07 PHP
PHP两种去掉数组重复值的方法比较
2014/06/19 PHP
php中函数前加&amp;符号的作用分解
2014/07/08 PHP
php实现将数组转换为XML的方法
2015/03/09 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
JavaScript 对象、函数和继承
2009/07/07 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
js实现简单的左右两边固定广告效果实例
2015/04/10 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
JavaScript程序设计之JS调试
2015/12/09 Javascript
js数组去重的hash方法
2016/12/22 Javascript
基于Angular.js实现的触摸滑动动画实例代码
2017/02/19 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
2019/03/02 NodeJs
微信小程序全局变量GLOBALDATA的定义和调用过程解析
2019/09/23 Javascript
详解JavaScript 的执行机制
2020/09/18 Javascript
在vue项目中 实现定义全局变量 全局函数操作
2020/10/26 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
Python检测生僻字的实现方法
2016/10/23 Python
Python和C/C++交互的几种方法总结
2017/05/11 Python
Python django使用多进程连接mysql错误的解决方法
2018/10/08 Python
python将控制台输出保存至文件的方法
2019/01/07 Python
python格式化输出保留2位小数的实现方法
2019/07/02 Python
Pyspark获取并处理RDD数据代码实例
2020/03/27 Python
Selenium自动化测试工具使用方法汇总
2020/06/12 Python
爬虫代理的cookie如何生成运行
2020/09/22 Python
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
大学迎新生标语
2014/10/06 职场文书
作文评语怎么写
2014/12/25 职场文书
慰问信格式规范
2015/03/23 职场文书
妈妈别哭观后感
2015/06/08 职场文书
MySQL 1130异常,无法远程登录解决方案详解
2021/08/23 MySQL
海弦WR-800F
2022/04/05 无线电