基于jQuery实现图片飞入购物车特效

最新推荐文章于 2019-07-05 15:31:17 发布

weixin_33859844

最新推荐文章于 2019-07-05 15:31:17 发布

阅读量173

点赞数

原文链接：https://my.oschina.net/nyp/blog/395411

版权

为什么80%的码农都做不了架构师？>>>

在此之前我还用了一个别人封装的类库用起来感觉棒棒滴，完美的抛物线，后来问题来了不能适应各种分辨率，那么美的抛物线也是白搭……

再后来我就只好另寻他法喽

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

转载于:https://my.oschina.net/nyp/blog/395411