程序博客网 > 奇幻咔咔软件

漂浮评分

来源：互联网发布：奇幻咔咔软件编辑：程序博客网时间：2024/04/30 13:32

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>漂浮评分</title>
<script src="move2.js"></script>
<style>
*{margin:0; padding:0;}
#wrap{width:500px; height:50px; position:relative; margin:300px auto; border:solid 1px #FFCCFF;}
#wrap span{ width:50px; height:50px; color:#F03; opacity:1; font:30px/50px Verdana, Geneva, sans-serif; text-align:center; position:absolute; z-index:2;}
#wrap p{width:0px; height:50px; position:absolute; left:0px; top:0px; z-index:1; background:#F99; opacity:0;}
</style>

<script>

function startMove(obj,json,endFn){

clearInterval(obj.timer);

obj.timer = setInterval(function(){

var bBtn = true;

for(var attr in json){

var iCur = 0;

if(attr == 'opacity'){
if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){
iCur = Math.round(parseFloat(getStyle(obj,attr))*100);

}
else{
iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100;
}
}
else{
iCur = parseInt(getStyle(obj,attr)) || 0;
}

var iSpeed = (json[attr] - iCur)/8;
iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(iCur!=json[attr]){
bBtn = false;
}

if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity=' +(iCur + iSpeed)+ ')';
obj.style.opacity = (iCur + iSpeed)/100;

}
else{
obj.style[attr] = iCur + iSpeed + 'px';
}

}

if(bBtn){
clearInterval(obj.timer);

if(endFn){
endFn.call(obj);
}
}

},30);

}

function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}

window.onload=function(){
var oWrap=document.getElementById('wrap');
var aSpan=oWrap.getElementsByTagName('span');
var oP=oWrap.getElementsByTagName('p')[0];

for(var i=0;i<aSpan.length;i++)
{
aSpan[i].style.left=aSpan[i].offsetWidth*i+'px';
}

oWrap.onOff=false;
var time=null;
oWrap.onclick=function()
{
if(this.onOff)
{
return;
}else
{
this.onOff=true;
}
var num=0;
var n=0;
time=setInterval(function(){

startMove(aSpan[num],{'top':-200,'opacity':0},function(){
n++;
if (n==aSpan.length) {
for (var i=0; i<aSpan.length; i++)
{
startMove(aSpan[i],{'opacity':100})
aSpan[i].style.top=0;
}
oWrap.onOff=false;
}
});
num++;
startMove(oP,{'width':oWrap.offsetWidth,'opacity':100}, function(){
startMove(oP,{'width':0,'opacity':0});
});
if(num==aSpan.length)
{
clearInterval(time);
}
},50)
}
}
</script>
</head>

<body>
<div id="wrap">
<span>+1</span>
<span>+1</span>
<span>+1</span>
<span>+1</span>
<span>+1</span>
<span>+1</span>
<span>+1</span>
<span>+1</span>
<span>+1</span>
<span>+1</span>
<p></p>
</div>

</body>
</html>

0 0

奇幻咔咔软件

奇幻咔咔软件

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子动听动听的英文好挺昵称女生简短好听英文昵称简短好听霸气结婚唱什么歌好这样唱好美结婚新郎唱什么歌好好唱的英文歌小曲好唱口难开如何唱好歌好唱的歌曲什么歌好唱这样唱好美什么时候播出怎么唱好歌音痴怎么唱好歌结婚唱歌唱什么好如何唱好英文歌怎么唱好歌曲怎么样才能唱好高音去ktv比较好唱的歌怎么唱歌唱的好好唱的中文歌好唱又好听的歌好听好唱的歌好听又好唱的歌好听的说唱歌曲刘欢的从头再来适合大家一起唱的歌如何当好一只毛团好困图片好累好困好想睡觉图片好困的图片好困好困好困想睡觉带字图片好困表情包好困啊图片好困但是又睡不着好累好困睡不着我好困表情包好困又睡不着怎么回事