设置图片从页面四周渐入效果的锚点方法

原理:利用锚点定位方法设置图片运动期间各个时期的坐标位置。在不同时刻对各锚点坐标调用。

相比传统方法的优点:可以更灵活的变动图片的位置。各个运动时期的运动时间更好控制。

 1 <script>

 2         $(function(){

 3             $('#mdmobile').fullpage({

 4                 sectionsColor: ['#1bbc9b', '#FFFFFF', '#FFFFFF', '#FFFFFF'],

 5                 afterRender: function() {

 6                     $('.mdmobile-first-middle img').each(function () {

 7                         var $rel = $(this).attr('rel');

 8                         var $arr = $rel.split(',');

 9                         $(this).animate({

10                             left: $arr[2] + 'px',

11                             top: $arr[3] + 'px'

12                         }, 400);

13                     });

14                 }

15             })

16         });

17     </script>
<!--middle start-->

            <div class="mdmobile-first-middle">

                <img src="images/0_14.png" rel="-100,0,0,0" class="mdmobile-first-middle_left"/>

                <img src="images/0_11.png" rel="90,-180,0,0" class="mdmobile-first-middle_top"/>

                <img src="images/0_18.png" rel="90,-180,0,0" class="mdmobile-first-middle_bottom"/>

                <div class="clear"></div>

            </div>

 

你可能感兴趣的:(图片)