纯JS动画效果实现-自学php网

纯JS动画效果实现

来源：未知时间：2014-10-27 13:31 作者：xbdadmin 阅读:次

[导读] 纯JS实现动画滚动效果。源码如下： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=http://www.w3.org/1999/xhtml head meta http-equiv=Content-Type co...

纯JS实现动画滚动效果。

源码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

*{ margin:0px; padding:0px;}

#box_1{ width:200px; height:150px; background:#03F; position:absolute; left:-200px; top:0px; opacity: 0.4; filter:Alpha(opacity=40);}

#box_1 .span_1{ display:block; width:20px; height:30px; position:absolute; right:-20px; top:50%; margin-top:-15px;}

</style>

</head>

<body>

</div>

window.onload = function(){

var box_1 = document.getElementById('box_1');

box_1.onmouseover = function(){

start_animate(10,0);

}

box_1.onmouseout = function(){

start_animate(-10,-200);

}

var times = null;

function start_animate(spend,iTarget){

//console.log(spend,iTarget);

clearInterval(times);

var box_1 = document.getElementById('box_1');

times = setInterval(function(){

box_1_l = box_1.offsetLeft;

//console.log(box_1_l);

if(box_1_l == iTarget){

clearInterval(times);

}else{

box_1.style.left = box_1.offsetLeft+spend+'px';

}

},30);

}

</script>

</body>

</html>

javascript移动端框架Zepto.js

纯JS实现透明动画二

子栏目

纯JS动画效果实现

最新评论

添加评论

更多文章推荐

添加评论