利⽤jquery.fly实现仿淘宝购物车飞⼊特效
学习在于积累，今天利⽤jquery.fly实现仿淘宝购物车飞⼊特效，虽然实现起来简单，但实际使⽤时有⼀堆坑需要注意。结合实际项⽬经验，我简单的总结了⼀下到底有哪些坑需要去填。
从以上⽹址下载js⽂件即可使⽤。
⼀：载⼊页⾯
<script src="../lib/jquery/dist/jquery.min.js"></script>
<script src="../lib/fly-master/dist/jquery.fly.min.js"></script>
<script src="../lib/fly-master/src/requestAnimationFrame.js"></script>
tips：requestAnimationFrame.js⽂件是⽤来兼容IE8以下的游览器的
⼆：实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘宝购物车飞⼊特效</title>
<script src="../lib/jquery/dist/jquery.min.js"></script>
<script src="../lib/fly-master/dist/jquery.fly.min.js"></script>
<script src="../lib/fly-master/src/requestAnimationFrame.js"></script>
<style>
.box{
width: 198px;
height: 320px;
border: 1px solid #e0e0e0;
text-align: center;
}
.box h4{line-height:32px; font-size:14px; color:#f30;font-weight:500}
.box h4 span{font-size:20px}
.u-flyer{display: block;width: 50px;height: 50px;border-radius: 50px;position: fixed;z-index: 9999;}
.m-sidebar{
position: fixed;
top:0;
right: 0;
background: #000000;
z-index: 2000;
width: 35px;
height: 100%;
font-size: 12px;
color: #fff;
}
.cart{color: #fff;text-align:center;line-height: 20px;padding: 200px 0 0 0px;margin: 200px 0}
.cart span{display:block;width:20px;margin:0 auto;}
</style>
</head>
<body>
<div class="box">
<img src="../logo.jpg" width="180" height="180">
<h4>￥<span>300</span></h4>
<a href="#" class="button orange addcar">加⼊购物车</a>
</div>
<div class="m-sidebar">
<div class="cart">
<i id="end"></i>
<span>购物车</span>
</div>
</div>
效果图展⽰：
这个是简单的实现，实际项⽬的实现就不发出来了，为了节省各位看官的时间，我还是先把遇到的坑给总结出来吧。天坑⼀：页⾯⼤⼩变化，飞⼊位置错误
<script>
$(function () {
var offset=$('#end').offset();
$(window).resize(site);
function site() {
offset=$('#end').offset();
}
$('.box').on('click','a',function () {
var addcar=$(this);
var img=addcar.parent().find('img').attr('src');
var flyer=$('<img class="u-flyer" src="'+img+'">');
console.log(offset)
flyer.fly({
start:{
left:event.pageX,
top:event.pageY
},
end:{
left:offset.left,
p,
width:0,
height:0
}
})
})
})
</script>
</body>
</html>
问题原因：代码只获取了⼀次offset，所以页⾯发⽣改变后，虽然offset也发⽣了改变，但是程序中的offset还是以前的值。
解决⽅法：我们在页⾯改变是触发的resize()事件中，重新获取offset属性即可，具体代码：
$(window).resize(site);
function site() {
offset=$('#end').offset();
}
天坑⼆：代码写的没问题，但是结束位置的offset错误，⽽且总是偏⼤
问题原因： offset在获取初始值时，会受到滚动条的影响，当有上下滚动条或者左右滚动条时，offset的位置就会相应的偏⼤。解决⽅法： 让页⾯的scoll值为0，并且每次改变页⾯也归置为0，具体代码：
$(window).scrollTop(0);
$(window).resize(site);
function site() {
$(window).scrollTop(0);
offset=$('#end').offset();
}
天坑三：offset没问题了，但是起飞时⼜有问题，起飞的位置也偏⼤
问题原因： 依然是受到scoll的影响，所以我们实际的起飞位置应该是page的值减去scoll的值
解决⽅法： 起飞位置=page的值 - scoll的值，具体代码：
var scrollTop;
$(window).scroll(function() {
scrollTop=$(window).scrollTop();jquery滚动条滚动到底部
});
start: {
left: event.pageX,
top: event.pageY-scrollTop
}
以上问题都解决完以后，基本就能做出⽐较完美的飞⼊特效了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。