基于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 相关文章推荐
自动检查并替换文本框内的字符
Jun 30 Javascript
javascript 表单规则集合对象
Jul 21 Javascript
javascript入门基础之私有变量
Feb 23 Javascript
javascript 程序库的比较(一)之DOM功能
Apr 07 Javascript
javascript实现标签切换代码示例
May 22 Javascript
JavaScript反弹动画效果的实现代码
Jul 13 Javascript
探索webpack模块及webpack3新特性
Sep 18 Javascript
Three.js中网格对象MESH的属性与方法详解
Sep 27 Javascript
js使用xml数据载体实现城市省份二级联动效果
Nov 08 Javascript
vue-router实现编程式导航的代码实例
Jan 19 Javascript
微信小程序前端自定义分享的实现方法
Jun 13 Javascript
vue页面切换项目实现转场动画的方法
Nov 12 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注释和去除空格函数分享
2014/03/13 PHP
php+html5基于websocket实现聊天室的方法
2015/07/17 PHP
php识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
JS字符串处理实例代码
2013/08/05 Javascript
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
js用正则表达式来验证表单(比较齐全的资源)
2013/11/17 Javascript
利用Jquery实现可多选的下拉框
2014/02/21 Javascript
js交换排序 冒泡排序算法(Javascript版)
2014/10/04 Javascript
javascript中数组array及string的方法总结
2014/11/28 Javascript
angularjs 中$apply,$digest,$watch详解
2016/10/13 Javascript
基于JavaScript实现窗口拖动效果
2017/01/18 Javascript
详谈js中window.location.search的用法和作用
2017/02/13 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
JS判断Android、iOS或浏览器的多种方法(四种方法)
2017/06/29 Javascript
layui从数据库中获取复选框的值并默认选中方法
2018/08/15 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
2018/09/28 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
2019/06/06 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
VUE写一个简单的表格实例
2019/08/06 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
vue npm install 安装某个指定的版本操作
2020/08/11 Javascript
python定时器使用示例分享
2014/02/16 Python
使用Python编写一个简单的tic-tac-toe游戏的教程
2015/04/16 Python
Python搜索引擎实现原理和方法
2017/11/27 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
详解python中docx库的安装过程
2019/11/08 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
以下的初始化有什么区别
2013/12/16 面试题
羽毛球比赛策划方案
2014/06/13 职场文书
在校实习生求职信
2014/06/18 职场文书
关爱残疾人标语
2014/06/25 职场文书
2015年国庆晚会主持词
2015/07/01 职场文书
九年级英语教学反思
2016/02/15 职场文书