javascript - zoom 放大背景图怎么是从页面左上角开始放大的?
迷茫
迷茫 2017-04-11 11:17:29
0
2
819

别的浏览器用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'); })

为什么放大背景图片是从元素的左上角开始放大的??

迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

全部回复 (2)
巴扎黑

这个如果想从中心放大,就需要模拟了,通过改变宽高同时改变它的位置,让它在视觉上看起来是从中心放大的

    巴扎黑

    css中添加
    transform-origin: right top;

      最新下载
      更多>
      网站特效
      网站源码
      网站素材
      前端模板
      关于我们 免责声明 Sitemap
      PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!