图片特效-放大镜特效
——————————————————————
<script type="text/javascript">
var moveme=false;
function init(){
var d1=document.getElementById('div1');
var the_float=d1.getElementsByTagName('div')[0];
var the_span=d1.getElementsByTagName('span')[0];
var the_img=document.getElementById('img1');
the_float.onmouseover=function(){
the_span.style.display='block';
the_img.parentNode.style.display='block';
};
the_float.onmouseout=function(){
the_span.style.display='none';
the_img.parentNode.style.display='none';
};
the_float.onmousemove=function(ev){
var oEvent=ev||event;
var x=oEvent.clientX-d1.offsetLeft-the_span.offsetWidth/2;
var y=oEvent.clientY-d1.offsetTop-the_span.offsetHeight/2;
if(x<0)
x=0;
else if(x>the_float.offsetWidth-the_span.offsetWidth)
x=the_float.offsetWidth-the_span.offsetWidth;
if(y<0)
y=0;
else if(y>the_float.offsetHeight-the_span.offsetHeight)
y=the_float.offsetHeight-the_span.offsetHeight;
the_span.style.left=x+'px';
the_span.style.top=y+'px';
var percentX=x/(the_float.offsetWidth-the_span.offsetWidth);
var percentY=y/(the_float.offsetHeight-the_span.offsetHeight);
var iParent=the_img.parentNode;
the_img.style.left=-percentX*(the_img.offsetWidth-iParent.offsetWidth)+'px';
the_img.style.top=-percentY*(the_img.offsetHeight-iParent.offsetHeight)+'px';
};
}
</script>
————————————————————————————————
<style type="text/css">
#div1 { width:280px; height:200px; position:relative; margin:30px auto 0px;}
#div1 img{width:280px; height:200px;}
#div1 span { width:100px; height:100px; background:blue; left:0px;top:0px; position:absolute; display:none; filter:alpha(opacity:20); opacity:0.2;}
.show { width:100%; height:100%; background:blue; position:absolute; z-index:10px; filter:alpha(opacity:10); opacity:0.1; left:0px; top:0px; }
#div2 {width:560px; height:400px; position:relative; display:none; overflow:hidden; margin:0px auto 0px;}
#img1 { position:absolute;}
</style>
————————————————————————
<body style="text-align:center" onload="init();">
<div id="div1">
<img src="2.gif">
<span style="display: none; left: 204px; top: 41px;"></span>
<div class="show"></div>
</div>
<div id="div2" style="display: none;">
<img id="img1" src="2_big.gif" style="left: -610px; top: -149.21311475409834px;">
</div>
</body>
————————————————————————
