javascript商城图片放大镜效果
<!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=gbk" />
<title>放大镜</title>
<style>
.zoomdiv{
position: absolute;
background: #ffffff;
border:1px solid #CCCCCC;
display:none;
text-align: center;
overflow: hidden;
}
.zoomup{
background:#c0c0c0;
display:none;
filter:alpha(opacity=50);
opacity:.5;
cursor:move;
position:absolute;
top:0;
left:0;
}
</style>
</head>
<body>
<div style="position:absolute;border:1px solid #c0c0c0;left:50px;"><img src="HTTP://www.aspxhome.com/article/UploadPic/20108/2/shoe2_small-69.jpg" id="small"/></div>
<div style="position:absolute;border:1px solid #c0c0c0;left:600px;"><img src="HTTP://www.aspxhome.com/article/UploadPic/20108/2/small-84.jpg" id="small1"/></div>
</body>
</html>
<script>
function zoom(o){
var d = document,db = document.body,dd = d.documentElement,ie = !+'\v1',div,divup,img = d.getElementById(o.id),loaded=0,timer,
imgTL=getTL(img),top=imgTL.t,left = imgTL.l,sx,sy,opt = {width:200,height:200,offset:20};
//创建元素
function creElm(o,pN,t){
var tmp = d.createElement(t||'div');
for(var p in o){
tmp = o;
}
return pN?pN.appendChild(tmp):db.appendChild(tmp);
};
//得带元素偏移量
function getTL(el){
var b = el.getBoundingClientRect();
//html4.01解析用db
return {
'l': b.left + dd.scrollLeft - dd.clientLeft,
't': b.top + dd.scrollTop - dd.clientTop
}
};
function extend(t,s){
for(var p in s){
t = s;
};
};
//离开时清掉
function leave(){
//清理mouseover上的时间戳
clearTimeout(timer);
div.style.display = divup.style.display = 'none';
ie?db.detachEvent('onmousemove',move):db.removeEventListener('mousemove',move,false)
};
function move(e){
var e = e || event,x=e.pageX||e.clientX+dd.scrollLeft,y=e.pageY||e.clientY+dd.scrollTop,
scrolly = y - divup.offsetHeight/2 - top,scrollx = x - divup.offsetWidth/2 - left;
scrolly = y - divup.offsetHeight/2 < top ? 0 : y + divup.offsetHeight/2>img.height+top ? img.height - divup.offsetHeight : scrolly;
scrollx = x - divup.offsetWidth/2 < left ? 0 : x + divup.offsetWidth/2>img.width+left ? img.width - divup.offsetWidth : scrollx;
div.scrollTop = scrolly*sy;div.scrollLeft = scrollx*sx;
extend(divup.style,{top:scrolly+'px',left:scrollx+'px'});
}
if(img){
extend(opt,o);
//创建大图的容器
div = creElm({className:'zoomdiv'});
//创建在小图上的浮层
divup = creElm({className:'zoomup'},img.parentNode);
creElm({onload:function(){
//ie下隐藏时width/height看不到问题
div.style.display = 'block'
var bwidth = this.width,bheight = this.height;
//大图和小图的比例
sx = bwidth/img.width,sy = bheight/img.height;
extend(divup.style,{
width:opt.width/sx+'px',
height:opt.height/sy+'px'
})
extend(div.style,{
left:(!opt.float?opt.offset+img.width+left:left-opt.offset-opt.width) +'px',
top:top+'px',
width:opt.width+'px',
height:opt.height+'px',
display:'none'
});
loaded = 1;
},src:opt.bigUrl},div,'img');
img.onmouseover = function(){
if(loaded){
div.style.display = divup.style.display = 'block';
ie?db.attachEvent('onmousemove',move):db.addEventListener('mousemove',move,false);
}else{
timer = setTimeout(arguments.callee,100);
}
};
img.parentNode = ie?leave:function(e){
!(this===e.relatedTarget||(this.contains?this.contains(e.relatedTarget):this.compareDocumentPosition(e.relatedTarget)==20))&&leave();
}
}
}
/*
width 大图的宽 可选 默认200
height 大图的高 可选 默认200
bigUrl 大图的url 必须的
id 小图的id 必须的
float 左边还是右边显示 可选 默认的是右边 'right' or 'left'
offset 大图距离小图的偏移量 可选 默认20
*/
zoom({
id:'small',
bigUrl:'HTTP://www.aspxhome.com/article/UploadPic/20108/2/shoe2_big-99.jpg',
offset:50
});
zoom({
id:'small1',
bigUrl:'HTTP://www.aspxhome.com/article/UploadPic/20108/2/big-28.jpg',
float:'left',
width:300,
height:300
});
</script>
页:
[1]