jquery.fly.js实现添加购物车效果、实现抛物线运动

一、JQuery.fly.js整理

1.Git源代码地址：

https://github.com/amibug/fly

2.Demo演示地址：http://codepen.io/hzxs1990225/full/ogLaVp

3.Api使用：

<script src="jquery.js"></script>
<script src="dist/jquery.fly.min.js"></script>
<script>
jQuery(function($) {$('#fly').fly({start:{left: 11,  //开始位置（必填）#fly元素会被设置成position: fixedtop: 600,  //开始位置（必填）},end:{left: 500, //结束位置（必填）top: 130,  //结束位置（必填）width: 100, //结束时高度height: 100, //结束时高度},autoPlay: false, //是否直接运动,默认truespeed: 1.1, //越大越快，默认1.2vertex_Rtop：100, //运动轨迹最高点top值，默认20onEnd: function(){} //结束回调});$('#fly').play(); //autoPlay: false后，手动调用运动$('#fly').destroy(); //移除dom
});
</script>

二、使用实例

1.HTMl页面

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="../js/jquery-1.11.1.min.js"></script><script src="../js/jquery.fly.min.js"></script><style>.circle {width: 50px;height: 50px;position: absolute;background: red;border-radius: 50%;top: 25%;}.end {width: 50px;height: 50px;position: absolute;background: blue;border-radius: 50%;top: 25%;left: 50%;}</style>
</head><body><div class="circle"></div><div class="circle" style="left:10%;"></div><div class="end"></div>
</body></html>

2.Js代码

var offset = $('.end').offset();
$('.circle').click(function (event) {var thisItem = $(this);var flyer = thisItem.clone();flyer.fly({start: {left: event.pageX,top: event.pageY},end: {left: offset.left + 10,top: offset.top + 10,width: 0,height: 0},onEnd: function () {$('.end').css({background: 'red'});setTimeout(function () {$('.end').css({background: 'blue'});}, 200);this.destory();}});
});

显示结果：

三、特别说明，运动的图片或效果都是针推当前浏览器可视窗口，

所以在有滚动条的页面，对于运动对象的起始位置、结束位置的高度需要去掉滚动条的高度。

jquery中也就是：

 $(document).scrollTop()

function flay(thisPanel, targetPanel, callBack) {var thisImg = thisPanel.find('img');var targetImg = targetPanel.find('img');var coin = $('<img  />');coin.addClass('coin');coin.attr('src', '/assets/apps/img/coin_48.png');var scrollTop = $(document).scrollTop();coin.fly({start: {left: thisImg.offset().left+thisImg.width()/2,top: thisImg.offset().top-scrollTop,},end: {left: targetImg.offset().left + targetImg.width() / 2,top: targetImg.offset().top - scrollTop,width: 0,height: 0},onEnd: function () {if (callBack) callBack();}});
}

RequireJS实例

Bootstrap3 datetimepicker控件的使用

jquery.qrcode.js生成二维码插件&转成图片格式

jquery.fly.js实现添加购物车效果、实现抛物线运动相关推荐

使用jquery.fly插件实现添加购物车抛物动画
使用jquery.fly插件实现添加购物车抛物动画这里引用一个插件:jquery.fly.min.js Git源码地址:https://github.com/amibug/fly Demo演示地址: ...
jQuery.fly插件实现添加购物车抛物线效果
样例使用电商 APP 购买商品时,很多都有上图的红色小球抛物线效果,下面通过 jQuery.fly 插件来实现一个简单 Demo. 实现简单思路: 确定抛物线的起始和终止位置: 通过 js 在起始 ...
基于jquery fly插件实现加入购物车抛物线动画效果
在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...
js代码实现购物车效果
页面分上下两部分,上部分是所有的数据,下部分是购物车.通过在上面选择需要处理的数据添加进到购物车,实现对购物车数据的统一处理. 需要注意的有两点:①购物车数据可删除,且不能重复添加 ②响应时间考虑,购 ...
html轮播鼠标悬停效果,jQuery图片轮播加悬停效果
插件描述:jQuery图片轮播加悬停效果 =======以下内容由会员只看不发了提供============ 使用方法 1.将文档内内部样式表保存到目录css下的style.css文件中,并在页面 ...
JQuery和JS怎样实现淘宝购物车的添加和删除？
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
jquery.fly.min.js 拋物插件
插件官方: https://github.com/amibug/fly , 官方例子: http://codepen.io/hzxs1990225/full/ogLaVp 首先加载jQuery.j ...
用jQuery作为JS对象从选项中添加选项的最佳方法是什么？
使用jQuery从JavaScript对象向<select>添加选项的最佳方法是什么? 我正在寻找不需要插件的东西,但是我也对那里的插件感兴趣. 这是我所做的: selectValues ...
jQuery实现PC端商城购物车模块基本功能（每个商品的小计和合计都会根据添加和删除的操作来动态计算）
jQuery实现PC端商城购物车模块基本功能先上效果图: 因为主要是想练习jQuery的使用,所以页面CSS部分比较简陋,有需要的话,大家在参考代码时,可以自己再完善下CSS部分的代码,让购物车页面 ...

jquery.fly.js实现添加购物车效果、实现抛物线运动

jquery.fly.js实现添加购物车效果、实现抛物线运动相关推荐

最新文章

热门文章