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

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

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

迷茫
迷茫

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

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!