写了个简单的放大镜功能，
功能
width 大图的宽 可选 默认200
height 大图的高 可选 默认200
bigUrl 大图的url 必须的
id 小图的大小 必须的
float 左边还是右边显示 可选 默认的是右边 'right' or 'left'
offset 大图距离小图的偏移量 可选 默认20
支持多个图放大
支持
ie 6-8
ff3.5 -3.6
chrome
修正图片加载慢时的问题
<!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://img.qihoo.com/images/2008/hao360/20100421/shoe2_small.jpg" id="small"/></div>
<div style="position:absolute;border:1px solid #c0c0c0;left:600px;"><img src="http://img.qihoo.com/images/2008/hao360/20100421/small.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[p] = o[p];
}
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[p] = s[p];
};
};
//离开时清掉
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?'onmouseleave':'onmouseout'] = 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://i757.photobucket.com/albums/xx213/campaignZH/shoe2_big.jpg',
offset:50
});
zoom({
id:'small1',
bigUrl:'http://img.qihoo.com/images/2008/hao360/20100421/big.jpg',
float:'left',
width:300,
height:300
});
</script>
| Word教程网 | Excel教程网 | Dreamweaver教程网 | Fireworks教程网 | PPT教程网 | FLASH教程网 | PS教程网 |
| HTML教程网 | DIV CSS教程网 | FLASH AS教程网 | ACCESS教程网 | SQL SERVER教程网 | C语言教程网 | JAVASCRIPT教程网 |
| ASP教程网 | ASP.NET教程网 | CorelDraw教程网 |
QQ：2693987339(点击联系)购买教程光盘
:
