<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
.box{width: 400px;height: 60px;margin:200px auto;border: 1px solid #1C1818;position: relative;}
.list{list-style: none;}
.list li{position: absolute;width: 40px;height: 60px;text-align: center;line-height: 60px; top: 0;opacity: 1;filter:alpha(opacity=100);}
.rate{height: 60px;background-color: #C30C0C;width: 0px;position: absolute;left: 0px;z-index: -100}
</style>
</head>
<body>
<div>
<div id="div"></div>
<ul id="list">
<li>+1</li>
<li>+1</li>
<li>+1</li>
<li>+1</li>
<li>+1</li>
<li>+1</li>
<li>+1</li>
<li>+1</li>
<li>+1</li>
<li>+1</li>
</ul>
</div>
<script>
window.onload = function(){
var oList = document.getElementById('list');
var oDiv = document.getElementById('div');
var aLi = oList.getElementsByTagName('li');
var timer1 = null;
var timer2 = null;
var timer3 = null;
var onOff = true;
var num = 0;
var alpha = 100;
var iNow = 1;
for (var i = 0; i < aLi.length; i++) {
aLi[i].style.left = i*40+'px';
}
document.onclick = function(){
if (onOff) {onOff= false;fn1();fn2();fn3()}
}
function getStyle(obj,attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}
function doMove(obj,attr,dir,target){
dir = parseInt(getStyle(obj,attr))<target?dir:-dir;
clearInterval(obj.timer);
setInterval(function(){
var speed = parseInt(getStyle(obj,attr))+dir;
if (speed>target&&dir>0 || speed<target&&dir<0)
{speed= target;}
obj.style[attr] = speed+'px';
if (speed == target) {clearInterval(obj.timer);}
},100)
}
function fn1(){
//var count = 0;
clearInterval(timer1);
timer1 = setInterval(function(){
doMove(aLi[num],'top',-30,-200);
num++;
if (num == aLi.length) {
clearInterval(timer1);
}
},100)
}
function fn2(){
var count = 1;
clearInterval(timer2);
timer2 = setInterval(function(){
oDiv.style.width = count*40+'px';//alert(1);
count++;
if (count == 11) {clearInterval(timer2);}
},100)
}
function fn3(){
//透密度渐变消失
}
},30)
}
}
</script>
</body>
</html>
添加回答
举报
0/150
提交
取消