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

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

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

 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>

 

posted @ 2015-06-11 16:13  如梦令szy  阅读(560)  评论(0编辑  收藏  举报