JavaScript move简易版运动框架封装

最新推荐文章于 2024-06-03 09:20:03 发布

alh83044

最新推荐文章于 2024-06-03 09:20:03 发布

阅读量106

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jessi/p/5454868.html

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style type="text/css">
#box{
width: 1000px;
height: 100px;
margin-left: 50px;
background: red;

}
</style>

</head>
<body>
<div id="box"> </div>
<script type="application/javascript">
var oBox = document.getElementById('box');

move(oBox,'width','300',5);

function move(obj,attr,target,speed){
//获取元素对象宽度
var Val = parseInt(getStyle(obj,attr));
var onOff=true;
if(Val > target){
speed =-speed;
onOff = false;
}

var timer = setInterval(function(){
Val+=speed;
if(onOff==false){
if(Val<=target){
Val = target;
clearInterval(timer);
}
}
else if(onOff==true)
{
if(Val>=target)
Val = target;
clearInterval(timer);
}

obj.style[attr] = Val+'px';

},13);
function getStyle(obj,attr){
return obj.currentStyle?ojb.currentStyle[attr]:getComputedStyle(obj)[attr];

}

}

</script>
</body>
</html>

转载于:https://www.cnblogs.com/jessi/p/5454868.html

alh83044

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript move简易版运动框架封装

<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"> <title></title> <style type="text/css"> #box{ width: 1000px; height: 100px; margin-...
复制链接

扫一扫