本文介绍了一种基于jQuery fly.js插件实现的购物车商品飞入动画效果，通过设置起点和终点坐标，插件自动完成抛物线运动。文章提供了具体代码实例，包括HTML、CSS样式和JavaScript绑定事件。
购物车飞入动画基于jquery的 fly.js插件,只需设置起点和终点的坐标即可，抛物线由fly.js来完成
资源下载地址： https://github.com/amibug/fly
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>飞入动画</title>
<style>
.test{background: red;width: 50px;height:50px;}
.box {
width: 100%;
height: 1000px;
background: #eee;
}
</style>
</head>
<body>
<div class="box">飞入插件</div>
<script src="jquery.js"></script>
<script src="fly.min.js"></script>
<script>
// 飞到的终点的坐标
var globalLeft = $('.box').offset().left;
var globalTop = $('.box').offset().top - $(document).scrollTop() + 1000;
//绑定点击事件
$('.box').on('click', fly);
<!-- 飞入执行 -->
function fly(event){
console.log(10);
var flyer = $('<div class="test"></div>');
flyer.fly({
start: {
left: event.pageX,
top: event.pageY-$(document).scrollTop()
},
end: {
top: globalTop,
left: globalLeft,
width: 0,
height: 0,
},
onEnd: function(){
this.destroy();
}
})
}
</script>
</body>
</html>Tip: 在有滚动条的页面，对于运动对象的起始位置，结束位置的高度需要去掉滚动条的高度
扫一扫
2386
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
