cari

Rumah  >  Soal Jawab  >  teks badan

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;

        // *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;

}

</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

membalas semua(2)saya akan balas

  • 巴扎黑

    巴扎黑2017-04-11 11:19:29

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

    balas
    0
  • 巴扎黑

    巴扎黑2017-04-11 11:19:29

    css中添加
    transform-origin: right top;

    balas
    0
  • Batalbalas