已安装Dreamweaver或其它网页编辑器的电脑一台
加载中
加载完成
加载提示信息消失END
在body标签写HTML代码,图片src路径上百度图片复制一个图片路径就行了,注意:要用网页上的图片路径,不然效果可能实现不了,或者一闪而过。END
写入CSS样式代码END
写入JavaScript脚本代码END
HTML代码:
CSS代码:#box { width:620px; height:700px; margin:0 auto; position:relative; z-index:1; border:10px #F09 double; }#box span { width:200px; height:200px; border:1px solid #CC3; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; position:absolute; z-index:2; top:50%; left:50%; margin-top:-100px; margin-left:-100px; background:#9C0; color:red; text-align:center; font-size:24px; line-height:200px; font-weight:bold;}
JavaScript代码:window.onload=function (){ var oBox=document.getElementById('box'); var oSpan=document.getElementsByTagName('span')[0]; var oImg=document.getElementsByTagName('img')[0]; function txtOK(){ oSpan.innerHTML='加载完成!'; oSpan.style.color='green'; oSpan.style.background='#CCC'; oSpan.style.opacity='0.8'; setTimeout(function (){ oSpan.style.opacity='0.3'; oSpan.style.display='none'; },1000); } var src = oImg.getAttribute('src'); oImg.setAttribute('src',''); oImg.onload=function (){ txtOK(); };};END
主要用图片onload属性,很简单吧。