jq加入购物车抛物线动画jquery.fly

秃头黑魔仙

于 2022-12-05 17:46:55 发布

阅读量537

点赞数 1

分类专栏： jq 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/stars______/article/details/128190567

版权

jq 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

首先引入jq的插件jquery.fly.min.js

下载地址https://github.com/amibug/fly

<script lang="javascript" type="text/javascript" src="/static/wap2/js/jquery.fly.min.js"></script>

#add_beixuan是点击的那个元素也是从这里开始滑动的元素

#icon-cart是滑动终点，滑动到这个元素

$("#add_beixuan").click(function (event){
    var offset = $("#icon-cart").offset();
    var flyer = $('<div id="hhh" style="background:#ff8000;width:45px;height:45px;border-    radius:45px;z-index:9999;"></div>'); //抛物体对象,也可以用图片  
	    flyer.fly({   
		    start: {
			    left: event.pageX,//抛物体起点横坐标   
			    top: event.pageY//抛物体起点纵坐标   
		    },   
		    end: {   
			    left: offset.left+10,//抛物体终点横坐标   
			    top: offset.top-30 , //抛物体终点纵坐标   
		    },   
		    speed: 0.3, //动画速度越小越慢
		    onEnd: function() {
			    $('#hhh').remove()
			    $('.jiaru').show()
			    $("#tip").show().animate({width: '200px'},500).fadeOut(500);成功加入购物车动画效果   
			    // this.destory(); //销毁抛物体   
		    }   
	    });   
})