图片 鼠标指向时放大功能,便于产品展示,可以通过Js,jquery来实现,但最好的方法还是纯css来实现,下面的代码轻松实现了这一功能。
1、html结构
<ul> <li><a href=""><img scr="/images/1.jpg"></a></li> <li><a href=""><img scr="/images/2.jpg"></a></li> <li><a href=""><img scr="/images/3.jpg"></a></li> <li><a> href=""<img scr="/images/4.jpg"></a></li>
2、Css
img{ display: block; width:100%; transform: scale(1); transition: all 1s ease 0s; -webkit-transform: scale(1); -webkit-transform: all 1s ease 0s; -webkit-transform-origin:50% 50%; transform-origin:50% 50%; overflow:hidden; } a:hover img{ transform: scale(1.3); transition: all 1s ease 0s; -webkit-transform: all 1s ease 0s; -webkit-transform: scale(1.3); /*放大1.3倍*/ transition-duration: .5s; overflow:hidden; }