进度条:
window.onload=function(){
var oBox1=document.getElementById("box1");
var oBox2=document.getElementById("box2");
var num=0;
for(var i=0;i<77;i++){
var oImg=new Image(); //创建一个image对象
oImg.src='http://www.zhinengshe.com/works/3525/img/'+i+'.jpg';
oImg.onload=function(){ //加载成功一张才执行下面的function;
num++;
//已经加载成功的比例
var scale=num/77;
oBox2.style.width=oBox1.offsetWidth*scale+'px';
}
}
}
输入框文字提示:
window.onload=function(){
var oTxt=document.getElementById("txt");
var oSpan=document.getElementById("sp");
oTxt.onfocus=function(){
oSpan.style.display='none'; //聚焦之后，让游戏本消失
}
oTxt.onblur=function(){
if(this.value!=''){oSpan.style.display='none';} //如果输入框的值不为空，让游戏本消失
else{oSpan.style.display='block';}
}
oSpan.onclick=function(){
this.style.display='none'; //游戏本点击之后，内容消失
oTxt.focus();//强制文本框聚焦，出现鼠标，可以输入
}
}
图片延迟加载:
function getPos(obj){
var l=0;
var t=0;
while(obj){
l+=obj.offsetLeft;
t+=obj.offsetTop;
obj=obj.offsetParent;
}
return {left:l,top:t};
}
window.onload=function(){
var aImg=document.getElementsByTagName('img');
window.onscroll=window.onresize=function(){ //滚动或者缩放可视区的时候才加载图片
var scrollT=document.documentElement.scrollTop||document.body.scrollTop;
var clientH=document.documentElement.clientHeight;
for(var i=0;i<aImg.length;i++){
var aImgT=getPos(aImg[i]).top;//获取img的相对高度
if(aImgT<=scrollT+clientH){ //当图片的相对top小于等于滚动条+可视区的高度时才加载图片;
aImg[i].src=aImg[i].getAttribute('_src');//getAttribute获取自定义属性;
}
}
}
}
吸顶条:
function getPos(obj){
var l=0;
var t=0;
while(obj){
l+=obj.offsetLeft;
t+=obj.offsetTop;
obj=obj.offsetParent;
}
return {left:l,top:t};
}
window.onload=function(){
var oBox=document.getElementById("box");
var oBox1=document.getElementById("box1");//障眼法,用空div代替,防止固定定位脱离文档流后下面的文字上去;
var oBoxTop=getPos(oBox).top; //放在window.onscroll上面,不然吸顶之后固定定位,值变为零;
window.onscroll=function(){
var scrollT=document.documentElement.scrollTop || document.body.scrollTop;
if(oBoxTop<=scrollT){ //如果滚动条的高度大于oBox的绝对高度，就固定定位;
oBox.style.position='fixed';
oBox.style.top='0px';
oBox.style.left='0px';
oBox1.style.display='block';
}else{
oBox.style.position=''; //为空而不是空格;
oBox1.style.display='none';
}
}
}