js实现抛物线运动 兼容IE低版本（转）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="javascript, 动画, 抛物线" />
<title>抛物线运动</title>
<style>
body { margin: 0; font-size: 14px; font-family: 'microsoft yahei'; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-user-select: none; -moz-user-select: none; user-select: none; } p { margin: 1em; }
.target, .element { position: absolute; border: 1px solid #34538b; border-radius: 20px; }
.target { width: 100px; height: 40px; background-color: #f0f3f9; left: 480px; top: 300px; cursor: move; }
.target:active { box-shadow: inset 1px 1px 2px rgba(0,0,0,.35); }
.element { width: 30px; height: 30px; background-color: #34538b; left: 960px; top: 500px; font-size: 12px; pointer-events: none; }
.element:before { content: attr(data-center); color: #666; position: absolute; left: 100%; top: -10px; }
.target:before { content: attr(data-center); width: 100%; line-height: 40px; color: #666; position: absolute; text-align: center; }
.x { position: absolute; left: 0; top: 516px; right: 0; border-top: 1px solid #000; }
.x:before, .y:before { font-size: 40px; font-style: italic; font-family: Arial, Helvetica, sans-serif; position: absolute; }
.x:before { content: 'x'; top: 0; right: 5px; }
.y { position: absolute; left: 976px; top: 0; bottom: 0; border-left: 1px solid #000; }
.y:before { content: 'y'; left: 5px; top: 0; } .article { display: inline-block; margin-left: 1em; color: #34538b; }
.target1,.element1{position:absolute;border:5px solid #ccc;width:20px;height:20px;border-radius:50%;}
.target1{top:30px;left:80px;}
.element1{
top:200px;
left:380px;
}
</style>
</head> <body>
<p>点击屏幕任意区域开始运动，拖动椭圆目标至任意位置也能运动</p>
<div id="target" class="target"></div>
<div id="element" class="element"></div>
<div class="target1"></div>
<div class="element1"></div>
<i class="x" title="x轴"></i>
<i class="y" title="y轴"></i>
<script src="requestAnimationFrame.js"></script>
<script> /* 元素 */
var element = document.getElementsByClassName("element")[0], target = document.getElementsByClassName("target")[0];
var element1 = document.getElementsByClassName("element1")[0], target1 = document.getElementsByClassName("target1")[0]; // 抛物线元素的的位置标记
var parabola = funParabola(element, target).mark();
var parabola1 = funParabola(target1,element1 ).mark();
// 拖拽
funDrag(target);
funDrag(target1);
// 抛物线运动的触发
window.setInterval(function(){
element.style.marginLeft = "0px";
element.style.marginTop = "0px";
parabola.init();
parabola1.init();
},1000)
</script>
</body>
</html>
html
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;
};
// 这是很简单的拖拽方法，与本demo主旨无关，方便演示使用
var funDrag = function(element, callback) {
callback = callback || function() {};
var params = {
left: 0,
top: 0,
currentX: 0,
currentY: 0,
flag: false
};
//获取相关CSS属性
var getCss = function(o,key){
return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];
};
//拖拽的实现
if(getCss(element, "left") !== "auto"){
params.left = getCss(element, "left");
}
if(getCss(element, "top") !== "auto"){
params.top = getCss(element, "top");
}
//o是移动对象
element.onmousedown = function(event){
params.flag = true;
event = event || window.event;
params.currentX = event.clientX;
params.currentY = event.clientY;
};
document.onmouseup = function(){
params.flag = false;
if(getCss(element, "left") !== "auto"){
params.left = getCss(element, "left");
}
if(getCss(element, "top") !== "auto"){
params.top = getCss(element, "top");
}
callback();
};
document.onmousemove = function(event){
event = event || window.event;
if(params.flag){
var nowX = event.clientX, nowY = event.clientY;
var disX = nowX - params.currentX, disY = nowY - params.currentY;
element.style.left = parseInt(params.left) + disX + "px";
element.style.top = parseInt(params.top) + disY + "px";
}
}
};
(function() {
var lastTime = 0;
var vendors = ['webkit', 'moz'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || // name has changed in Webkit
window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
var id = window.setTimeout(function() {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}
}());
注：
1）如需兼容低版本浏览器，就不能用jq获取元素。
2）可以给元素设置ID，通过ID获取元素。
3）也可以通过getElementsByClassName获取元素，但是该方法在IE低版本中不兼容，需要处理含IE8以下的兼容问题。
本文转载于张鑫旭的博客，首页地址：http://www.zhangxinxu.com/
js实现抛物线运动 兼容IE低版本（转）的更多相关文章
- AngularJS开发指南7：AngularJS本地化，国际化，以及兼容IE低版本浏览器
AngularJS本地化,国际化 国际化,简写为i18n,指的是使产品快速适应不同语言和文化. 本地化,简称l10n,是指使产品在特定文化和语言市场中可用. 对开发者来说,国际化一个应用意味着将所有的 ...
- WebSocket兼容到低版本浏览器
就目前而言,WebSocket是最好的Web通信解决方案了.但是IE从10才开始兼容它,对于目前大量IE8存在的市场,原生的WebSocket显然不太实用,我们需要低版本兼容的解决方案.于是我模拟We ...
- position:fixed 兼容浏览器低版本
项目中遇到的坑,写篇博客做个笔记纪念下,position: fixed一般来说都兼容各个浏览器,但是要兼容浏览低版本问题,就得用-webkit-transform: translateZ(0);这段代 ...
- 使用socket.io client 开发时兼容IE低版本的办法
使用socket.io client 开发时兼容IE低版本的办法 socket.io提供了针对各个版本浏览器的‘socket’功能的封转:websocket,长连接,流,flash什么的.给你格式化下 ...
- 轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现，兼容ie低版本浏览器
项目源代码下载地址:轮播图 以下为项目实现效果:(由于gif太大,所以只上传一张图片,但效果完全能实现,经测试,在ie各版本浏览器及chrome,firefox等浏览器中均能实现效果,可以实现点击切换 ...
- 本地存储组件--兼容IE低版本
在前端开发过程中,会用到本地缓存,但是由于浏览器对不同规范支持的程度不一样,每次进行使用都要为兼容行花费不少时间.我整理了一个本地存储的组件. 组件特点: 可以配置使用localSto ...
- 如何解决vux不兼容安卓低版本问题
最近做移动端H5页面用VUX来写UI组件这块.ios测试的时候没啥大问题,不过在4.4版本的华为手机上测试就崩了.接下来详细记述下崩的几个点. 第一:vux自带的提示框,在低版本安卓系统上全不是居中显 ...
- JS nodeList转数组，兼容IE低版本
一.前言 nodeList转数组貌似很少会这样去操作,但我在做图片懒加载时,我获取了所有需要做懒加载的img元素,也就是一个NodeList对象,打个比方: 对这些元素进行src修改后,我想将此项从N ...
- 原生js模仿jq fadeIn fadeOut效果 兼容IE低版本
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
随机推荐
- PHP常用文件操作
<?php $path = "/home/work/srccode/hello.go"; $dirName = dirname($path); $name = basenam ...
- BNU27937——Soft Kitty——————【扩展前缀和】
Soft Kitty Time Limit: 1000ms Memory Limit: 65536KB 64-bit integer IO format: %lld Java class n ...
- 自动生成数据库字典(sql2008) 转自 飘渺の云海
每次做项目的时候都要做数据字典,这种重复的工作实在很是痛苦,于是广找资料,终于完成了自动生成数据库字典的工作,废话少说,上代码. 截取一部分图片: 存储过程: SET ANSI_NULLS ON GO ...
- SQL拼接 html 发送
--在Job BES_Daily_FTP_filedownload 中使用 ALTER proc [dbo].[RSP_FN_UNAPPLIED_Mail_Reminder] as Declare @ ...
- Lucence学习之一：全文检索的基本原理
本文转载自: http://www.cnblogs.com/forfuture1978/archive/2009/12/14/1623594.html 一.总论 根据http://lucene.ap ...
- vs2017启动调试，点击浏览器或输入后回车浏览器闪退，调试中断
vs2017在启动调试后,浏览器运行,点击地址栏刚输入几个字符,mmmmm居然闪退了! 什么情况呢?测试一下,换其他浏览器进行调试,偶尔不会有问题, 可是第二天......还是一下 于是浏览器——ww ...
- maven <repositories>标签，<pluginRepositories>标签
在不用Maven的时候,比如说以前我们用Ant构建项目,在项目目录下,往往会看到一个名为/lib的子目录,那里存放着各类第三方依赖jar文件,如log4j.jar,junit.jar等等.每建立一个项 ...
- flask_restful的使用方法
一 安装: pip install flask_restrul 二 初始化并注册路由 # run.py from flask_restful import Api ... api = Api(app) ...
- Jvm性能监控和常用工具
JDK常用命令行工具 Jps : jps [options] [hostid] , -q 只显示jvmid, -m 传递给主类main的参数,-l 类全名,-v jvm启动参数 jstat : ...
- 弹性布局（flex）
一.Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 Flex 布局.但在使用时 ...