PC,移动端H5实现实现小球加入购物车效果
HTML部分：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>基于jquery.fly模仿天猫抛物线加入购物车特效代码</title>
<style> * {
margin: 0;
padding: 0;
list-style: none;
} .m-tip {
border: 4px solid #ccc;
color: #999;
width: 1000px;
height: 300px;
margin: 200px auto;
text-align: center;
line-height: 30px;
padding-top: 100px;
cursor: pointer;
} .m-sidebar {
position: fixed;
top: 0;
right: 0;
background: #000;
z-index: 2000;
width: 35px;
height: 100%;
font-size: 12px;
color: #fff;
} .m-sidebar .cart {
color: #fff;
text-align: center;
line-height: 20px;
padding: 200px 0 0 0px;
top: 100px;
} .m-sidebar .cart span {
display: block;
width: 20px;
margin: 0 auto;
} .m-sidebar .cart i {
width: 35px;
height: 35px;
display: block;
} .u-flyer {
display: block;
width: 50px;
height: 50px;
border-radius: 50px;
position: fixed;
z-index: 9999;
} .circle {
width: 10px;
height: 10px;
background-color: #3c6efd;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
</style>
</head>
<body> <!--代码部分begin-->
<div class="m-tip">
提示：<br/>
点击方框，实现小球加入购物车效果
</div>
<div class="m-sidebar">
<div class="cart">
<i id="end"></i>
<span>购物车</span>
</div>
</div>
<script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery.fly.min.js"></script>
<script>
$('.m-tip').on('click', addCart);
function addCart(event) {
var offset = jQuery('#end').offset(), flyer = jQuery('<div class="circle"></div>');
flyer.fly({
start: {
left: event.pageX,
top: event.pageY
},
end: {
left: offset.left,
top: offset.top,
width: 20,
height: 20
}
});
}
</script>
<!--代码部分end--> </body>
</html>
JS：
/*! fly - v1.0.0 - 2014-12-22
* https://github.com/amibug/fly
* Copyright (c) 2014 wuyuedong; Licensed MIT */
(function ($) {
$.fly = function (element, options) {
// 默认值
var defaults = {
version: '1.0.0',
autoPlay: true,
vertex_Rtop: 20, // 默认顶点高度top值
speed: 1.2,
start: {}, // top, left, width, height
end: {},
onEnd: $.noop
}; var self = this,
$element = $(element); /**
* 初始化组件，new的时候即调用
*/
self.init = function (options) {
this.setOptions(options);
!!this.settings.autoPlay && this.play();
}; /**
* 设置组件参数
*/
self.setOptions = function (options) {
this.settings = $.extend(true, {}, defaults, options);
var settings = this.settings,
start = settings.start,
end = settings.end; $element.css({marginTop: '0px', marginLeft: '0px', position: 'fixed'}).appendTo('body');
// 运动过程中有改变大小
if (end.width != null && end.height != null) {
$.extend(true, start, {
width: $element.width(),
height: $element.height()
});
}
// 运动轨迹最高点top值
var vertex_top = Math.min(start.top, end.top) - Math.abs(start.left - end.left) / 3;
if (vertex_top < settings.vertex_Rtop) {
// 可能出现起点或者终点就是运动曲线顶点的情况
vertex_top = Math.min(settings.vertex_Rtop, Math.min(start.top, end.top));
} /**
* 运动轨迹在页面中的top值可以抽象成函数 y = a * x*x + b;
* a = curvature
* b = vertex_top
*/ var distance = Math.sqrt(Math.pow(start.top - end.top, 2) + Math.pow(start.left - end.left, 2)),
// 元素移动次数
steps = Math.ceil(Math.min(Math.max(Math.log(distance) / 0.05 - 75, 30), 100) / settings.speed),
ratio = start.top == vertex_top ? 0 : -Math.sqrt((end.top - vertex_top) / (start.top - vertex_top)),
vertex_left = (ratio * start.left - end.left) / (ratio - 1),
// 特殊情况，出现顶点left==终点left，将曲率设置为0，做直线运动。
curvature = end.left == vertex_left ? 0 : (end.top - vertex_top) / Math.pow(end.left - vertex_left, 2); $.extend(true, settings, {
count: -1, // 每次重置为-1
steps: steps,
vertex_left: vertex_left,
vertex_top: vertex_top,
curvature: curvature
});
}; /**
* 开始运动，可自己调用
*/
self.play = function () {
this.move();
}; /**
* 按step运动
*/
self.move = function () {
var settings = this.settings,
start = settings.start,
count = settings.count,
steps = settings.steps,
end = settings.end;
// 计算left top值
var left = start.left + (end.left - start.left) * count / steps,
top = settings.curvature == 0 ? start.top + (end.top - start.top) * count / steps : settings.curvature * Math.pow(left - settings.vertex_left, 2) + settings.vertex_top;
// 运动过程中有改变大小
if (end.width != null && end.height != null) {
var i = steps / 2,
width = end.width - (end.width - start.width) * Math.cos(count < i ? 0 : (count - i) / (steps - i) * Math.PI / 2),
height = end.height - (end.height - start.height) * Math.cos(count < i ? 0 : (count - i) / (steps - i) * Math.PI / 2);
$element.css({width: width + "px", height: height + "px", "font-size": Math.min(width, height) + "px"});
}
$element.css({
left: left + "px",
top: top + "px"
});
settings.count++;
// 定时任务
var time = window.requestAnimationFrame($.proxy(this.move, this));
if (count == steps) {
window.cancelAnimationFrame(time);
// fire callback
settings.onEnd.apply(this);
}
}; /**
* 销毁
*/
self.destory = function(){
$element.remove();
}; self.init(options);
}; // add the plugin to the jQuery.fn object
$.fn.fly = function (options) {
return this.each(function () {
if (undefined == $(this).data('fly')) {
$(this).data('fly', new $.fly(this, options));
}
});
};
})(jQuery);
提示：JQ需要用1.9版本以上
PC,移动端H5实现实现小球加入购物车效果的更多相关文章
- pc、移动端H5网站 QQ在线客服、群链接代码【我和qq客服的那些事儿】
转载:http://blog.csdn.net/fungleo/article/details/51835368#comments 移动端H5 QQ在线客服链接代码 <a href=" ...
- 移动站适配rel=alternate PC页和H5页适配标注
鉴于移动化大潮的汹涌和H5页的炫丽普及,百度针对PC页与H5页的跳转适配方式推出了最优方案:1.在pc版网页上,添加指向对应移动版网址的特殊链接rel="alternate"标记, ...
- 教你如何用 lib-flexible 实现移动端H5页面适配
前话 好久没写教程了(可能会误导新手的菜鸟教程(￣▽￣)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...
- 移动端H5混合开发设置复盘与总结
此篇接上一篇: 移动端H5混合开发,Touch触控,拖拽,长按, 滑屏 实现方案 https://www.cnblogs.com/buoge/p/9346699.html app 场布设置已经上线了, ...
- 移动端H5页面上传图片或多张图片
传统PC网页上传文件,大家都已经熟悉,这里不做介绍. 本文简单介绍移动端常用上传图片功能.灵活使用轮询或长连接可实现PC与移动端数据同步,即PC端需要上传的图片是移动拍照下来或移动端硬盘储存的,不需要 ...
- 移动端H5的一些基本知识点总结
移动端H5的一些基本知识点总结 来到这家公司之后,和曾经的工作发生了非常大的转变.曾经我一直是做PC端页面的.来到如今这家公司之后,主要是做手机移动端的页面. 移动端的页面在我这个做习惯了PC端页面的 ...
- 移动端H5适配方法（盒子+图片+文字）
一.怎么让H5页面适应手机 a.利用meta标签 <meta name="viewport" content="width=device-width,initial ...
- 一个数字键盘引发的血案——移动端H5输入框、光标、数字键盘全假套件实现
https://juejin.im/post/5a44c5eef265da432d2868f6 为啥要写假键盘? 还是输入框.光标全假的假键盘? 手机自带的不用非得写个假的,吃饱没事干吧? 装逼?炫技 ...
- PC站与H5移动站最佳适配方案
HTML5是目前HTML的最屌版本,同时也是建设移动站的最佳技术.百度适时推出PC站与H5移动站的最佳适配方案,对站长而言实在是久旱逢甘霖.详情如下: PC站与H5移动站最佳适配方案 pc端: 在pc ...
随机推荐
- Python数据类型-str,list常见操作
一.字符串操作 语法:字符串名.startwith('字符串') 功能:判断字符串里是否以xxx开头 范例: 扩展:从控制台接收输入居住地址,如果地址以北京市开头,则输出北京人口,否则输入非北京人口. ...
- sed 指定行范围匹配
sed -n '5,10{/pattern/p}' file sed是一个非交互性性文本编辑器,它编辑文件或标准输入 导出的文件拷贝.标准输入可能是来自键盘.文件重定向.字符串或变量,或者是一个管道文 ...
- pandas之cut
cut( )用来把一组数据分割成离散的区间. cut(x, bins, right=True, labels=None, retbins=False, precision=3, include_low ...
- Microsoft Cloud App Security 微软的云应用安全
1.概述 微软2015年收购的一家云安全创业公司 Adallom 正式推出产品,同时更名为微软 Cloud App Security.Adallom 成立于 2012年,是一家 SaaS 云安全公司, ...
- Numpy数组排序
import numpy as np x = np.array([1,4,5,2]) # array([1, 4, 5, 2]) # 返回排序后元素的原下标 np.argsort(x) # array ...
- PHP acosh() 函数
实例 返回不同数的反双曲余弦: <?phpecho(acosh(7) . "<br>");echo(acosh(56) . "<br>&qu ...
- Skill 返回list中的倒数第二个数据
https://www.cnblogs.com/yeungchie/ code procedure(ycLast2(list) prog((index ouput) unless(type(list) ...
- Java高级篇XML和正则表达式
常见的XML解析技术: 1.DOM(基于XML树结构,比较耗资源,适用于多次访问XML): 2.SAX(基于事件,消耗资源小,适用于数量较大的XML): 3.JDOM(比DOM更快,JDOM仅使用具体 ...
- 在Linux系统中安装Tomcat详细教程
首先在官网下载jdk和Tomcat的压缩包 这里下载jdk-8u241-linux-x64 .tar.gz 和apache-tomcat-8.5.50.tar.gz 然后解压jdk压缩包 tar –z ...
- 论文结果图：matplotlib和seaborn实现
在论文中,可视化结果往往很重要,毕竟文字太抽象,需要图片向审稿人直观的展现出我们的结果.我也写了俩篇论文和一篇专利的申请,其中也有一些画图的程序,因此记录,防止以后忘了.由于篇幅原因,文章就不贴代码, ...