首页 > 代码库 > 进度条
进度条
<!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" content="text/html; charset=utf-8" /><title>无标题文档</title><style>#wrap{ position:relative; border:1px #000 solid; height:50px; width:640px; margin:200px auto; }#bg{ position:absolute; top:0px; left:0px; height:50px; width:0px; background:pink; }span{ width:50px; height:50px; font-size:28px; line-height:50px; text-align:center; position:absolute; top:0px; } </style><script src="http://www.mamicode.com/float.js"></script><script type="text/javascript">window.onload = function (){ var ospan = document.getElementsByTagName(‘span‘); var timer = null; var num = 0; for ( var i = 0; i < ospan.length; i++) { ospan[i].style.left = 20 + i*55 +‘px‘; } document.onclick = function () { var ospan = document.getElementsByTagName(‘span‘); var obg = document.getElementById(‘bg‘); clearInterval(timer); domove(obg,‘width‘,50,90,640); opacity(obg,10,0,150); timer = setInterval(function() { domove(ospan[num],‘top‘,10,50,-150); opacity(ospan[num],10,0,80); num++; if(num==ospan.length) { clearInterval(timer); } },50) }; };</script></head><body><div id="wrap"> <div id="bg"></div> <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> <span>+1</span></div></body></html>
function getstyle(obj,attr){ return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];}function domove (obj,attr,step,frequency,target,endfn){ step = parseInt(getstyle(obj,attr))<target?step:-step; clearInterval(obj.timer); obj.timer = setInterval( function () { var speed = parseInt(getstyle(obj,attr)) + step; if(step>0&&speed>target||step<0&&speed<target) { speed = target; } obj.style[attr] = speed + ‘px‘; if( speed == target ) { clearInterval(obj.timer); endfn&&endfn(); } },frequency); };function opacity(obj,step,target,frequency,endfn){ var currentOpacity = getstyle(obj,‘opacity‘) * 100; step = currentOpacity < target?step:-step; clearInterval(obj.opacity) obj.opacity = setInterval (function () { currentOpacity = getstyle(obj,‘opacity‘) *100; var nextOpacity = currentOpacity + step; if(step>0&& nextOpacity>target || step<0&& nextOpacity < target ) { nextOpacity = target; } obj.style.opacity = nextOpacity/100; obj.style.filter = ‘alpha(opacity:)‘ + nextOpacity +‘)‘; if(nextOpacity == target ) { clearInterval(obj.opacity); endfn&&endfn(); } },frequency); };function shake(obj,attr,endfn){ if( obj.shaked ) { return; } obj.shaked = true; var num = 0; var timer = null; var arr = []; var pos = parseInt(getstyle(obj,attr)); for( var i = 20; i > 0; i-=2 ) { arr.push(i,-i); } arr.push(0); clearInterval(obj.shake); obj.shake = setInterval(function () { obj.style[attr] = pos + arr[num] +‘px‘; num++; if(num==arr.length) { clearInterval(obj.shake); endfn&&endfn(); obj.shaked = false; } },50);};
进度条
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。