js鼠标经过放大图片/两个形式 超级无敌简单

1.利用css3 transition/transform 特性

<html>    
    <head>    
        <meta charset="UTF-8">    
        <title></title>    
        <style type="text/css">    
            div{    
                width: 400px;    
                height: 300px;    
                border: #000 solid 1px;    
                margin: 50px auto;    
                overflow: hidden;    
            }    
            div img{    
                cursor: pointer;    
                transition: all 0.5s;    
            }    
            div img:hover{    
                transform: scale(1.5);    
            }    
        </style>    
    </head>    
    <body>    
        <div>    
            <img src="img/1.jpg" />    
        </div>    
    </body>    
</html>  

2.显示小图/鼠标经过显示大图

<html>  
    <head>  
    	<meta charset="utf-8" />
        <title>  
            
        </title>  
    </head>  
    <body>  
        <script>  
            function showBigImg(src){  
                document.getElementById("defaultImg").src=src;  
            }  
        </script>  
          
        <img src="img/1.jpg" id="defaultImg" width="300px" height="300px">  
        <br>
        <img src='img/2.gif'width="60px" height="60px" onmouseover="showBigImg('img/2.gif')">  
         <img src='img/3.gif'width="60px" height="60px" onmouseover="showBigImg('img/3.gif')">  
    </body>  
</html> 

展开阅读全文

没有更多推荐了,返回首页