javascript+css网页图片放大

　　在现在流行的网商的网站上，会有很多的商品照片，然后当鼠标移动上去的时候照片可以放大。

　　我自己也实现了一个，原理其实很简单，页面同时要放上两张同样的照片，其中一张的大小必须要进行相应的设置，然后另外一张为原始大小，通过控制原始大小的照片来实现效果。

　　为了尽量做到完善，自己加了不少的代码，事先要考虑原始照片的比例来进行图片缩放的设置，然后通过原始图片的大小来调整显示放大的范围，尽量做到完善一些。

　　代码兼容性还算不错，起码IE,firefox，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=gb2312" />
<title>无标题文档</title>
    
    <style type="text/css"> 
        #smallPicture{
            height:228px;
            width:304px;
            position:absolute;
            margin:10px;
            background-color:#CCCCFF;
        }
        #pic1{
            position:absolute;
        }
        #pic2{
            position:absolute;
            
        }
        #overlay{
            display:none;
            background-color:#FF0000;
            opacity:0.5;
            height:20px;
            width:20px;
            position:absolute;
        }
        #bigPicture{
            position:absolute;
            height:500px;
            width:500px;
            overflow:hidden;
            display:none;
        }
    </style>
    
    <script type="text/javascript">
        function $(sid){
            return document.getElementById(sid);
        }
        window.onload=function(){
            var pic1=$("pic1");
            var smallPic=$("smallPicture");
            
            if(((smallPic.offsetWidth/pic1.width)*pic1.height)>smallPic.offsetHeight){
                pic1.height=smallPic.offsetHeight;
                pic1.width=(smallPic.offsetHeight/pic1.height)*pic1.width;
var width=smallPic.offsetWidth-pic1.width;
                pic1.style.left=(width/2)+'px;'
            }else{
                pic1.width=smallPic.offsetWidth;
                pic1.height=(smallPic.offsetWidth/pic1.width)*pic1.height;
var height=smallPic.offsetHeight-pic1.height;
                pic1.style.top=(height/2)+'px';
            }
            
            
            $("smallPicture").onmouseover=function(ev){
                $("bigPicture").style.left=($("smallPicture").offsetLeft+$("smallPicture").offsetWidth)+10+'px';
                $("bigPicture").style.top=$("smallPicture").offsetTop+'px';
                $("bigPicture").style.display='block';
                $("overlay").style.height=($("bigPicture").offsetHeight/$("pic2").height)*$("pic1").height+'px';
                $("overlay").style.width=($("bigPicture").offsetWidth/$("pic2").width)*$("pic1").width+'px';
                $("overlay").style.display='block';
            }
            $("smallPicture").onmousemove=function(ev){
                ev=ev||event;
                var x=ev.clientX-$("smallPicture").offsetLeft;
                var y=ev.clientY-$("smallPicture").offsetTop;
                var sx=x-$("overlay").offsetWidth/2;
var sy=y-$("overlay").offsetHeight/2;
                
                if(sx<0){
                    sx=0;
                }else if((sx+$("overlay").offsetWidth)>$("smallPicture").offsetWidth){
                    sx=$("smallPicture").offsetWidth-$("overlay").offsetWidth;
                }
                if(sy<0){
                    sy=0;
                }else if((sy+$("overlay").offsetHeight)>$("smallPicture").offsetHeight){
                    sy=$("smallPicture").offsetHeight-$("overlay").offsetHeight;
                }
                
                $("overlay").style.left=sx+'px';
                $("overlay").style.top=sy+'px';
                
                x=ev.clientX-$("smallPicture").offsetLeft-$("pic1").offsetLeft;
                y=ev.clientY-$("smallPicture").offsetTop-$("pic1").offsetTop;
                
                
                
                var xPercent=x/$("pic1").offsetWidth;
var yPercent=y/$("pic1").offsetHeight;
                
                x=xPercent*$("pic2").width+$("pic2").offsetLeft;
                y=yPercent*$("pic2").height+$("pic2").offsetTop;
                $("fjs").innerHTML=x;
                
                var xx=$("bigPicture").offsetWidth/2;
var yy=$("bigPicture").offsetHeight/2;                
                
                var cx=xx-x;
                var cy=yy-y;
                
                $("pic2").style.left=cx+parseInt($("pic2").offsetLeft)+'px';
                $("pic2").style.top=cy+parseInt($("pic2").offsetTop)+'px';
            }
            $("smallPicture").onmouseout=function(ev){
                $("bigPicture").style.display='none';
                $("overlay").style.display='none';
            }
    
        }
    </script>
    

</head>

<body>
    
    <li id="fjs"></li>
    <br />
    <div id="smallPicture">
        <img id="pic1" src="file:///D|/我的照片/照片/IMG_2500.JPG"/>
        <span id="overlay"></span>
    </div>
    <div id="bigPicture">
        <img id="pic2" src="file:///D|/我的照片/照片/IMG_2500.JPG" />
    </div>
    
</body>
</html>



posted on 2011-12-12 16:54  fjs_cloud  阅读(267)  评论(0)    收藏  举报

导航