学习在于积累,今天利用jquery.fly实现仿淘宝购物车飞入特效,虽然实现起来简单,但实际使用时有一堆坑需要注意。结合实际项目经验,我简单的总结了一下到底有哪些坑需要去填。
参考网址:github:https://github.com/amibug/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,
top:offset.top,
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();
});
start: {
left: event.pageX,
top: event.pageY-scrollTop
}
以上问题都解决完以后,基本就能做出比较完美的飞入特效了。