JS运动搞不定 你缺少一个运动框架而已
2016-11-16 本文已影响1835人
小夫特
写在前面 初学者 大家一起学习 有不对的请指出哦~
简书1.jpg
01
可以解决的运动
- 元素的上下左右匀速 缓冲运动
- 图片的透明度变化
- 图片轮播
- 元素高度 宽度 边框像素的变化
- 适用于多个物体运动以及链式运动
- 改变元素的位置
02
辅助函数
需要用到的一个小函数，当我们获取样式时，通过 Elements.style.attribute 只能获取到行间样式 ，而我们需要操作的大都是css代码内的，所以使用这个函数
- 参数：
- <b>obj</b> 元素
- <b>attr</b> 属性
- 返回值： 属性值
function getStyle(obj, attr) {
if(obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
03
运动框架
-
参数：
-
<b>obj</b> 元素
-
<b>json</b> json数组 形如｛width：300，height：300｝
-
<b>endFun</b> 当前运动完成后执行的函数
-
定时器作为** obj **的属性，避免了多个物体运动时导致关闭定时器错误，运动终止。
-
json数组可以传递多个参数，可以同时改变多个属性值
-
endFun 可以实现链式运动，一个运动运动后结束开启其他运动
function startMove(obj, json, endFun) {
//开始前关闭之前obj上的定时器
clearInterval(obj.timer);
//定时器
obj.timer = setInterval(function() {
var bStop = true; //假设所有值都到目标
for(var attr in json) {//循环json数组
//单独处理透明度
if(attr == 'opacity') {
var cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} else {
var cur = parseInt(getStyle(obj, attr));
}
//速度处理
var speed = (json[attr] - cur) / 6;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//如果当前的没到目标值
if(cur != json[attr])
bStop = false;
//运动
if(attr == 'opacity') {
obj.style.opacity = (cur + speed) / 100;
obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
} else {
obj.style[attr] = cur + speed + 'px';
}
}
//所有的都到达目标值
if(bStop) {
clearInterval(obj.timer);
if(endFun) endFun();
}
}, 30); }
04
使用
- 引入JS
- 在你需要的地方使用startMove（）函数
- 这里只是展示一个简单的小例子，其实可以用的远比这多，图片从高度的运动，能使得图片看上去是从上往下的 等等
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1 {
height: 50px;width: 50px;
background: red;opacity: 0.5;
filter: alpha(opacity: 50);
position: absolute;top: 0;
border: 1px solid black;
}
</style>
<script src="Move2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function() {
var oDiv = document.getElementById('div1');
oDiv.onmouseover = function() {
startMove(oDiv, {width: 100,height: 150,opacity: 100}, function() {
startMove(oDiv, {width: 150});
});
};
oDiv.onmouseout = function() {
startMove(oDiv, {borderWidth:10});
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
