完美运动框架(js)

一、前言

学习js运动时，由于在实现多种不同运动效果过程中很多代码是重复的，故将其封装达到代码重用。

二、代码封装重用

function startMove(obj, json, fnEnd){clearInterval(obj.timer);//若物体之前开有定时器则先关闭
obj.timer = setInterval(function(){var bStop = true; //假设所有的属性值运动到了目标值for(var attr in json){//遍历物体传过来的json值var start = 0;if(attr === 'opacity'){//透明度start = Math.round(parseFloat(getStyle(obj, attr))*100);}else{//非透明度属性start = parseInt(getStyle(obj, attr));}if(start != json[attr]){//若有属性值未运动到目标值，将bStop的值赋为falsebStop = false;}var speed = (json[attr] - start)/6;speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);//速度为正值向上取整，速度为负值向下取整if(attr === 'opacity'){obj.style.filter = 'alpha(opacity:'+ (start + speed) +')';//IE浏览器obj.style.opacity = (start + speed)/100;//非IE浏览器}else{obj.style[attr] = start + speed + 'px';}}if(bStop){//所有的属性值都运动到了目标值,则关闭定时器并执行回调函数
            clearInterval(obj.timer);if(fnEnd)fnEnd();}}, 30);
}function getStyle(obj, attr){//获取当前属性的值if(obj.currentStyle){return obj.currentStyle[attr];}else{return getComputedStyle(obj, false)[attr];}
}

三、测试并结果分析

将上面封装的代码保存为moveFrame.js文件，并导入如下测试代码中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title完美运动框架应用举例(满足多个属性值同时运动)</title><style type="text/css">#one{width: 100px;height: 100px;background-color: red;filter:alpha(opacity:40);opacity: 0.4;}</style><script type="text/javascript" src="moveFrame.js"></script><script type="text/javascript">window.onload = function(){var oBtn = document.getElementById('btn');var oDiv = document.getElementById('one');oBtn.onclick = function(){startMove(oDiv, {'width' : 200, 'height' : 400, 'opacity' : 100}, function(){alert('successful');});};};</script>
</head>
<body><input type="button" id="btn" value="多属性值同时运动"><div id="one"></div>
</body>
</html>

测试结果为：chrome、FF、IE6+、Opera、Safari结果都一致。

四、总结

不管做什么特效，如图片轮播、滑动门特效、淡入淡出等，凡与运动相关都可以直接引入此框架。

本人前端菜鸟，希望这篇文章能对大家有所启发，文中有误导大家的地方，希望大伙海涵并给予指正。如果您觉得文章对您有所帮助，您的留言和推荐将对我是莫大的鼓舞！

此文章发布在本人博客园Developer_chang，如需转载本文，请注明来源： http://www.cnblogs.com/changjianqiu/

转载于:https://www.cnblogs.com/changjianqiu/p/4320814.html

完美运动框架(js)相关推荐

JavaScriptDay08:js运动基础，单物体运动框架，多物体运动框架，改变单一任意值运动框架，改变多值运动框架，完美运动框架
目录 0x00 js的运动基础 0x01 单物体运动框架 0x02 多物体运动框架 0x03 改变单一任意值运动框架 0x04 链式运动框架 0x05 改变多值运动框架 0x06 完美运动框架 0x0 ...
JS完美运动框架详解——原理分析及demo
1.运动原理 Js运动,本质来说,就是让 web 上 DOM 元素动起来.而想要 DOM 动起来,改变其自身的位置属性,比如高宽,左边距,上边距,透明度等.还有一个很重要的前提是,运动的物体必须是绝对 ...
js运动-完美运动框架
在上一篇的<js运动-同时运动>中说过,我们的运动框架还存在一个问题,那究竟是什么问题那?把上一篇的程序做一下调整 oDiv.onmouseover = function () {//st ...
完美运动框架封装函数startMove
function getStyle(obj, attr) { if(obj.currentStyle) { return obj.currentStyle[attr];//ie } else { re ...
JavaScript 运动框架
1,运动原理 Js运动,本质来说,就是让 web 上 DOM 元素动起来.而想要 DOM 动起来,改变其自身的位置属性,比如高宽,左边距,上边距,透明度等.动画的原理就是把不同状态的物体,串成连续的样 ...
【原生JS组件】javascript 运动框架
大家都知道JQuerry有animate方法来给DOM元素进行运动,CSS3中也有transition.transform来进行运动.而使用原生的Javascript来控制元素运动,须要写非常多运动的 ...
js运动应用之运动框架
js运动应用之运动框架 <style>div{width:200px;height:200px;background-Color:yellow;float:left;font-size:1 ...
javascript从入门到跑路-----小文的js学习笔记（25）------运动框架----匀速运动、缓冲运动、多物体运动、链式运动
** javascript从入门到跑路-----小文的js学习笔记(1)---------script.alert.document.write() 和 console.log 标签 javascri ...
animate用法 js原生_原生JS封装animate运动框架的实例
如下所示: div { width: 100px; height: 100px; background-color: pink; position: absolute; left: 0; top: 5 ...

完美运动框架(js)

完美运动框架(js)相关推荐

最新文章

热门文章