一、目录
1. 入门案例——实现匀速运动
2. 入门案例——实现缓冲运动
3. 实现任意值的运动框架v.1
4. 改进任意值的运动框架v.2
5. 改进任意值的运动框架v.3
6. 实现链式运动框架
7. 实现完美运动框架
二、内容
1. 入门案例——实现匀速运动
①. 要求：只要简单的实现传入的对象和运动的最终目标，便能操作该对象的left属性的大小匀速的变化到目标大小。
②. 具体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1 {
width: 100px;
height: 100px;
background: red;
margin: 10px;
position:absolute;
}
</style>
<script>
var timer = null; //定时器
var speed = 10; //运动速度
function uniformMotion(obj,iTarget) {
if (obj.offsetLeft > iTarget) { //判断当前left属性的值与最终目标的值之间的位置
speed = -10; //说明当前对象的位置在目标值的右边
} else {
speed = 10;
}
clearInterval(timer); //先关闭之前的定时器
timer = setInterval(function () { //开启定时器，并保存返回的定时器对象
if (obj.offsetLeft == iTarget) {
clearInterval(timer); //运动到目标后关闭定时器
} else if (Math.abs(obj.offsetLeft - iTarget) < Math.abs(speed)) {
obj.style.left = iTarget + 'px'; //如果当前位置与目标的位置不足10，那么就让它直接跳到目标位置上
clearInterval(timer); //关闭定时器
} else {
obj.style.left = obj.offsetLeft + speed + 'px'; //让当前位置向目标位置移动
}
}, 30);
}
window.onload = function () {
var btn = document.getElementsByTagName("input")[0];
var oDiv = document.getElementById("div1");
btn.onclick = function(){
uniformMotion(oDiv,300);
}
}
</script>
</head>
<body>
<input type="button" value="匀速运动"/>
<div id="div1"></div>
</body>
</html>
2. 入门案例——实现缓冲运动
①. 要求：只要简单的实现传入的对象和运动的最终目标，便能操作该对象的left属性的大小由大到小的变化到目标大小。
②. 具体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title> <style>
div {
width: 100px;
height: 100px;
position: absolute;
background: red;
margin: 10px;
left: 100px;
} #div2{
width: 1px;
height:300px;
background-color: black;
position: absolute;
left:600px;
}
</style>
<script>
/*缓冲运动*/
var timer = null;
var speed = 0;
function UnUniformModition(obj,iTarget) {
clearInterval(timer);
timer = setInterval(function () {
if (parseInt(getStyle(obj, "left")) == iTarget) {
clearInterval(timer);
} else {
speed = (iTarget - parseInt(getStyle(obj, "left"))) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
obj.style.left = parseInt(getStyle(obj, "left")) + speed + "px";
}
}, 30);
}
/* 用来获取样式的值 obj-对象，name-样式名*/
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, false)[name];
}
}
window.onload = function () {
var btn = document.getElementsByTagName("input")[0];
var oDiv = document.getElementsByTagName("div")[0];
btn.onclick = function () {
UnUniformModition(oDiv,600);
}
}
</script>
</head>
<body>
<input type="button" value="缓冲运动">
<div></div>
<div id="div2"></div>
</body>
</html>
3. 实现任意值的运动框架v.1
①. 要求：只要简单的实现传入的对象、要变化的属性名和运动的最终目标，便能操作该对象的传入要变花属性的值由大到小的变化到目标大小。（基于缓冲运动）
②. 具体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>任意值运动框架version 1.0</title>
<style>
div {
width: 100px;
height: 100px;
background: green;
margin: 10px;
}
#div2 {
border: 1px solid black;
}
#div3{
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
opacity: 0.3;
}
</style>
<script>
/**
*
* @param obj 操作对象
* @param attr 属性名
* @param iTarget 目标值
*/
var timer = null;
function startMove(obj, attr, iTarget) {
clearInterval(timer);
timer = setInterval(function () {
var cur = 0;
if (attr == 'opacity') { //单独处理透明度问题，因为只有透明度一定要小数
cur = parseFloat(getStyle(obj, attr)) * 100;//乘以100是让透明度的0~1之间的度数扩大，方便后面的使用
} else {
cur = parseInt(getStyle(obj, attr));
}
var speed = (iTarget - cur) / 6; //让速度与当前位置离ITarget的距离成正比。除数越大那么缓冲就越大
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (cur == iTarget) {
clearInterval(timer);
} else {
if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
obj.style.opacity = (cur + speed) / 100;//把范围重新缩小为0~1之间
} else {
obj.style[attr] = cur + speed + 'px';
}
}
}, 30);
}
/**
* 获取样式属性的值。代替offset。
* @param obj 操作对象
* @param name 属性名
* @returns {*}
*/
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, false)[name];
}
} /**
* 测试：
* 下面的例子只能一个一个进行测试，因为在这里没有设置多对象动作，
* 也就是说定时器此时是共有的，如果同时使用这个定时器，会出错。
*/
window.onload = function () {
//测试width的变化（未设置border等其他影响width的属性）
var oDiv1 = document.getElementById("div1");
oDiv1.onmouseover = function () {
startMove(this, "width", 500);
}
oDiv1.onmouseout = function () {
startMove(this, "width", 100);
}
//测试width的变化（设置了影响width值得元素）
/*
var oDiv2 = document.getElementById("div2");
oDiv2.onmouseover = function () {
startMove(this, "width", 500);
}
oDiv2.onmouseout = function () {
startMove(this, "width", 100);
}
*/ //测试width的变化（设置了影响width值得元素）
/*
var oDiv3 = document.getElementById("div3");
oDiv3.onmouseover = function () {
startMove(this, "opacity", 100);
}
oDiv3.onmouseout = function () {
startMove(this, "opacity", 30);
}
*/
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
4. 改进任意值的运动框架v.2
①. 要求：在ie低版本测试下，透明度的值因为是小数，会出现一些特殊的情况，所以对此进行改进。
②. 具体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 2.o版本对透明度的算法进行了改进，加进了round方法 具体内容在39行-->
<meta charset="UTF-8">
<title>任意值运动框架version 2.0</title>
<style>
div {
width: 100px;
height: 100px;
background: green;
margin: 10px;
} #div2 {
border: 1px solid black;
}
#div3{
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
opacity: 0.3;
}
</style>
<script>
/**
*
* @param obj 操作对象
* @param attr 属性名
* @param iTarget 目标值
*/
var timer = null;
function startMove(obj, attr, iTarget) {
clearInterval(timer);
timer = setInterval(function () {
var cur = 0;
if (attr == 'opacity') { //单独处理透明度问题，因为只有透明度一定要小数
//因为parseFloat会得到一个带小数的值，因为计算机会有误差，所以会得到一些奇怪的数值。
//因此在这里使用round()方法对其值进行四舍五入，去除掉小数
cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} else {
cur = parseInt(getStyle(obj, attr));
}
var speed = (iTarget - cur) / 6; //让速度与当前位置离ITarget的距离成正比。除数越大那么缓冲就越大
//如果attr的值是0~1之间的话，下面这句代码将不可用，如果是0~100之间的话，那么就没问题
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (cur == iTarget) {
clearInterval(timer);
} else {
if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
obj.style.opacity = (cur + speed) / 100;//把范围重新缩小为0~1之间
} else {
obj.style[attr] = cur + speed + 'px';
}
}
}, 30);
}
/**
* 获取样式属性的值。代替offset。
* @param obj 操作对象
* @param name 属性名
* @returns {*}
*/
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, false)[name];
}
} /**
* 测试：
* 下面的例子只能一个一个进行测试，因为在这里没有设置多对象动作，
* 也就是说定时器此时是共有的，如果同时使用这个定时器，会出错。
*/
window.onload = function () {
//测试width的变化（未设置border等其他影响width的属性）
var oDiv1 = document.getElementById("div1");
oDiv1.onmouseover = function () {
startMove(this, "width", 500);
}
oDiv1.onmouseout = function () {
startMove(this, "width", 100);
}
//测试width的变化（设置了影响width值得元素）
/*
var oDiv2 = document.getElementById("div2");
oDiv2.onmouseover = function () {
startMove(this, "width", 500);
}
oDiv2.onmouseout = function () {
startMove(this, "width", 100);
}
*/ //测试width的变化（设置了影响width值得元素）
/*
var oDiv3 = document.getElementById("div3");
oDiv3.onmouseover = function () {
startMove(this, "opacity", 100);
}
oDiv3.onmouseout = function () {
startMove(this, "opacity", 30);
}
*/
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
5. 改进任意值的运动框架v.3
①. 要求：在任意值的运动框架的1/2版本中，都没有实现多物体运动，也就是同时多个物体进行运动，在第三版本中加入了多物体运动的功能。
②. 具体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 3.o版本 支持多物体运动 下面的三个例子可以同时测试-->
<meta charset="UTF-8">
<title>任意值运动框架version 2.0</title>
<style>
div {
width: 100px;
height: 100px;
background: green;
margin: 10px;
} #div2 {
border: 1px solid black;
}
#div3{
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
opacity: 0.3;
}
</style>
<script> /**
*
* @param obj 操作对象
* @param attr 属性名
* @param iTarget 目标值
*/
function startMove(obj, attr, iTarget) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var cur = 0;
if (attr == 'opacity') { //单独处理透明度问题，因为只有透明度一定要小数
//因为parseFloat会得到一个带小数的值，因为计算机会有误差，所以会得到一些奇怪的数值。
//因此在这里使用round()方法对其值进行四舍五入，去除掉小数
cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} else {
cur = parseInt(getStyle(obj, attr));
}
var speed = (iTarget - cur) / 6; //让速度与当前位置离ITarget的距离成正比。除数越大那么缓冲就越大
//如果attr的值是0~1之间的话，下面这句代码将不可用，如果是0~100之间的话，那么就没问题
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (cur == iTarget) {
clearInterval(obj.timer);
} else {
if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
obj.style.opacity = (cur + speed) / 100;//把范围重新缩小为0~1之间
} else {
obj.style[attr] = cur + speed + 'px';
}
}
}, 30);
} /**
* 获取样式属性的值。代替offset。
* @param obj 操作对象
* @param name 属性名
* @returns {*}
*/
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, false)[name];
}
} /**
* 测试：
* 下面的例子只能一个一个进行测试，因为在这里没有设置多对象动作，
* 也就是说定时器此时是共有的，如果同时使用这个定时器，会出错。
*/
window.onload = function () {
//测试width的变化（未设置border等其他影响width的属性）
var oDiv1 = document.getElementById("div1");
oDiv1.timer = null;
oDiv1.onmouseover = function () {
startMove(this, "width", 500);
}
oDiv1.onmouseout = function () {
startMove(this, "width", 100);
}
//测试width的变化（设置了影响width值得元素）
var oDiv2 = document.getElementById("div2");
oDiv2.timer = null;
oDiv2.onmouseover = function () {
startMove(this, "width", 500);
}
oDiv2.onmouseout = function () {
startMove(this, "width", 100);
} //测试opacity的变化
var oDiv3 = document.getElementById("div3");
oDiv3.timer = null;
oDiv3.onmouseover = function () {
startMove(this, "opacity", 100);
}
oDiv3.onmouseout = function () {
startMove(this, "opacity", 30);
}
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
6. 实现链式运动框架
①. 要求：让其运动可以一个接一个的运行，也就是链式运动。具体效果看测试代码
②. 具体代码：
html代码部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width:100px;
height:100px;
background: green;
} </style> <script src="链式运动框架.js"></script>
<script>
window.onload=function(){
var oBtn = document.getElementsByTagName('input')[0];
var oDiv = document.getElementById('div1');
oBtn.onclick = function(){
startMove(oDiv,'width',500,function(){
startMove(oDiv,'height',500);
});
}
}
</script>
</head>
<body>
<input type="button" value="运动"> <div id="div1"></div>
</body>
</html>
链式运动框架.js代码：
/**
* 获取计算后的样式
* @param obj 对象
* @param name 样式名称：width/height等
* @returns {*}
*/
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, false)[name];
}
} function startMove(obj, attr, iTarget, fun) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var cur;
if (attr == 'opacity') {
cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} else {
cur = parseInt(getStyle(obj, attr));
}
var speed = (iTarget - cur) / 6;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (cur == iTarget) {
clearInterval(obj.timer);
if (fun) {
fun();
}
} else {
if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
obj.style.opacity = (cur + speed) / 100;//把范围重新缩小为0~1之间
} else {
obj.style[attr] = cur + speed + 'px';
}
}
}, 30);
}
7. 实现完美运动框架
①. 要求：改进链式运动框架，链式框架没办法实现多个“属性”同时运动！比如width、height同时变化。链式运动框架是没法实现的，所以对此进行改进，也就是最终的运动框架！
②. 具体代码：
html代码部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width:100px;
height:100px;
background: black;
}
</style>
<script src="完美运动框架.js"></script>
<script>
window.onload = function(){
var oBtn = document.getElementById('btn1');
var oDiv = document.getElementById('div1');
oBtn.onclick = function(){
startMove(oDiv,{width:500,height:500},function(){
startMove(oDiv,{width:100,height:100});
});
}
} </script>
</head>
<body>
<input id="btn1" type="button" value="运动">
<div id="div1"></div>
</body>
</html>
完美运动框架.js代码部分：
/**
* 获取对象的样式
* @param obj 对象
* @param name 样式名称
*/
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, false)[name];
}
}
/**
* 完美运动框架实现了链式运动框架无法实现多属性同时运动的情况。如：width/height同时运动
* @param obj
* @param json 把要运动的属性通过json方式传入。如：{width:500,height:500}
* @param fun 执行完动作后，需要调用的方法
*/
function startMove(obj, json, fun) {
clearTimeout(obj.timer);
obj.timer = setInterval(function () {
var stop = true; //用来判断是否可以关闭定时器
for (var item in json) {
var cur;
if (item == 'opacity') {
cur = Math.round(parseFloat(getStyle(obj, item)) * 100);
} else {
cur = parseInt(getStyle(obj, item));
}
var speed = (json[item] - cur) / 6;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (cur != json[item]) { //判断当前对象的值是否已经达到目标值
stop = false; //未达到目标值时，让stop为false。
}
if (item == 'opacity') {
obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
obj.style.opacity = (cur + speed) / 100;//把范围重新缩小为0~1之间
} else {
obj.style[item] = cur + speed + 'px';
}
if(stop){
clearInterval(obj.timer);
if(fun){fun();}
}
}
}, 30);
}
声明：这些知识点都来自智能社的视频所得~~
