javascript放大镜效果

最新推荐文章于 2023-06-15 17:34:06 发布

weixin_34344403

最新推荐文章于 2023-06-15 17:34:06 发布

阅读量90

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/babyzone2004/archive/2010/08/05/1793451.html

版权

先看效果：

javascript放大镜效果在博客园里面已经有不少同行做过了，我这篇随笔其实也是大量参考了他们的代码，特别是Hellen.Li 博客《JavaScript图片放大镜效果》的代码，写得非常好，我主要也是以它的代码为蓝本加以改进，对其在chrome的bug做了改正。同时取消了对怪异模式的兼容（个人觉得没必要），对mouseout的问题也用了另外一套解决方法，不能说优化，只是这种做法个人比较容易理解。

1，关于mouseout问题：

当鼠标从div中移开的时候会触发onmouseout事件，但是当我们移到div中的元素时，即子元素，也会触发onmousout事件。也就是说，移到对象的子对象上，也算onmouseout了。这往往会让我们预期的效果达不到。这次在放大镜效果的代码中就遇到这个问题。我在网上查到一个比较好的解决方法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>橡树小屋</title></head><body>
<script type="text/javascript">
function test(obj, e) {
	//火狐，opera专用，e.currentTarget是火狐，opera专用的属性
alert(e.currentTarget);
if (e.currentTarget) {
	//relatedTarget对于 mouseout 事件来说，该属性是离开目标时，鼠标指针进入的节点。
	//e.relatedTarget != obj，当移入子元素的时候，会出现相等
	if (e.relatedTarget != obj) {
		if (obj != e.relatedTarget.parentNode) {
			alert(1);
		}
    }
 //ie专用
} else {
   if (e.toElement != obj) {
   		if (obj != e.toElement.parentNode) {
    	 alert(1);
    	}}}
}
</script>
<div οnmοuseοut="test(this, event)" style="width:100px;height:100px;border:1px #666 solid">
<span style="margin:5px;width:100%;height:100%;border:1px #ff0000 solid">橡树小屋</span>
</div></body></html>

此代码在放大镜效果中有应用到。

2，关于其中的可用性优化

当鼠标移出图像的时候，图像马上消失，这种消失的突然令人感觉不够舒服，特别是当图像像上面那么小的时候，可用性不好，本来我加了白色的背景border作为缓冲，当鼠标移出图像，如果还在图片周围5像素之内，大图像仍然会保留不消失，这样一个简单的过渡，体验更好些。在实际编写代码的时候，发现IE浏览器对border的mouseover事件效率不是很高，如果鼠标快速移出图片，大图有时不消失，当然还有其他因素，例如事件浮升等等影响，后来调试了很久也没有很好的解决方案，关于这个问题，有机会再另外总结一遍吧。

3，如何调用

HTML代码的格式应该如下，其实跟Hellen.Li 原来的架构基本一样，只是内部代码调整过而已：

//外面包裹一个相对定位或绝对定位的div，不能有padding，
<div style="position:relative;border:5px solid #FFF; float:left; margin-left:400px;">
<img src="1.jpg" class="zoom" big="1.jpg" />
</div>

添加class=“zoom”，big="1.jpg"是大图的地址。

用 zoom({width:300,height:300});来调用，可以添加下面几个参数：

                width:200,//大图的宽度
		height:200,//大图的高度
		offset:20,  //大图的偏移量
		float:'right',//大图在左边还是右边
		minWidth:100  //当窗口缩小，大图最小的宽度，如果小于minWidth,则移到左边

添加css：

#zoomdiv{position: absolute;background: #ffffff;border:1px solid #CCCCCC;display:none;text-align: center; overflow: hidden;}
#zoomup{position:absolute; background:#c0c0c0;display:none;filter:alpha(opacity=50);opacity:.5;cursor:move;}
.zoom{position:relative; width:100px; vertical-align:bottom;/*处理IE bug*/}

然后导入lens.js文件，就可以观察到javascript放大镜的效果了。下面是lens.js的代码内容：

代码

/* *************************************************
* Drag.js beta1
* 作者：橡树小屋 08.05.2010
* http://www.cnblogs.com/babyzone2004/
* 用法：zoom({width:300,height:300}); width,height是放大显示的区域
************************************************* */

