2007年12月14日 星期五

javascript常用代碼

控制橫向和縱向滾動條的顯隱？
＜body style="overflow-y:hidden"＞ 去掉x軸
＜body style="overflow-x:hidden"＞ 去掉y軸
＜body scroll="no"＞不顯

--------------------------------------------------------------------------------
表格變色
＜TD #FFFFFF'"
onmouseout="this.style.backgroundColor=''"
style="CURSOR: hand"＞
--------------------------------------------------------------------------------
禁止複製，鼠標拖動選取
＜body ondragstart=window.event.returnValue=false oncontextmenu=window.event.returnValue=false onselectstart=event.returnValue=false＞
--------------------------------------------------------------------------------
普通iframe頁面
＜iframe src="main.htm" width="450" height="287" scrolling="Auto" frameborder="0"＞＜/iframe＞

--------------------------------------------------------------------------------
iframe自適應高度
＜iframe src="index.asp" frameborder=false scrolling="auto" width="100%" height="100%" frameborder=no pindex'].style.height=pindex.document.body.scrollHeight" ＞＜/iframe＞
--------------------------------------------------------------------------------
IE地址欄前換成自己的圖標&可以在收藏夾中顯示出你的圖標
＜link rel="Shortcut Icon" href="favicon.ico"＞
＜link rel="Bookmark" href="favicon.ico"＞
--------------------------------------------------------------------------------
字號縮放
越來越多的人長時間的泡網，眼鏡的普及率也越來越高，讓文字大點，讓更多的用戶看的更清楚。
＜script type="text/javascript"＞
function doZoom(size)
{document.getElementById('zoom').style.fontSize=size+'px';}
＜/script＞
＜span ＞需要指定大小的文字＜/span＞
＜a href=""＞大＜/a＞ ＜a href=""＞中＜/a＞ ＜a href=""＞小＜/a＞
--------------------------------------------------------------------------------
select擋住div的解決方法
在div裡加入下面的代碼，根據需要調整就可以了。
＜iframe src="" scrolling="no" frameborder="0" style="z-index:-1;; top:5px; left:2px;width:168;height:100px;"＞
＜/iframe＞

--------------------------------------------------------------------------------
iframe(嵌入式幀)自適應高度
填寫的嵌入地址一定要和本頁面在同一個站點上，否則會提示「拒絕訪問！」。對跨域引用有權限問題，請查閱其他資料。
＜iframe src="gbook/index.asp" scrolling=no width="100%" height="100%" frameborder=no guestbook'].style.height=guestbook.document.body.scrollHeight"＞＜/iframe＞
--------------------------------------------------------------------------------
跳轉菜單新窗口
＜select ＞
＜option value="http://www.microsoft.com/ie"＞ Internet Explorer＜/option＞
＜option value="http://www.microsoft.com"＞ Microsoft Home＜/option＞
＜option value="http://msdn.microsoft.com"＞ Developer Network＜/option＞
＜/select＞
--------------------------------------------------------------------------------
flash透明選項
＜param value="transparent"＞
--------------------------------------------------------------------------------

添加到收藏夾和設為首頁
＜a href=# url(#default#homepage)';this.setHomePage('http://www.makewing.com/lanren/');"＞設為首頁＜/a＞

＜a href=""＞收藏本站＜/a＞


--------------------------------------------------------------------------------
記錄並顯示網頁的最後修改時間
＜script language=JavaScript＞
document.write("最後更新時間: " + document.lastModified + "")
＜/script＞
--------------------------------------------------------------------------------
節日倒計時
＜Script Language="JavaScript"＞
　　 var timedate= new Date("October 1,2002");
　　 var times= "國慶節";
　　 var now = new Date();
　　 var date = timedate.getTime() - now.getTime();
　　 var time = Math.floor(date / (1000 * 60 * 60 * 24));
　　 if (time ＞= 0)
　　 document.write( "現在離"+times+"還有: "+time +"天")
＜/Script＞
--------------------------------------------------------------------------------
加在HEAD裡
禁止緩存
＜meta http-equiv="Expires" CONTENT="0"＞
＜meta http-equiv="Cache-Control" CONTENT="no-cache"＞
＜meta http-equiv="Pragma" CONTENT="no-cache"＞

