别的浏览器用css3实现了效果:
.section-photo{ overflow:hidden; position: relative; height:529px; // *zoom:1; &:hover{ .cultural-banner{ -webkit-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); -webkit-transition: all 8s; transition: all 8s; } } .cultural-banner{ -webkit-transform: scale(.8,.8); -ms-transform: scale(.8,.8); transform: scale(.8,.8); -webkit-transition: all 5s; transition: all 5s; } } .cultural-banner{ background:transparent url(../imgs/hpd_025.png) center center repeat; padding:117px 0 157px 0; margin-bottom: 60px; height:469px; }
demo:http://codepen.io/marklow/pen/WxpYod
js--兼容ie的代码: $('#cultural-banner').hover(function(){ $(this).animate({ zoom: 1.1 }, 'jswing'); },function(){ $(this).animate({ zoom:.8 }, 'jswing'); })
为什么放大背景图片是从元素的左上角开始放大的??
这个如果想从中心放大,就需要模拟了,通过改变宽高同时改变它的位置,让它在视觉上看起来是从中心放大的
css中添加
transform-origin: right top;