基於jQuery實現 圖片飛入購物車特效

在此以前 我還用了一個別人封裝的類庫 用起來感受棒棒滴,完美的拋物線,後來問題來了 不能適應各類分辨率,那麼美的拋物線也是白搭……css

再後來我就只好另尋他法嘍jquery

<div class="end">終點</div>
<img src="####" class="picture" />

<script src="####/jquery.min.js"></script>
<script>
$(function(){
$('.picture').click(function(){
var flyElm = $('.lanrenzhijia').clone().css('opacity','0.7');
flyElm.css({
    'z-index': 9000,
    'display': 'block',
    'position': 'absolute',
    'top': $('.picture').offset().top +'px',
    'left': $('.picture').offset().left +'px',
    'width': $('.picture').width() +'px',
    'height': $('.picture').height() +'px'
});
$('body').append(flyElm);
    flyElm.animate({
    top:$('.end').offset().top,
    left:$('.end').offset().left,
    width:50,
    height:50,
},'slow');
});
});
</script>

原生的就是簡潔美麗,用完以後的感受是萌萌噠! duang! daung! daung! app

相關文章
相關標籤/搜索