--------------------------------------------------------------------------------
讓IFRAME框架內的文檔的背景透明
＜iframe src="about:＜body style='background:transparent'＞" allowtransparency＞＜/iframe＞
--------------------------------------------------------------------------------
打開窗口即最大化
＜script language="JavaScript"＞
＜!-- Begin
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
// End --＞
＜/script＞
--------------------------------------------------------------------------------
加入背景音樂
＜bgsound src="mid/windblue[1].mid" loop="-1"＞ 只適用於IE
＜embed src="music.mid" autostart="true" loop="true" hidden="true"＞ 對Netscape ,IE 都適用
--------------------------------------------------------------------------------
滾動
＜marquee direction=up height=146 scrollAmount=2＞滾動信息
＜/marquee＞
--------------------------------------------------------------------------------
防止點擊空鏈接時，頁面往往重置到頁首端
代碼「
--------------------------------------------------------------------------------
文字或圖片彈出指定大小的窗口
在body中加入
＜script language="JavaScript" type="text/JavaScript"＞
function MM_openBrWindow(theURL,winName,features) {window.open(theURL,winName,features);}
＜/script＞
彈出代碼
＜a href="#" target="_self" windows01.htm','','width=550,height=380')" width="550" height="380" border="0"＞圖片或文字＜/a＞


--------------------------------------------------------------------------------
flash按鈕加鏈接
on (press) {
getURL("http://www.makewing.com","_blank");
}
--------------------------------------------------------------------------------
跳轉頁面代碼
＜meta http-equiv="refresh" content="5;url=http://www.makewing.com"＞
--------------------------------------------------------------------------------
細線分隔線
＜hr noshade size=0 color=#C0C0C0＞
--------------------------------------------------------------------------------
網頁中的自動換行
＜td style="word-break:break-all"＞就搞定了。
完整的是
style="table-layout: fixed;WORD-BREAK: break-all; WORD-WRAP: break-word"
--------------------------------------------------------------------------------
消除ie6自動出現的圖像工具欄，設置 GALLERYIMG屬性為false或no .
＜IMG SRC="mypicture.jpg" HEIGHT="100px" WIDTH="100px" GALLERYIMG="no"＞
--------------------------------------------------------------------------------
禁止頁面正文內容被選取
＜body oncontextmenu="return false" ondragstart="return false" onselectstart ="return false" oncopy="document.selection.empty()" onbeforecopy="return
false"＞

--------------------------------------------------------------------------------
不能點右鍵，不用CTRL+A，不能複製作!
＜body oncontextmenu="window.event.returnValue=false"
onkeypress="window.event.returnValue=false"
onkeydown="window.event.returnValue=false"
onkeyup="window.event.returnValue=false"
ondragstart="window.event.returnValue=false"
onselectstart="event.returnValue=false"＞
＜/body＞
--------------------------------------------------------------------------------
IE瀏覽器支持一個 Body 屬性 bgproperties，它可以讓背景不滾動:
＜Body Background="圖片文件" bgproperties="fixed"＞
--------------------------------------------------------------------------------
隨機變換背景圖像（一個可以刷新心情的特效）
＜Script Language="JavaScript"＞
　　 image = new Array(4); //定義image為圖片數量的數組
　　 image [0] = 'tu0.gif' //背景圖像的路徑
　　 image [1] = 'tu1.gif'
　　 image [2] = 'tu2.gif'
　　 image [3] = 'tu3.gif'
　　 image [4] = 'tu4.gif'
　　 number = Math.floor(Math.random() * image.length);
　　 document.write("＜BODY BACKGROUND="+image[number]+"＞");
＜/Script＞

--------------------------------------------------------------------------------
flash載入影片
on (release)
{
loadMovie("1-01.swf", "_root.loaderclip");
}
--------------------------------------------------------------------------------
圖片表單按鈕
＜form method="post" action=""＞
＜img src="login.gif" width="62" height="22" /＞
＜/form＞
--------------------------------------------------------------------------------
左右陰影背景的CSS定義方法
body {
text-align:center;
background-repeat: repeat-y;
background-;
background-image: url(../images/bg.jpg);
}
--------------------------------------------------------------------------------
劃過鏈接 手型鼠標
style="cursor:hand"
--------------------------------------------------------------------------------
如何關閉層
＜div ＞＜/div＞
＜a href="#" none'"＞關閉層＜/a＞
--------------------------------------------------------------------------------
關閉窗口的腳本
＜a href=;[關閉窗口]＜/a＞
--------------------------------------------------------------------------------
如果文字過長,則將過長的部分變成省略號顯示
＜DIV STYLE="width: 120px; height: 50px; border: 1px solid blue;overflow: hidden; text-overflow:ellipsis"＞
＜NOBR＞就是比如有一行文字，很長，表格內一行顯示不下.＜/NOBR＞
＜/DIV＞
--------------------------------------------------------------------------------
進入主頁後自動最大化
＜script＞
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
＜/script＞

