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 ...
随机推荐
- 机器学习——LightGBM
基础概念 LigthGBM是boosting集合模型中的新进成员,它和xgboost一样是对GBDT的高效实现,很多方面会比xgboost表现的更为优秀.原理上它和GBDT及xgboot类似,都采用损 ...
- whatwg-fetch
fetch 是什么 XMLHttpRequest的最新替代技术 fetch优点 接口更简单.简洁,更加语义化 基于promise,更加好的流程化控制,可以不断then把参数传递,外加 async/aw ...
- window.history，页面中的返回按钮
一.页面中的返回按钮事件 window.history可以不加window这个前缀 他的方法有: window.history.go(-1); //-n表示后退n页,n表示前进n页,或者是一个url ...
- Silverlight & Blend动画设计系列九：动画（Animation）与视图状态管理(Visual State Manager)
Silverlight中的动画(Animation)与视图状态管理(Visual State Manager) 结合使用是非常常见的,动画用于管理对象在某段事件段内执行的动画动作,视图状态管理则用于控 ...
- 三：Springboot整合Redis
一:springboot整合redis redis版本:3.0.0 运行环境:linux 1.安装redis 1.1安装gcc yum install gcc-c++ 1.2解压redis.3.0.0 ...
- shell编程之while死循环
原文 在linux下编程的程序猿都知道shell脚本,就算你不怎么熟悉,也应该听过的吧!那在shell脚本中的死循环该怎么写呢? 对于熟悉C语言的猿人们来说,最简单的死循环应该这样写: ------- ...
- 虽然我们可能不想对元素应用3D变换，可我们一样可以开启3D引擎
例如我们可以用transform: translateZ(0); 来开启硬件加速 ..cube {-webkit-transform: translateZ(0);-moz-transform: tr ...
- html 之 position用法
引用: position的四个属性值: 1.relative2.absolute3.fixed4.static下面分别讲述这四个属性. <div id="parent"> ...
- js表单快速取值/赋值 快速生成下拉框
1.表单取值/赋值公共方法 //表单序列化:文本框的name字段和数据源一致<form id="myForm" onsubmit="return false;&qu ...
- 关于Array 栈方法和队列方法
栈方法: 推入 -- 弹出 // 栈方法 var colors = new Array(); var count = colors.push("red","green&q ...