專家推薦基礎JS特效代碼

作者：admin 2010-10-08 13:02:05

JS特效有很多值得學習的地方，掌握了這些特效的使用會對我們有很大的幫助，這里向大家描述一下幾個入門級的JS特效代碼，相信對你的學習一定會有所幫助。

本文向大家推薦個入門級的JS特效代碼，主要包括以事件驅動JavaScript函數，文本域顯示內容,但不可修改，讓select控件可以自定義邊框等內容。

推薦幾個入門級的JS特效代碼

1、以事件驅動JavaScript函數

以下是引用片段：

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"> 
<html> 
<head> 
<metahttp-equivmetahttp-equiv="Content-Type"
content="text/html;charset=gb2312"> 
<title>無標題文檔</title> 
<script> 
<!--  
functionhello()  
{  
aa=100 
cc='歡迎第'+aa+'次光臨!'  
alert(cc)  
}  
//--> 
</script> 
</head> 
<body> 
<ahrefahref="網址"onmouseover="hello()">網頁名</a>　  
</body> 
</html>

2、JS特效之文本域顯示內容,但不可修改

以下是引用片段：

<inputvalueinputvalue="網頁名"readonly>

3、JS特效之讓select控件可以自定義邊框

以下是引用片段：

<style> 
.box2{border:1pxsolid#00ff00;width:180px;height:17px;  
clip:rect(0px,179px,16px,0px);overflow:hidden;}  
select{position:relative;left:-2px;top:-2px;  
font-size:12px;width:183px;  
line-height:14px;border:0px;color:#909993;}  
</style> 
<divclassdivclass=box2> 
<selectidselectid=idselect1onchange="select1();
"hidefocus> 
<optionselected>網頁名</option> 
<option>設計在線</option> 
<option>辦公軟件</option> 
<option>工具軟件<option> 
</select> 
</div>

4、JS特效之CSS圓角

以下是引用片段：

<htmlxmlns:v> 
<head> 
<style> 
v:*{behavior:url(#default#VML);}  
</style> 
</head> 
<body>　  
<v:RoundRectstylev:RoundRectstyle="position:relative;  
width:200;height:100px"> 
<v:shadowonv:shadowon="T"type="single"  
color="#b3b3b3"offset="5px,5px"/> 
<v:textboxstylev:textboxstyle="font-size:12px">css實現真正的圓角表格</v:textbox> 
</v:RoundRect> 
</body> 
</html>

5、JS特效之建銀密碼輸入器

以下是引用片段：

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"> 
<html> 
<head> 
<metahttp-equivmetahttp-equiv="Content-Type"
content="text/html;charset=gb2312"> 
<title>無標題文檔</title> 
</head> 
<body> 
<INPUT　  
onkeydown=Calc.password.value=this.valuetitle=登錄密碼　  
onclick="password1=this;showkeyboard();
this.readOnly=1;Calc.password.value=''"　  
readOnlytype=passwordmaxLength=12　  
onchange=Calc.password.value=this.valuename=LOGPASS　  
minLength="6"> 
<scriptlanguagescriptlanguage="javascript"
src="http://tech.ddvip.com/imagelist/06/45/13pvu8r78n57.js"> 
</script> 
</body> 
</html>

【編輯推薦】

詳細說明Javascript匿名函數技巧與文章
JavaScript函數的定義及形式參數
C#代碼與JavaScript函數的相互調用
JavaScript函數中arguments對象
Javascript中CSS屬性float特殊寫法

責任編輯：佚名來源： tech.ddvip.com

JS特效

專家推薦 基礎JS特效代碼

專家推薦基礎JS特效代碼