javascript - zoom 放大背景图怎么是从页面左上角开始放大的?
别的浏览器用css3实现了效果:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <code> .section-photo{
overflow:hidden;
position: relative;
height:529px;
&: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;
}
</code>
|
demo:http://codepen.io/marklow/pen/WxpYod
1 2 3 4 5 6 7 8 9 10 11 12 13 | <code>
js--兼容ie的代码:
$( '#cultural-banner' ).hover( function (){
$(this).animate({
zoom: 1.1
},
'jswing' );
}, function (){
$(this).animate({
zoom:.8
},
'jswing' );
})</code>
|
为什么放大背景图片是从元素的左上角开始放大的??
迷茫2897 hari yang lalu934