                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /用JavaScript实现图片缓慢缩放效果

请教一下问题

我在做网页，我要实现的效果是鼠标放上面图片变大，拿开变小。我的代码也没错，就是不出效果。谁可以写个代码，我借鉴一下吗？非常感谢！

zhang1iang

2015-08-26

源自：用JavaScript实现图片缓慢缩放效果

关注问题我要回答

1174

操作

收起

2 回答

非常OK
2015-08-26

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片缩放效果</title>
<style type="text/css">
  #con{margin:0 auto; width:830px;
   overflow: hidden;}
  #con div {float:left; border:#CCC solid 1px;
   height: 200px;width:200px;
   margin-bottom: 5px;
   margin-right:5px;
      overflow: hidden;}
   img{transition:all 2s;}
  img:hover{transform:scale(1.1,1.1);}
</style>
</head>
<body>
<div id="con">
<div><img src="images/face.jpg" /></div>
<div><img src="images/face.jpg" /></div>
<div><img src="images/face.jpg" /></div>
<div><img src="images/face.jpg" /></div>
<div><img src="images/face.jpg" /></div>
<div><img src="images/face.jpg" /></div>
<div><img src="images/face.jpg" /></div>
<div><img src="images/face.jpg" /></div>
</div>

</body>
</html>