parabola.js抛物线与加入购物车效果的示例代码
时间:2019-04-07
本文章向大家介绍parabola.js抛物线与加入购物车效果的示例代码,主要包括parabola.js抛物线与加入购物车效果的示例代码使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在做购物车的时候发现一个很好用抛物线特效parabola.js,可先点击DEMO体验下。下面贴出一些关键代码,具体代码可在GitHub上查看
parabola.js
var funParabola = function (element, target, options) { /* * 网页模拟现实需要一个比例尺 * 如果按照1像素就是1米来算,显然不合适,因为页面动不动就几百像素 * 页面上,我们放两个物体,200~800像素之间,我们可以映射为现实世界的2米到8米,也就是100:1 * 不过,本方法没有对此有所体现,因此不必在意 */ var defaults = { speed: 166.67, // 每帧移动的像素大小,每帧(对于大部分显示屏)大约16~17毫秒 curvature: 0.001, // 实际指焦点到准线的距离,你可以抽象成曲率,这里模拟扔物体的抛物线,因此是开口向下的 progress: function () { }, complete: function () { } }; var params = {}; options = options || {}; for (var key in defaults) { params[key] = options[key] || defaults[key]; } var exports = { mark: function () { return this; }, position: function () { return this; }, move: function () { return this; }, init: function () { return this; } }; /* 确定移动的方式 * IE6-IE8 是margin位移 * IE9+使用transform */ var moveStyle = "margin", testDiv = document.createElement("div"); if ("oninput" in testDiv) { ["", "ms", "webkit"].forEach(function (prefix) { var transform = prefix + (prefix ? "T" : "t") + "ransform"; if (transform in testDiv.style) { moveStyle = transform; } }); } // 根据两点坐标以及曲率确定运动曲线函数(也就是确定a, b的值) /* 公式: y = a*x*x + b*x + c; */ var a = params.curvature, b = 0, c = 0; // 是否执行运动的标志量 var flagMove = true; if (element && target && element.nodeType == 1 && target.nodeType == 1) { var rectElement = {}, rectTarget = {}; // 移动元素的中心点位置,目标元素的中心点位置 var centerElement = {}, centerTarget = {}; // 目标元素的坐标位置 var coordElement = {}, coordTarget = {}; // 标注当前元素的坐标 exports.mark = function () { if (flagMove == false) return this; if (typeof coordElement.x == "undefined") this.position(); element.setAttribute("data-center", [coordElement.x, coordElement.y].join()); target.setAttribute("data-center", [coordTarget.x, coordTarget.y].join()); return this; } exports.position = function () { if (flagMove == false) return this; var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft, scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 初始位置 if (moveStyle == "margin") { element.style.marginLeft = element.style.marginTop = "0px"; } else { element.style[moveStyle] = "translate(0, 0)"; } // 四边缘的坐标 rectElement = element.getBoundingClientRect(); rectTarget = target.getBoundingClientRect(); // 移动元素的中心点坐标 centerElement = { x: rectElement.left + (rectElement.right - rectElement.left) / 2 + scrollLeft, y: rectElement.top + (rectElement.bottom - rectElement.top) / 2 + scrollTop }; // 目标元素的中心点位置 centerTarget = { x: rectTarget.left + (rectTarget.right - rectTarget.left) / 2 + scrollLeft, y: rectTarget.top + (rectTarget.bottom - rectTarget.top) / 2 + scrollTop }; // 转换成相对坐标位置 coordElement = { x: 0, y: 0 }; coordTarget = { x: -1 * (centerElement.x - centerTarget.x), y: -1 * (centerElement.y - centerTarget.y) }; /* * 因为经过(0, 0), 因此c = 0 * 于是: * y = a * x*x + b*x; * y1 = a * x1*x1 + b*x1; * y2 = a * x2*x2 + b*x2; * 利用第二个坐标: * b = (y2+ a*x2*x2) / x2 */ // 于是 b = (coordTarget.y - a * coordTarget.x * coordTarget.x) / coordTarget.x; return this; }; // 按照这个曲线运动 exports.move = function () { // 如果曲线运动还没有结束,不再执行新的运动 if (flagMove == false) return this; var startx = 0, rate = coordTarget.x > 0 ? 1 : -1; var step = function () { // 切线 y'=2ax+b var tangent = 2 * a * startx + b; // = y / x // y*y + x*x = speed // (tangent * x)^2 + x*x = speed // x = Math.sqr(speed / (tangent * tangent + 1)); startx = startx + rate * Math.sqrt(params.speed / (tangent * tangent + 1)); // 防止过界 if ((rate == 1 && startx > coordTarget.x) || (rate == -1 && startx < coordTarget.x)) { startx = coordTarget.x; } var x = startx, y = a * x * x + b * x; // 标记当前位置,这里有测试使用的嫌疑,实际使用可以将这一行注释 element.setAttribute("data-center", [Math.round(x), Math.round(y)].join()); // x, y目前是坐标,需要转换成定位的像素值 if (moveStyle == "margin") { element.style.marginLeft = x + "px"; element.style.marginTop = y + "px"; } else { element.style[moveStyle] = "translate(" + [x + "px", y + "px"].join() + ")"; } if (startx !== coordTarget.x) { params.progress(x, y); window.requestAnimationFrame(step); } else { // 运动结束,回调执行 params.complete(); flagMove = true; } }; window.requestAnimationFrame(step); flagMove = false; return this; }; // 初始化方法 exports.init = function () { this.position().mark().move(); }; } return exports; };
实现
// body <div class="container"> ![](dist/01.png) <center>点击加入购物车查看效果</center> <!--动画图片--> <div class="img-element" id="imgElement"> ![](dist/02.jpg) </div> <!--购物车--> <div class="shop-cart" id="shopCart"></div> <span class="shop-cart-num">0</span> <div class="add-shop-cart"><!--加入购物车--></div> </div>
// script // 起始位置元素 var imgElement = document.querySelector('#imgElement'), // 终点位置元素 shopCartElement = document.querySelector('#shopCart'), // 购物车数量 proNum = 0; // 初始化抛物线动画 var myParabola = funParabola(imgElement, shopCartElement, { speed: 100,// 每帧移动的像素大小 curvature: 0.005,// 实际指焦点到准线的距离 complete: function () { imgElement.style.visibility = "hidden"; $('.shop-cart-num').text(++proNum); } }); // 绑定加入购物车事件 $('.add-shop-cart').click(function () { // 重置位置 $('#imgElement').css({ left: '70px', bottom: '25px', visibility: 'visible' }); myParabola.position().move(); });
效果图
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 虚拟化平台cloudstack(3)——安装(下)
- 机器学习算法实现解析——libFM之libFM的训练过程概述
- 虚拟化平台cloudstack(4)——几个异常
- Golang语言 xml解析实例
- 机器学习算法实现解析——libFM之libFM的模型处理部分
- Go语言使用protobuf数据通信--师出同门,懂的人理解吧
- 虚拟化平台cloudstack(6)——使用maven:jetty调试
- 虚拟化平台cloudstack(7)——新版本的调试
- 一行代码,Pandas秒变分布式,快速处理TB级数据
- 机器学习算法实现解析——word2vec源码解析
- 从零开始创建一个基于Go语言的web service
- 转--Golang项目邮件发送模块代码分享
- 虚拟化平台cloudstack(8)——从UI开始
- 使用oracle的大数据工具ODCH访问HDFS数据文件
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【Rust日报】2020-08-31 easy_rust 正式完成了
- Python测试开发django4.templates模板配置
- Python测试开发django5.templates模板变量传参
- 在 CLion 中创建基于 CubeMX 的 STM32 工程
- 【Rust日报】 2020-09-03 Google - XLS 加速硬件合成
- 算法篇:栈之常见题型
- 算法篇:栈之字符串相关题目
- redis的安装与启动以及注意事项
- 算法篇:利用map求数组交集
- 分布式锁:一、基础知识
- 钓鱼城杯2020 部分WriteUp
- setbit的实际应用
- 猿实战09——实现你设计的类目系统
- redis的事物
- redis的持久化