代码收集

进度条效果 ：

 

< div  id ="loading"  style ="position:absolute;width:100%;height:100%;left:0px;top:0px;background-color:#FFFFFF;filter:alpha(opacity=70)" >< b > Loading </ b ></ div >
< style > ... body{...}{margin:0px;overflow:hidden}</style>
<iframe src="http://www.sina.com.cn/" width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>
<script>...
document.onreadystatechange=function()...{
 if(document.readyState=="complete")...{
  document.getElementById('loading').style.display='none';
 }
}
</script> 

 css的翻页代码：

 

.pagination {...} {} {...} {
padding: 2px;
}

.pagination ul {...} {} {...} {
margin: 0;
padding: 0;
text-align: left; /**//**//**//*Set to "right" to right align pagination interface*/
font-size: 12px;
}

.pagination li {...} {} {...} {
list-style-type: none;
display: inline;
padding-bottom: 1px;
}

.pagination a, .pagination a:visited {...} {} {...} {
padding: 0 5px;
border: 1px solid #9aafe5;
text-decoration: none; 
color: #2e6ab1;
}

.pagination a:hover, .pagination a:active {...} {} {...} {
border: 1px solid #2b66a5;
color: #000;
background-color: lightyellow;
}

.pagination li.currentpage {...} {} {...} {
font-weight: bold;
padding: 0 5px;
border: 1px solid navy;
background-color: #2e6ab1;
color: #FFF;
}

.pagination li.disablepage {...} {} {...} {
padding: 0 5px;
border: 1px solid #929292;
color: #929292;
}

.pagination li.nextpage {...} {} {...} {
font-weight: bold;
}

* html .pagination li.currentpage, * html .pagination li.disablepage {...} {} {...} { /**//**//**//*IE 6 and below. Adjust non linked LIs slightly to account for bugs*/
margin-right: 5px;
padding-right: 0;
}

 

不错的折角box

 

.curlycontainer {...} {} {...} {
border: 1px solid #b8b8b8;
margin-bottom: 1em;
width: 300px;
font-size:12px
}

.curlycontainer .innerdiv {...} {} {...} {
background: transparent url(../images/brcorner.gif) bottom right no-repeat;
position: relative;
left: 2px;
top: 2px;
padding: 1px 4px 15px 5px;
}

 

windows关机特效：

 

< html >
< head >
< title > AJAX LightBox Sample </ title >
< style  type ="text/css" > ...
#lightbox {...}{}{...}{/**//**//**//*该层为高亮显示层*/
       BORDER-RIGHT: #fff 1px solid;
       BORDER-TOP: #fff 1px solid;
       DISPLAY: block; 
       Z-INDEX: 9999; /**//**//**//*设置该层在网页的最上端,设置足够大*/
       BACKGROUND: #fdfce9; /**//**//**//*设置背景色*/
       LEFT: 50%; 
       MARGIN: -220px 0px 0px -250px; 
       BORDER-LEFT: #fff 1px solid; 
       WIDTH: 500px; 
       BORDER-BOTTOM: #fff 1px solid; 
       POSITION: absolute; 
       TOP: 50%; 
       HEIGHT: 400px; 
       TEXT-ALIGN: left
}
#overlay {...}{}{...}{/**//**//**//*该层为覆盖层*/
      DISPLAY: block;
      Z-INDEX: 9998; /**//**//**//*设置高亮层的下方*/
      FILTER: alpha(opacity=80); /**//**//**//*设置成透明*/
      LEFT: 0px; 
      WIDTH: 100%; 
      POSITION: absolute; 
      TOP: 0px; 
      HEIGHT: 100%; 
      BACKGROUND-COLOR: #000; 
      moz-opacity: 0.8; 
      opacity: .80
}
</ style >
</ head >
< body >
<!-- 该层为覆盖层  -->
< div  id ="overlay" ></ div >
<!-- 该层为高亮显示层  -->
< div  id ="lightbox" ></ div >
</ body >
</ html >

 

搜索框提示效果：

 

< script  language ="javascript" > ...  
var intIndex=0;arrList = new Array(); 
arrList[intIndex++] = " 1sdfsdf.com"; 
arrList[intIndex++] = " a11sdafs.net"; 
arrList[intIndex++] = " b22dsafsdf"; 
arrList[intIndex++] = " c333asdfsadf"; 
arrList[intIndex++] = " 4444dsafasdf"; 
arrList[intIndex++] = " dddsfddsafdsaf"; 
arrList[intIndex++] = " 121213dsafsdaf"; 
arrList[intIndex++] = " 43213asdfadsf"; 
arrList[intIndex++] = " dsa3121dasf3"; 
arrList[intIndex++] = " a213"; 
arrList[intIndex++] = " 323313"; 
arrList[intIndex++] = " 3213"; 
arrList[intIndex++] = " 32213"; 
arrList[intIndex++] = " dsfsdddd"; 
arrList[intIndex++] = " ds11dfsfd"; 
arrList[intIndex++] = " ffdafd"; 
arrList[intIndex++] = " afdfd"; 
arrList[intIndex++] = " afd"; 
arrList[intIndex++] = " baffad"; 
arrList[intIndex++] = " 2fda2fd"; 
arrList[intIndex++] = " dasd"; 