--------------------------------------------------------------------------------
凹陷文字
＜div style="width:300px;padding:20px;overflow:hidden;word-wrap:break-word;word-break:break:all; font-size:12px; line-height:18px; background-color:#eeeeee;"＞
＜font disabled＞
怎麼樣，我凹下去了吧？＜br＞
你不想試試嗎？＜br＞
＜a href="http://www.lenvo.cn/"＞www.lenvo.cn＜/a＞＜/font＞
＜/div＞
--------------------------------------------------------------------------------
運行代碼框
＜script＞
function Preview()
{var TestWin=open('');
TestWin.document.write(code.value);}
＜/script＞
＜textarea cols=60 rows=15＞＜/textarea＞
＜br＞
＜button ＞運行＜/button＞
--------------------------------------------------------------------------------
給表格做鏈接
＜table width="100%" http://www.makewing.com/', '_blank')" style="CURSOR:hand"＞
＜tr＞
＜td height="100" bgcolor="f4f4f4"＞ ＜/td＞
＜/tr＞
＜/table＞
--------------------------------------------------------------------------------
讓彈出窗口總是在最上面
＜body ＞
--------------------------------------------------------------------------------
CSS文字陰影
.shadowfont{FILTER: dropshadow(color=#666666, offx=1, offy=1, positive=1); FONT-FAMILY: "細明體"; FONT-SIZE: 9pt;COLOR: #ffffff;}
--------------------------------------------------------------------------------
後退&關閉窗口
後退：＞關閉：;
--------------------------------------------------------------------------------
表格透明
style="FILTER: alpha(opacity=72)"
--------------------------------------------------------------------------------
如何避免別人把你的網頁放在框架中
＜script language=「javascript」＞＜!--if (self!=top){top.location=self.location;} --＞＜ /script＞
--------------------------------------------------------------------------------
Alt和Title的區別
alt 用來給圖片來提示的。Title用來給鏈接文字或普通文字提示的。

＜a href="#" Title="給鏈接文字提示"＞文字＜/a＞
＜p Title="給鏈接文字提示"＞文字＜/p＞

＜img src="圖片鏈接" alt="給圖片提示"＞

--------------------------------------------------------------------------------
所有的javascript的調用儘量採取外部調用
＜SCRIPT LANGUAGE="javascript" ＞＜/SCRIPT＞
--------------------------------------------------------------------------------
鏈接到
response.redirect"login.asp"
location.href="xx.asp"
onClick="window.location='login.asp'"
onClick="window.open('')"


--------------------------------------------------------------------------------
基本鏈接樣式
a:link 表示鏈接的樣式
a:active 表示當前活動連接的樣式
a:hover 表示鼠標劃過時的樣式
a:visited 表示已經訪問過的連接的樣式

"link-visited-hover-active" 簡記為 "lvha" 即 "love"+"hate"


--------------------------------------------------------------------------------
在同一頁面設置不同文字鏈接效果的樣式
＜style type="text/css"＞
.green {COLOR: #309633}
.green A:link {COLOR: #309633; TEXT-DECORATION: none}
.green A:visited {COLOR: #309633; TEXT-DECORATION: none}
.green A:hover {COLOR: #309633; TEXT-DECORATION: underline}
.green A:active {COLOR: #309633; TEXT-DECORATION: none}
＜/style＞
＜a href="#" ＞文字＜/a＞

--------------------------------------------------------------------------------
下拉跳轉菜單
＜select style="color:#333"＞
＜option＞----請選擇----＜/option＞
＜option value="http://www.makewing.com/lanren/"＞懶人圖庫＜/option＞
＜option value="http://www.makewing.com/store/"＞MakeWing Store＜/option＞
＜option value="http://www.izhu.com/"＞愛燭網＜/option＞
＜/select＞
--------------------------------------------------------------------------------
首行空兩格
style="text-indent:24px; " 首行縮進建用EM單位。
--------------------------------------------------------------------------------
超出的文字用省略,用…代替
style="width:220px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; "
＜div style="width:200px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; border:1px solid #336699"＞試試看，前面一段我知道，加上...倒還真的不是到，看看效果＜/div＞

【下列文章您可能也有興趣】

於 晚上11:47
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)