基于jQuery实现 图片飞入购物车特效
博客专区 > yope 的博客 > 博客详情
基于jQuery实现 图片飞入购物车特效
yope 发表于3年前
基于jQuery实现 图片飞入购物车特效
  • 发表于 3年前
  • 阅读 2981
  • 收藏 33
  • 点赞 0
  • 评论 0

【腾讯云】如何购买服务器最划算?>>>   

摘要: 学习分享 让大家少走弯路 jQuery - animate()模拟加入购物车飞入效果

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

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

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

共有 人打赏支持
粉丝 14
博文 35
码字总数 32773
×
yope
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: