<!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>
<style type="text/css">
div,img{margin:0;padding:0;}
#small{width:300px;border:1px #fff solid;position:relative;float:left;}
#small img{width:300px;float:left;}
#showimg{width:100px;height:100px;background:#fff;opacity:0.5;filter:alpha(opacity=50);cursor:move;display:none;position:absolute;}
#bigimg{width:214px;height:207px;float:left;display:none;}
</style>
</head>
<body>
<div id="small">
<img src="http://www.zencarttest.com/images/Ralph-Lauren-1030-Leather-Trim-Knit-Silk-Jacket.jpg" alt="shrek2"/>
<div id="showimg"></div>
</div>
<div id="bigimg"> </div>
<script type="text/javascript">
var $=function(id){return typeof(id)=="string"?document.getElementById(id):id};
var small=$("small");
var showimg=$("showimg");
var bigimg=$("bigimg");
var smallurl=small.getElementsByTagName("img")[0].getAttribute("src");
var maxwidth=maxheight=showhalf=0;
small.onmouseover=function(){
showimg.style.display="block";
bigimg.style.display="block";
showhalf=showimg.offsetWidth/2;
maxwidth=small.clientWidth-showimg.offsetWidth;
maxheight=small.clientHeight-showimg.offsetHeight;
}
small.onmousemove=function(e){
e=e||window.event;
mousepos=mouseposition(e);
var Top=mousepos.y-small.offsetTop-showhalf;
var Left=mousepos.x-small.offsetLeft-showhalf;
var num=bigimg.clientWidth/showimg.clientWidth;
Top=Top<0?0:Top>maxheight?maxheight:Top;
Left=Left<0?0:Left>maxwidth?maxwidth:Left;
showimg.style.top=Top+"px";
showimg.style.left=Left+"px";
bigimg.style.background="url("+smallurl+") -"+Left*num+"px -"+Top*num+"px no-repeat";
}
small.onmouseout=function(){
showimg.style.display="none";
bigimg.style.display="none";
}
function mouseposition(ev){
return{
x:ev.clientX+(document.body.scrollLeft||document.documentElement.scrollLeft),
y:ev.clientY+(document.body.scrollTop||document.documentElement.scrollTop)
}
}
</script>
</body>
</html>
浙公网安备 33010602011771号