// 定义所有的变量，方法
var zoom = function (o){
var d = document ,
db = document . body ,
timgs = d . getElementsByTagName( ' img ' ) ,
opt = {
width : 200 ,
height : 200 ,
offset : 20 ,
float : ' right ' ,
minWidth : 100
} ,
div = d . createElement( ' div ' ) ,
divup = d . createElement( ' div ' ) ,
// 获取元素的定位,x,y
getXY = function (el){
var r = {t : 0 , l : 0 } ,
ua = navigator . userAgent . toLowerCase() ,
add = function (t , l){r . l += l , r . t += t} ,
p = el;
if (el && el != db){
// el.getBoundingClientRect,获得元素的左，上，右和下分别相对浏览器视窗的位置
if (el . getBoundingClientRect){
var b = el . getBoundingClientRect();
add(b . top + Math . max (d . body . scrollTop , d . documentElement . scrollTop) ,
b . left + Math . max (d . body . scrollLeft , d . documentElement . scrollLeft));
add( - d . documentElement . clientTop ,- d . documentElement . clientLeft);
} else {
while (p){
add(p . offsetTop , p . offsetLeft);
p = p . offsetParent;
}
p = el . parentNode;
while (p && p != db) {
add( - p . scrollTop ,- p . scrollLeft);
p = p . parentNode;
}
}
}
return r;
} ,
// 重新设置div的宽高
extend = function (t , s){
for ( var p in s){
t[p] = s[p];
};
};

div . id = ' zoomdiv ' , divup . id = ' zoomup ' ;
div . innerHTML = ' <img id="bigimg" src="" /> ' ;
db . appendChild(div);
extend(opt , o);
function leave(obj , e){
var e = e || event;
/* alert(obj);
alert(e.currentTarget); */
// 火狐，opera专用，e.currentTarget是火狐，opera专用的属性
if (e . currentTarget) {
// relatedTarget对于 mouseout 事件来说，该属性是离开目标时，鼠标指针进入的节点。
//e.relatedTarget != obj，当移入子元素的时候，会出现相等
if (e . relatedTarget != obj) {
if (obj != e . relatedTarget . parentNode) {
div . style . display = divup . style . display = ' none ' ;
db . onmousemove = null ;
}
}
} else { // ie专用
if (e . toElement != obj) {
if (obj != e . toElement . parentNode) {
div . style . display = divup . style . display = ' none ' ;
db . onmousemove = null ;
}
}
}
};

for ( var i = 0 , ci;ci = timgs[i ++ ];){
if (ci . className == ' zoom ' ){
ci . onmouseover = function (e){
this . parentNode . appendChild(divup);
var bimg = d . getElementById( ' bigimg ' ) , bwidth , bheight , sx , sy ,
width = this . offsetWidth ,
height = this . offsetHeight ,
top = getXY(this) . t ,
left = getXY(this) . l ,
tWidth , tLeft , sWidth;
// 当鼠标移过的时候，开始载入大图
bimg . src = this . getAttribute( ' big ' );

if ( ! bimg . complete){
bimg . onload = showBimg;
} else {
showBimg();
}
function showBimg(){
div . style . display = ' block ' ;
bwidth = bimg . width ,
bheight = bimg . height ,
sx = bwidth / width , sy = bheight / height;
tLeft = opt . float == ' right ' ? opt . offset + width + left : left - opt . offset - opt . width ,
sWidth = window . innerWidth || (d . documentElement . clientWidth);
// 如果浏览器宽度不够，则自动适应显示div的宽度
if (tLeft + opt . width + 5 > sWidth){
tWidth = sWidth - 5 - tLeft;
// 此句式比较特殊
tWidth < opt . minWidth && (tLeft = left - opt . offset - opt . width , tWidth = 0 );
};
// 设置div,divup的宽高和位置
extend(div . style , {
left : tLeft + ' px ' ,
top : top + ' px ' ,
width : (tWidth || opt . width) + ' px ' ,
height : opt . height + ' px '
});
extend(divup . style , {
width : (tWidth || opt . width) / sx + ' px ' ,
height : opt . height / sy + ' px ' ,
display : ' block '
});
db . onmousemove = function (e){
var e = e || event ,
// 显示非IE的鼠标位置，然后是IE的
x = e . pageX || (e . clientX + (d . documentElement . scrollLeft || db . scrollLeft)) ,
y = e . pageY || (e . clientY + (d . documentElement . scrollTop || db . scrollTop)) ,
// X,Y相对于原始图片的位置
scrolly = y - divup . offsetHeight / 2 - top ,
scrollx = x - divup . offsetWidth / 2 - left;
// 如果鼠标接近边界的时候，相对位置将不再随鼠标发生变化

scrolly = y - divup . offsetHeight / 2 < top ? 0 : y + divup . offsetHeight / 2 > height + top ? height - divup . offsetHeight : scrolly;
scrollx = x - divup . offsetWidth / 2 < left ? 0 : x + divup . offsetWidth / 2 > width + left ? width - divup . offsetWidth : scrollx;
div . scrollTop = scrolly * sy;
div . scrollLeft = scrollx * sx;
extend(divup . style , {top : scrolly + ' px ' , left : scrollx + ' px ' });
}
};
};
ci . parentNode . onmouseout = function (event){leave(this , event)};
}
};
}

附件源码：javascript放大镜效果修正版

PS:感谢cdboy的提醒。

参考资料：

lulu Studio：javascript onmouseout问题解决方案

Hellen.Li ：JavaScript图片放大镜效果

《javascript放大镜效果》

橡树小屋

from http://www.cnblogs.com/babyzone2004/

本文地址： http://www.cnblogs.com/babyzone2004/archive/2010/08/05/1793451.html

转载于:https://www.cnblogs.com/babyzone2004/archive/2010/08/05/1793451.html

weixin_34344403

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript放大镜效果

先看效果：javascript放大镜效果在博客园里面已经有不少同行做过了，我这篇随笔其实也是大量参考了他们的代码，特别是Hellen.Li 博客《JavaScript图片放大镜效果》的代码，写得非常好，我主要也是以它的代码为蓝本加以改进，对其在chrome的bug做了改正。同时取消了对怪异模式的兼容（个人觉得没必要），对mouseout的问题也用了另外一套解决方法...
复制链接

扫一扫