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 ...
随机推荐
- 看了这篇你就会手写RPC框架了
一.学习本文你能学到什么? RPC的概念及运作流程 RPC协议及RPC框架的概念 Netty的基本使用 Java序列化及反序列化技术 Zookeeper的基本使用(注册中心) 自定义注解实现特殊业务逻 ...
- java基础(二)--main方法讲解
main()函数是如下的固定格式,除了args可以修改名字,其余均不可以修改 public class TestBase02MainMath { public static void main(Str ...
- flask中url_for使用endpoint和视图函数名
在flask中,使用url_for 进行路由反转时,需要传递一个endpoint的值,用法如下: @app.route('/', endpoint='my_index') def index(): r ...
- Web压测工具之Webbench和http_load
Webbench简介 是知名的网站压力测试工具,能测试处在相同硬件上,不同服务的性能以及不同硬件上同一个服务的运行状况. webbench的标准测试可以向我们展示服务器的两项内容:每秒钟相应请求数和每 ...
- centOS7.*安装nginx和简单使用
安装nginx 去官网下载对应的nginx包,推荐使用稳定版本. 上传下载好的包到服务器 安装依赖环境 安装gcc环境. yum install gcc-c++ 安装PCRE库,用于解析正则表达式. ...
- luogu P2462 [SDOI2007]游戏
LINK:SDOI2007游戏 题意:接龙前一个要比后面大1 且后一个单词出现的各自字母的次数>=前一个单词各自的字母的次数 考虑暴力dp sort之后dpY 显然会T. 考虑我们没必要枚举j ...
- day5.流程控制及while单项循环
一.判断类型 isinstance 1.语法 """ 语法: # 用法一 isinstance(要判断的值,要判断的类型) 返回True 或者 False # 用法二 i ...
- 实验06——java自动封箱、自动拆箱
package cn.tedu.demo; /** * @author 赵瑞鑫 E-mail:1922250303@qq.com * @version 1.0 * @创建时间:2020年7月17日 上 ...
- 使用selenium再次爬取疫情数据(链接数据库)
爬取网页地址: 丁香医生 数据库连接代码: def db_connect(): try: db=pymysql.connect('localhost','root','zzm666','payiqin ...
- Docker 启动 Nginx
Docker 启动 Nginx 拉取镜像 docker pull nginx:1.17.9 启动步骤 # 创建 nginx 目录 mkdir -p /usr/local/nginx && ...