設為首頁收藏本站:: 彩色筆小沛的入口網站 ::
切換到寬版

 找回密碼
 註冊
搜索
彩色筆小沛的知識庫»討論區 › 網頁設計/網站管理/資料庫 › Web Design › JavaScript之應用
返回列表 發新帖
查看: 8384|回復: 0

JavaScript之應用

[複製鏈接]
JDP
發表於 2005-10-19 11:19:50 | 顯示全部樓層 |閱讀模式
很多語法提供

-------------------------------------------------------------------------
背景語法類：

普通背景語法（不重複排列）：
<style type=text/css>
<!--
body{
background-image : url(\'圖片網址\'); /*背景圖片*/
background-repeat : no-repeat; /*不重複排列*/
background-position : 100% 100%; /*背景圖片x與y軸的位置*/
background-attachment : fixed
}
-->

數字部分更改位置
-------------------------------------------------------------------------
背景右下語法：
<STYLE type="text/css">
<!--
BODY {BACKGROUND: url("圖片網址") fixed no-repeat right bottom
}
-->
</STYLE>

-------------------------------------------------------------------------
背景左下語法：
<STYLE type="text/css">
<!--
BODY {BACKGROUND: url("圖片網址") fixed no-repeat left bottom
}
-->
</STYLE>

-------------------------------------------------------------------------
背景左上語法：
<STYLE type="text/css">
<!--
BODY {BACKGROUND: url("圖片網址") fixed no-repeat left top
}
-->
</STYLE>

-------------------------------------------------------------------------
背景右上語法：
<STYLE type="text/css">
<!--
BODY {BACKGROUND: url("圖片網址") fixed no-repeat right top
}
-->
</STYLE>

-------------------------------------------------------------------------
背景透明語法：
<style type=text/css>
<!--
body,table,img
{filter:Alpha(opacity=70,enabled=70)}
-->
</STYLE>
數字部分更改透明比率

-------------------------------------------------------------------------
隨機背景：
<script language=javascript>
var pic=new Array(6)
pic[0]="圖片網址"
pic[1]="圖片網址"
pic[2]="圖片網址"
pic[3]="圖片網址"
pic[4]="圖片網址"
pic[5]="圖片網址"
var newdate=new Date()
var getpic=newdate.getSeconds()%pic.length
document.write('<body background='+pic[getpic]+' bgproperties=fixed>')
</script>
紅色部分更改圖片數目
以及增加新連結一個＊

-------------------------------------------------------------------------
背景圖外圍模糊：
<style>
body{
background-image : url(背景圖網址);filter:Alpha(Opacity=99,style=2);
background-repeat : repeat;
background-attachment : fixed;}
</style>
語法中　Opacity=90　是模糊度style=2　２是圓形　３是方形

-------------------------------------------------------------------------
圖片語法：

貼圖語法：
<img src="圖片網址">

-------------------------------------------------------------------------
貼圖連結語法：
<a href="連結網址" target=_blank><img src="圖片網址" border="0"></a>

-------------------------------------------------------------------------
連結語法：

連結變色：
<style type="text/css">
<!--
a:link,a:visited{text-decoration:none;color:色馬;}
a:hover{color:色馬;}
-->
</style>

-------------------------------------------------------------------------
連結底色：
<STYLE>
A:HOVER{font-weight : normal;background-color :色馬;}
BODY{text-decoration : none;}
A{text-decoration : none;}
-->
</STYLE>

-------------------------------------------------------------------------
連結點線：
<style type=text/css>
<!--
a:link {color:色馬;
text-decoration:none;
}
a:hover {color:色馬;
text-decoration:none;
border-top:dotted 1pt;
border-bottom:dotted 1pt;
}
-->
</STYLE>

-------------------------------------------------------------------------
連結不要底線：
<style type="text/css">
<!--
a{ text-decoration:none; }
-->
</style>

-------------------------------------------------------------------------
連結框線：
<style type=text/css>
<!--
a:hover {
border-top:1px solid 色馬;
border-bottom:1px solid 色馬;
border-left:1px solid 色馬;
border-right:1px solid 色馬;
}
-->
</STYLE>

-------------------------------------------------------------------------
連結下壓：
<STYLE type="text/css">
<!--
A:HOVER{
color :色馬;
text-decoration : none;
visibility : visible;
float : none;
clear : none;
position : relative;
top : +2pt;
left :2pt;
}
-->
</STYLE>

-------------------------------------------------------------------------
表格特效：

全選表格：
<textarea rows="3" onmouseover="this.focus()" onfocus="this.select()" cols="25" name="form" style="border: 1px dotted #8897FB; ; font-family:Verdana; font-size:10 px; color:色馬; background-color:色馬">內容</textarea>

-------------------------------------------------------------------------
透明表格：
<style>
table,tr,td{background-color:Transparent; border=\"色馬\"}
</style>

-------------------------------------------------------------------------
表格外框（虛線）：
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border: 1px dotted 色馬" bordercolor="色馬" width="150" id="AutoNumber1">
<tr>
<td>
<p align="center"><font size="2" color="色馬">內容</font></td>
</tr>
</table>
紅色部分改粗係

-------------------------------------------------------------------------
表格漸變：
<table width=100 height=80 style="filter:Alpha(opacity=70,style=2);">
<tr><td bgcolor=色馬>
Mandy's Room
</td></tr>
</table>
opacity=透明度,style=1(由左到右由深到淺),style=2(由外到內由淺到深),style=3(由四邊向內由淺到深)bgcolor=背景顏色
-------------------------------------------------------------------------
視窗特效：

無工具視窗：
<a href="javascript://" onClick="window.open('../apeb_gift/apeboard_plus.cgi','PinkyNature',
'menubar=no,status=no,scrollbars=yes,
top=200,left=200,toolbar=no,width=500,height=450')">
連結字樣</a>
紅色部分：視窗寬高

-------------------------------------------------------------------------
公告視窗：
<SCRIPT Language="JavaScript">
config='toolbar=no,location=no,status=no,menubar=no,width=200,height=150'
config += 'scrollbars=no,resizable=no'
wel = window.open ("","welcome",config)
wel.document.write('<script language="javascript">');
wel.document.write('setTimeout(');
wel.document.write('"self.close()');
wel.document.write(';",5000)');
wel.document.write('</');
wel.document.write('script>');
wel.document.write('<body bgcolor=色馬>');
wel.document.write('<center><h5>內容</h5></center>');
wel.document.write('<center><h5>內容</h5></center>');
wel.document.write('</body>');
</SCRIPT>
tips : h5是字體大少,可以自行改成h1-h6,h6為最少,h1為最大
wel.document.write('<body bgcolor=背景顏色>');
wel.document.write('<center><h5>輸入文字</h5></center>');
wel.document.write('<center><h5>可自行複製加行的</h5></center>');

-------------------------------------------------------------------------
加框視窗：
<SCRIPT Language="JavaScript">
if (document.all){
with (window.document.body.style){
borderWidth=5;
borderStyle='solid';
bordercolor='色馬;
}
}
</SCRIPT>
borderWidth=外框寬度;

-------------------------------------------------------------------------
內襄視窗（作網站用）：
<IFRAME SRC="連結網站" width=300 height=200 frameborder="0"></IFRAME>
綠色部分為寬 藍色部分為高

-------------------------------------------------------------------------
字體特效：

字色統一：
<style type=text/css>
<!--
font{color:色馬;/*字色統一*/}
-->
</style>

-------------------------------------------------------------------------
字有陰影：
<table border="0">
<tr>
<td style="FILTER: dropshadow(color=#cccccc,offx=2,offy=2);color:色馬">
內容

</td></tr></table>

-------------------------------------------------------------------------
版面字體：
<font face="字體">

-------------------------------------------------------------------------
版面字體大小：
<style>
body,tr,td{font:10pt 字體名稱}
</style>
紅色部分請自行修改大小

-------------------------------------------------------------------------
隱藏特效：

剔選隱藏：
<input type=radio onclick="yes.style.display=yes.style.display=='none'?'':'none'" value="open"> ← 連結時內容
<div id=yes style="display:none">

這堨i放任何東西

</div>

-------------------------------------------------------------------------
按字隱藏：
<a style="cursor:sw-resize" onclick="yes.style.display=yes.style.display=='none'?'':'none'">連結時內容</a>
<div id=yes style="display:none">

這堨i放任何東西

</div>

-------------------------------------------------------------------------
增加隱藏：
若想放多一個、必需在語法紅色位置 yes 中
將三個 yes 名字、改做另一 ( 英文 ) 名字才可<input type=radio onclick="yes.style.display=yes.style.display
=='none'?'':'none'" value="on"> ← ＊ 剔選隱藏連結 ＊
<div id=yes style="display:none">
這堨i放任何東西</div><input type=radio onclick="hung.style.display=hung.style.display
=='none'?'':'none'" value="on"> ← ＊ 剔選隱藏連結 ＊
<div id=hung style="display:none">
這堨i放任何東西</div><input type=radio onclick="hello.style.display=hello.style.display
=='none'?'':'none'" value="on"> ← ＊ 剔選隱藏連結 ＊
<div id=hello style="display:none">
這堨i放任何東西</div>

-------------------------------------------------------------------------
滑鼠語法：

鎖右鍵（無對話框彈出）：
<body oncontextmenu="window.event.returnValue=false">
-------------------------------------------------------------------------
鎖右鍵（有對話框彈出）：
<script language="JavaScript"><!--
if (navigator.appName.indexOf("Internet Explorer") != -1)
document.onmousedown = noSourceExplorer;
function noSourceExplorer(){if (event.button == 2 | event.button == 3)
{
alert("內容");}}
// -->
</script>
隔行請使用\n

-------------------------------------------------------------------------
音樂：

背景音樂：
<bgsound src="音樂網址" loop="-1">

-------------------------------------------------------------------------
隨機撥放音樂：
<SCRIPT Language="JavaScript">
tips = new Array(4);
tips[0] = "音樂網址";
tips[1] = "音樂網址";
tips[2] = "音樂網址";
tips[3] = "音樂網址";index = Math.floor(Math.random() * tips.length);
document.write("<EMBED SRC=" + tips[index] + " autostart=true width=0 height=0 loop=true hidden=TRUE></EMBED>");
</SCRIPT>
藍色部分可增加音樂數目

-------------------------------------------------------------------------
隨機撥放音樂（有撥放器）：
<SCRIPT LANGUAGE="JavaScript">
var random=Math.floor(5*Math.random()+1)
var str
if (random==1){music="音樂網址"; str="歌名";}
if (random==2){music="音樂網址"; str="歌名";}
if (random==3){music="音樂網址"; str="歌名";}
if (random==4){music="音樂網址"; str="歌名";}
if (random==5){music="音樂網址"; str="歌名";}
document.write('<embed src='+music+' width=280 height=44 loop=true autostart=true controls=smallconsole><br>')
var random=document.write("<font size=3 color=色馬>內容　→</font><font size=3 color=色馬>　"+str+" </font>")
</SCRIPT>
紅色部分＊改撥放器大小　綠色部分改字體大小

-------------------------------------------------------------------------
音樂盒：
<bgsound id=bs><select onChange="bs.src=this.value" name="select" class="w" size="1"style="background-color:背景色馬">
<option>內容</option>
<option value="網址">歌名
<option value="網址">歌名
</select>

每加一首音樂　在適當位置加以下

　<option value="網址">歌名

-------------------------------------------------------------------------
捲軸語法：

捲軸語法：
<STYLE type="text/css">
BODY {scrollbar-highlight-color: blue;
scrollbar-face-color: ORANGE;
scrollbar-shadow-color: YELLOW;
scrollbar-3dlight-color: white;
scrollbar-arrow-color: red;
scrollbar-track-color: yellow;
scrollbar-darkshadow-color: purple;}</STYLE>
第一色是：捲軸邊頂色
第二色是：拉的位置中間顏色
第三是：捲軸底邊色
第四是：捲軸上邊最邊色
第五是：三角形箭咀色
第六是：捲軸底色
第七是：最底邊邊色

-------------------------------------------------------------------------
變色捲軸：
<script language="javascript1.2">
function clrBar(line,face){
with(document.body.style){
scrollbarDarkShadowcolor=line;
scrollbar3dLightcolor=line;
scrollbarArrowcolor="white";
scrollbarBasecolor=face;
scrollbarFacecolor=face;
scrollbarHighlightcolor=face;
scrollbarShadowcolor=face;
scrollbarTrackcolor="black";
}}function setcolor(){
var w = document.body.clientWidth;
var h = document.body.clientHeight;
var x = event.clientX;
var y = event.clientY;
if(x>w) clrBar("yellow","red");
else clrBar("pink","blue");
}if (document.all){clrBar(null,null);
document.onmousemove=setcolor;
}</script>
滑鼠指捲軸會變色
但不可與任何滑鼠帶字共用
scrollbarArrowcolor="white　三角形箭咀色
scrollbarArrowcolor="black　捲軸底色
("pink","blue"); 是原本色
("yellow","red"); 是指向色

-------------------------------------------------------------------------

游標語法

<style><!--a{cursor:url(游標網址);}body{cursor:url(游標網址);}--></style>

-------------------------------------------------------------------------

CCS用

body{cursor:url(\"游標網址\");}

-------------------------------------------------------------------------

Reference:
回復

使用道具 舉報

返回列表 發新帖
高級模式
B Color Image Link Quote Code Smilies
您需要登錄後才可以回帖 登錄 | 註冊

本版積分規則

Archiver|手機版|彩色筆小沛的知識庫

GMT+8, 2024-12-22 16:18 , Processed in 0.019262 second(s), 18 queries , Gzip On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回復 返回頂部 返回列表