jQuery.fly插件实现添加购物车抛物线效果

样例

使用电商 APP 购买商品时，很多都有上图的红色小球抛物线效果，下面通过 jQuery.fly 插件来实现一个简单 Demo。

实现

简单思路：

确定抛物线的起始和终止位置；
通过 js 在起始位置创建一个 document 对象，作为红色小球；
通过 jQuery.fly 插件提供的fly函数来移动小球，移动至终止位置；
当小球到达终止位置后，通过fly插件提供的 onEnd 回调函数，将小球销毁；

Demo 源码：

<!DOCTYPE html>
<html lang="zh" style="font-size: 46.875px;">
<head><meta charset="UTF-8"><title>fly Demo</title><style>td {height: 300px;}table {width:100%;}img {width: 30%;}</style><script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script><script type="text/javascript" src="../js/fly.min.js"></script><script type="text/javascript">function fly() {var x = $("#fashe").offset().left;var y = $("#fashe").offset().top;pwxTex(x, y);}// 抛物线特效function pwxTex(x, y) {var speedI = $("#speedI").val();var leftI = $("#b_leftI").val();var topI = $("#b_topI").val();// 获得目标的偏移量var offset = $('#jieshou').offset();var div = document.createElement('div');div.className = 'pao';div.style.cssText = 'transform: translate3d(0, 0, 0);' +'width: 0.75rem;' +'height: 0.75rem;' +'border-radius: 50%;' +'background: red;' +'position: fixed;' +'z-index: 99999999;' +'top:'+x+'px;left:'+y+'px';// 将生成的 div 写入 body 标签下
            $('body').append(div);// 获得生成的抛物线效果对象var flyer = $('.pao');var e_leftI = $('#e_leftI').val();var e_topI = $('#e_topI').val();flyer.fly({start: {left: x - leftI,top: y - topI},end: {
//                  left: (offset.left + $('#jieshou').width() / 2), //结束位置
//                  top: (offset.top + $('#jieshou').height() / 1)
                    left : e_leftI,top : e_topI},speed: speedI, // 越大越快，默认1.2
                onEnd: function () { // 结束回调
                    $('#jieshou').css({'transform': 'scale(1)'}, 100);this.destory(); // 销毁这个对象
                }});}</script>
</head>
<body><div><table><tr><td>zhengbin.cnblogs.com</td><td><img id="fashe" src="../img/tank.jpg"></td></tr><tr><td><img id="jieshou" src="../img/lajitong.jpg"></td><td>speed：<input id="speedI" type="text" value="2"><br>b_left：<input id="b_leftI" type="text" value="1"><br>b_top：<input id="b_topI" type="text" value="-10"><br>e_left：<input id="e_leftI" type="text" value="100"><br>e_top：<input id="e_topI" type="text" value="500"><br><button onclick="fly()">飞吧~~</button></td></tr></table></div>
</body>
</html>

Demo 实现效果

转载于:https://www.cnblogs.com/zhengbin/p/6804508.html

jQuery.fly插件实现添加购物车抛物线效果相关推荐

基于jquery fly插件实现加入购物车抛物线动画效果
在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...
使用jquery.fly插件实现添加购物车抛物动画
使用jquery.fly插件实现添加购物车抛物动画这里引用一个插件:jquery.fly.min.js Git源码地址:https://github.com/amibug/fly Demo演示地址: ...
jquery.fly.js实现添加购物车效果、实现抛物线运动
一.JQuery.fly.js整理 1.Git源代码地址: https://github.com/amibug/fly 2.Demo演示地址:http://codepen.io/hzxs1990225 ...
使用jQuery Treeview插件实现树状结构效果
首先到一个国外网站上下载Treeview插件: http://bassistance.de/jquery-plugins/jquery-plugin-treeview/ 当然你也可以通过我博客的源文件 ...
实现加入购物车抛物线效果
写在前面最近天气刚刚转热,心想应该淘点春装卖卖骚了,然后某宝逛的时候发现其加入购物车的动画效果不错,既完善了交互,又有功能导向作用,用户体验杠杠滴-作为一名前端汪,也想自己动手实现下此类酷炫的效果. ...
基于jQuery倒计时插件实现团购秒杀效果
倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间.倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等.今天,我们来使用jQuery倒计时超级实现团购秒杀效果,感兴趣的 ...
jquery.slimScroll插件 div添加滚动条
项目中左侧菜单栏中子菜单展开时长度过长,导致页面撑开.使用该插件为菜单栏的div加上滚动条 github地址:https://github.com/kujian/jQuery-slimScroll?u ...
uni-app 小程序实现添加购物车抛物线掉入效果
总体思路其实跟H5的无差: 获取当前抛物线起始位置的坐标获取购物车图标的坐标通过创建一个图标从起始坐标点到终止坐标点的动画效果(延时一秒),这样就造成一个抛物线的假象了. 上代码: 其中 a ...
jquery.fly.min.js 拋物插件
插件官方: https://github.com/amibug/fly , 官方例子: http://codepen.io/hzxs1990225/full/ogLaVp 首先加载jQuery.j ...

jQuery.fly插件实现添加购物车抛物线效果

样例

实现

简单思路：

Demo 源码：

Demo 实现效果

jQuery.fly插件实现添加购物车抛物线效果相关推荐

最新文章

热门文章