function smanPromptList(arrList,objInputId)...{ 
this.style = "background:#E8F7EB;border: 1px solid #CCCCCC;font-size:14px;cursor: default;" 
if (arrList.constructor!=Array)...{alert('smanPromptList初始化失败:第一个参数非数组!');return ;} 
window.onload =function() ...{ 
              arrList.sort(function(a,b)...{ 
                  if(a.length>b.length)return 1; 
                else if(a.length==b.length)return a.localeCompare(b); 
                else return -1; 
            }) 
var objouter=document.getElementById("__smanDisp") //显示的DIV对象 
var objInput = document.getElementById(objInputId); //文本框对象 
var selectedIndex=-1; 
var intTmp; //循环用的:) 
if (objInput==null) ...{alert('smanPromptList初始化失败:没有找到"'+objInputId+'"文本框');return ;} 
//文本框失去焦点 
objInput.onblur=function()...{ 
objouter.style.display='none'; 
} 
//文本框按键抬起 
objInput.onkeyup=checkKeyCode; 
//文本框得到焦点 
objInput.onfocus=checkAndShow; 
function checkKeyCode()...{ 
var ie = (document.all)? true:false 
if (ie)...{ 
var keyCode=event.keyCode 
if (keyCode==40||keyCode==38)...{ //下上 
  var isUp=false 
  if(keyCode==40) isUp=true ; 
  chageSelection(isUp) 
}else if (keyCode==13)...{//回车 
  outSelection(selectedIndex); 
}else...{ 
  checkAndShow() 
} 
}else...{ 
checkAndShow() 
} 
divPosition() 
} 

function checkAndShow()...{ 
  var strInput = objInput.value 
  if (strInput!="")...{ 
  divPosition(); 
  selectedIndex=-1; 
  objouter.innerHTML =""; 
  for (intTmp=0;intTmp<arrList.length;intTmp++)...{ 
  for(i=0;i<arrList[intTmp].length;i++)...{  
if (arrList[intTmp].substr(i, strInput.length).toUpperCase()==strInput.toUpperCase())...{ 
    addOption(arrList[intTmp],strInput); 
  } 
} 
  } 
  objouter.style.display=''; 
  }else...{ 
  objouter.style.display='none'; 
} 
function addOption(value,keyw)...{ 
var v=value.replace(keyw,"<b><font color=red>"+keyw+"</font></b>"); 
  objouter.innerHTML +="<div οnmοuseοver="this.className='sman_selectedStyle'" οnmοuseοut="this.className=''" οnmοusedοwn="document.getElementById('"+objInputId+"').value='" + value + "'">" + v + "</div>"  
} 
} 
function chageSelection(isUp)...{ 
if (objouter.style.display=='none')...{ 
objouter.style.display=''; 
}else...{ 
if (isUp) 
  selectedIndex++ 
else 
  selectedIndex-- 
} 
var maxIndex = objouter.children.length-1; 
if (selectedIndex<0)...{selectedIndex=0} 
if (selectedIndex>maxIndex) ...{selectedIndex=maxIndex} 
for (intTmp=0;intTmp<=maxIndex;intTmp++)...{ 

if (intTmp==selectedIndex)...{ 
  objouter.children[intTmp].className="sman_selectedStyle"; 
}else...{ 
  objouter.children[intTmp].className=""; 
} 
} 
} 
function outSelection(Index)...{ 
objInput.value = objouter.children[Index].innerText; 
objouter.style.display='none'; 
} 
function divPosition()...{ 
objouter.style.top =getAbsoluteHeight(objInput)+getAbsoluteTop(objInput); 
objouter.style.left =getAbsoluteLeft(objInput);  
objouter.style.width=getAbsoluteWidth(objInput) 
} 
} 
document.write("<div id='__smanDisp' style='position:absolute;display:none;" + this.style + "' onbulr> </div>"); 
document.write("<style>.sman_selectedStyle{background-Color:#102681;color:#FFFFFF}</style>"); 
function getAbsoluteHeight(ob)...{ 
return ob.offsetHeight 
} 
function getAbsoluteWidth(ob)...{ 
return ob.offsetWidth 
} 
function getAbsoluteLeft(ob)...{ 
var s_el=0;el=ob;while(el)...{s_el=s_el+el.offsetLeft;el=el.offsetParent;}; return s_el 
} 
function getAbsoluteTop(ob)...{ 
var s_el=0;el=ob;while(el)...{s_el=s_el+el.offsetTop ;el=el.offsetParent;}; return s_el 
} 
} 
smanPromptList(arrList,"inputer") 
</ script >  
< table >< tr >< td >  
< input  type ="text"  id ="inputer" ></ td ></ tr ></ table >