js动画效果实现原理-自学php网

js动画效果实现原理

来源：未知时间：2014-10-20 10:56 作者：xbdadmin 阅读:次

[导读] js怎么实现动画效果？ setTimeout 和 setInterval 是必不可少的，下面一段代码大家可以复制回去练习下 style type=text/css #box{ height:30px; width:100%; border:1px solid #d5d5d5; position:relative;} #box span{ hei...

js怎么实现动画效果？
setTimeout 和 setInterval 是必不可少的，下面一段代码大家可以复制回去练习下

#box{ height:30px; width:100%; border:1px solid #d5d5d5; position:relative;}

#box span{ height:30px; width:120px; background:#999; display:block; position:absolute; left:0px; top:0px;}

</style>

</head>

<body>

</div>

(function(w){

var doc = document;

var box = doc.getElementById('box');

san = box.getElementsByTagName('span')[0];

w.animate = function(_obj,_x,_y,_t){

var _obj_ot = _obj.offsetTop;

var _x = _x;

var _y = _y;

var _t = _t;

_animate();

function _animate(){

var _obj_ol = _obj.offsetLeft;

console.log(_obj_ol);

if(_obj_ol<_x){

_obj_ol = _obj_ol+_t;

_obj.style.left = _obj_ol+'px';

setTimeout(_animate,30);

}

animate(san,1000,0,10);

})(window);

</script>

js获取鼠标选中文字事件

js获取网页控件的offset值的方法

子栏目

js动画效果实现原理

最新评论

添加评论

更多文章推荐

添加评论