商品展示的放大镜效果 

<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>放大镜</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
*{padding:0; margin:0;}
#main{margin:20px;}
.smallPic{width:400px;height:400px;float:left;margin-right:15px; position:relative; border:1px solid #e6eaf3;}
.smallPic img {position:absolute; top:0px; left:0px;}
.smallPic .mouse{cursor:crosshair;width:150px;height:150px;position:absolute;top:0px;left:0px;z-index:5;background:#e6eaf3;opacity:.80;filter:alpha(opacity=80);display:none;}
.bigPic{width:500px;height:500px; display:none;border:1px solid #e6eaf3;float:left;overflow:hidden;position:relative;}
.bigPic img{position:absolute;left:0;top:0px;}
</style>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
  show({
    id:'main'
  })   
}
function show(opt){
   var oBox = document.getElementById(opt.id);
   var oDiv = oBox.getElementsByTagName('div')[0];
   var oP = oBox.getElementsByTagName('p')[0]; 
   var oMaxDiv = oBox.getElementsByTagName('div')[1];  
   var oImg = oMaxDiv.getElementsByTagName('img')[0];
   oDiv.onmouseover = function(){
        oP.style.display = 'block';
                oMaxDiv.style.display = 'block';
   };
   oDiv.onmouseout= function(){
        oP.style.display = 'none';
                oMaxDiv.style.display = 'none';
   }; 
   oDiv.onmousemove = function(ev){
        var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
                var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
        var oEvent = ev||event;
                var L = (oEvent.clientX - oDiv.offsetLeft - oP.offsetWidth/2)+scrollLeft;
                var T = (oEvent.clientY - oDiv.offsetTop - oP.offsetHeight/2)+scrollTop;
                if(L<0){
                   L = 0;
                }else if(L>oDiv.offsetWidth-oP.offsetWidth){
                   L = oDiv.offsetWidth-oP.offsetWidth;
                }
                if(T<0){
                   T = 0; 
                }else if(T>oDiv.offsetHeight-oP.offsetHeight){
                   T = oDiv.offsetHeight-oP.offsetHeight;
                }
                oP.style.left = L+'px';
                oP.style.top = T + 'px';
                var scaleL = L/(oDiv.offsetWidth-oP.offsetWidth);
                var scaleT = T/(oDiv.offsetHeight-oP.offsetHeight);
                oImg.style.left = -(oImg.offsetWidth-oMaxDiv.offsetWidth)*scaleL +'px';
                oImg.style.top = -(oImg.offsetHeight-oMaxDiv.offsetHeight)*scaleT+'px';
   }
}
</script>
<div id='main'>
     <div class='smallPic'>
            <p class='mouse'></p>
                <img src='http://www.milanw.com/images/1875703-1j201402121420212353.jpg' width='400px' height='400px' /> 
         </div>
         <div class='bigPic'>
            <img src="http://www.milanw.com/images/1875703-1j201402121420212352.jpg" width='800px' height='800px'/> 
         </div>
</div>
</body>
</html>

 

posted @ 2014-04-24 11:07  潇潇杀  阅读(157)  评论(0)    收藏  举报