論壇特效代碼收集(落伍轉(zhuǎn)發(fā)-不錯(cuò))
更新時(shí)間:2006年12月02日 00:00:00 作者:
1.overflow內(nèi)容溢出時(shí)的設(shè)置(設(shè)定被設(shè)定對(duì)象是否顯示滾動(dòng)條)
overflow-x水平方向內(nèi)容溢出時(shí)的設(shè)置
overflow-y垂直方向內(nèi)容溢出時(shí)的設(shè)置
以上三個(gè)屬性設(shè)置的值為visible(默認(rèn)值)、scroll、hidden、auto。
2.scrollbar-3d-light-color立體滾動(dòng)條亮邊的顏色(設(shè)置滾動(dòng)條的顏色)
scrollbar-arrow-color上下按鈕上三角箭頭的顏色
scrollbar-base-color滾動(dòng)條的基本顏色
scrollbar-dark-shadow-color立體滾動(dòng)條強(qiáng)陰影的顏色
scrollbar-face-color立體滾動(dòng)條凸出部分的顏色
scrollbar-highlight-color滾動(dòng)條空白部分的顏色
scrollbar-shadow-color立體滾動(dòng)條陰影的顏色
我們通過幾個(gè)實(shí)例來講解上述的樣式屬性:
1.讓瀏覽器窗口永遠(yuǎn)都不出現(xiàn)滾動(dòng)條
沒有水平滾動(dòng)條
<body style="overflow-x:hidden">
沒有垂直滾動(dòng)條
<body style="overflow-y:hidden">
沒有滾動(dòng)條
<body style="overflow-x:hidden;overflow-y:hidden">或<body
style="overflow:hidden">
2.設(shè)定多行文本框的滾動(dòng)條
沒有水平滾動(dòng)條
<textarea style="overflow-x:hidden"></textarea>
沒有垂直滾動(dòng)條
<textarea style="overflow-y:hidden"></textarea>
沒有滾動(dòng)條
<textarea style="overflow-x:hidden;overflow-y:hidden"></textarea>
或<textarea style="overflow:hidden"></textarea>
3.設(shè)定窗口滾動(dòng)條的顏色
設(shè)置窗口滾動(dòng)條的顏色為紅色<body style="scrollbar-base-color:red">
scrollbar-base-color設(shè)定的是基本色,一般情況下只需要設(shè)置這一個(gè)屬性就可以達(dá)到改變滾動(dòng)條顏色的目的。
加上一點(diǎn)特別的效果:
<body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon">
4.在樣式表文件中定義好一個(gè)類,調(diào)用樣式表。
<style>
.coolscrollbar{scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;}
</style>
這樣調(diào)用:
<textarea class="coolscrollbar"></textarea>
無邊框窗口代碼
//第一步:把如下代碼加入<head></head>區(qū)域中
<script language=javascript>
minimizebar="minimize.gif"; //視窗右上角最小化「按鈕」的圖片
minimizebar2="minimize2.gif"; //滑鼠懸停時(shí)最小化「按鈕」的圖片
closebar="close.gif"; //視窗右上角關(guān)閉「按鈕」的圖片
closebar2="close2.gif"; //滑鼠懸停時(shí)關(guān)閉「按鈕」的圖片
icon="icon.gif"; //視窗左上角的小圖標(biāo)
function noBorderWin(fileName,w,h,titleBg,moveBg,titleColor,titleWord,scr) //定義一個(gè)彈出無邊視窗的函數(shù),能數(shù)意義見下面「參數(shù)說明」,實(shí)際使用見最後的實(shí)例。
/*
------------------參數(shù)說明-------------------
fileName :無邊視窗中顯示的文件。
w :視窗的寬度。
h :視窗的高度。
titleBg :視窗「標(biāo)題欄」的背景色以及視窗邊框顏色。
moveBg :視窗拖動(dòng)時(shí)「標(biāo)題欄」的背景色以及視窗邊框顏色。
titleColor :視窗「標(biāo)題欄」文字的顏色。
titleWord :視窗「標(biāo)題欄」的文字。
scr :是否出現(xiàn)卷軸。取值yes/no或者1/0。
--------------------------------------------
*/
{
var contents="<html>"+
"<head>"+
"<title>"+titleWord+"</title>"+
"<META http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\">"+
"<object id=hhctrl type='application/x-oleobject' classid='clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11'><param name='Command' value='minimize'></object>"+
"</head>"+
"<body topmargin=0 leftmargin=0 scroll=no onselectstart='return false' ondragstart='return false'>"+
" <table height=100% width=100% cellpadding=0 cellspacing=1 bgcolor="+titleBg+" id=mainTab>"+
" <tr height=18 style=cursor:default; onmousedown='x=event.x;y=event.y;setCapture();mainTab.bgColor=\""+moveBg+"\";' onmouseup='releaseCapture();mainTab.bgColor=\""+titleBg+"\";' onmousemove='if(event.button==1)self.moveTo(screenLeft+event.x-x,screenTop+event.y-y);'>"+
" <td width=18 align=center><img height=12 width=12 border=0 src="+icon+"></td>"+
" <td width="+w+"><span style=font-size:12px;color:"+titleColor+";font-family:宋體;position:relative;top:1px;>"+titleWord+"</span></td>"+
" <td width=14><img border=0 width=12 height=12 alt=最小化 src="+minimizebar+" onmousedown=hhctrl.Click(); onmouseover=this.src='"+minimizebar2+"' onmouseout=this.src='"+minimizebar+"'></td>"+
" <td width=13><img border=0 width=12 height=12 alt=關(guān)閉 src="+closebar+" onmousedown=self.close(); onmouseover=this.src='"+closebar2+"' onmouseout=this.src='"+closebar+"'></td>"+
" </tr>"+
" <tr height=*>"+
" <td colspan=4>"+
" <iframe name=nbw_v6_iframe src="+fileName+" scrolling="+scr+" width=100% height=100% frameborder=0></iframe>"+
" </td>"+
" </tr>"+
" </table>"+
"</body>"+
"</html>";
pop=window.open("","_blank","fullscreen=yes");
pop.resizeTo(w,h);
pop.moveTo((screen.width-w)/2,(screen.height-h)/2);
pop.document.writeln(contents);
if(pop.document.body.clientWidth!=w||pop.document.body.clientHeight!=h) //如果無邊視窗不是出現(xiàn)在純粹的IE視窗中
{
temp=window.open("","nbw_v6");
temp.close();
window.showModalDialog("about:<"+"script language=javascript>window.open('','nbw_v6','fullscreen=yes');window.close();"+"</"+"script>","","dialogWidth:0px;dialogHeight:0px");
pop2=window.open("","nbw_v6");
pop2.resizeTo(w,h);
pop2.moveTo((screen.width-w)/2,(screen.height-h)/2);
pop2.document.writeln(contents);
pop.close();
}
}
</script>
//第二步:把如下代碼加入<body></body>區(qū)域中
<a href=#none onclick=noBorderWin('rate.htm','400','240','#000000','#333333','#CCCCCC','一個(gè)無邊視窗的測(cè)試?yán)?,'yes');>open〈/a〉
overflow-x水平方向內(nèi)容溢出時(shí)的設(shè)置
overflow-y垂直方向內(nèi)容溢出時(shí)的設(shè)置
以上三個(gè)屬性設(shè)置的值為visible(默認(rèn)值)、scroll、hidden、auto。
2.scrollbar-3d-light-color立體滾動(dòng)條亮邊的顏色(設(shè)置滾動(dòng)條的顏色)
scrollbar-arrow-color上下按鈕上三角箭頭的顏色
scrollbar-base-color滾動(dòng)條的基本顏色
scrollbar-dark-shadow-color立體滾動(dòng)條強(qiáng)陰影的顏色
scrollbar-face-color立體滾動(dòng)條凸出部分的顏色
scrollbar-highlight-color滾動(dòng)條空白部分的顏色
scrollbar-shadow-color立體滾動(dòng)條陰影的顏色
我們通過幾個(gè)實(shí)例來講解上述的樣式屬性:
1.讓瀏覽器窗口永遠(yuǎn)都不出現(xiàn)滾動(dòng)條
沒有水平滾動(dòng)條
<body style="overflow-x:hidden">
沒有垂直滾動(dòng)條
<body style="overflow-y:hidden">
沒有滾動(dòng)條
<body style="overflow-x:hidden;overflow-y:hidden">或<body
style="overflow:hidden">
2.設(shè)定多行文本框的滾動(dòng)條
沒有水平滾動(dòng)條
<textarea style="overflow-x:hidden"></textarea>
沒有垂直滾動(dòng)條
<textarea style="overflow-y:hidden"></textarea>
沒有滾動(dòng)條
<textarea style="overflow-x:hidden;overflow-y:hidden"></textarea>
或<textarea style="overflow:hidden"></textarea>
3.設(shè)定窗口滾動(dòng)條的顏色
設(shè)置窗口滾動(dòng)條的顏色為紅色<body style="scrollbar-base-color:red">
scrollbar-base-color設(shè)定的是基本色,一般情況下只需要設(shè)置這一個(gè)屬性就可以達(dá)到改變滾動(dòng)條顏色的目的。
加上一點(diǎn)特別的效果:
<body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon">
4.在樣式表文件中定義好一個(gè)類,調(diào)用樣式表。
<style>
.coolscrollbar{scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;}
</style>
這樣調(diào)用:
<textarea class="coolscrollbar"></textarea>
無邊框窗口代碼
//第一步:把如下代碼加入<head></head>區(qū)域中
<script language=javascript>
minimizebar="minimize.gif"; //視窗右上角最小化「按鈕」的圖片
minimizebar2="minimize2.gif"; //滑鼠懸停時(shí)最小化「按鈕」的圖片
closebar="close.gif"; //視窗右上角關(guān)閉「按鈕」的圖片
closebar2="close2.gif"; //滑鼠懸停時(shí)關(guān)閉「按鈕」的圖片
icon="icon.gif"; //視窗左上角的小圖標(biāo)
function noBorderWin(fileName,w,h,titleBg,moveBg,titleColor,titleWord,scr) //定義一個(gè)彈出無邊視窗的函數(shù),能數(shù)意義見下面「參數(shù)說明」,實(shí)際使用見最後的實(shí)例。
/*
------------------參數(shù)說明-------------------
fileName :無邊視窗中顯示的文件。
w :視窗的寬度。
h :視窗的高度。
titleBg :視窗「標(biāo)題欄」的背景色以及視窗邊框顏色。
moveBg :視窗拖動(dòng)時(shí)「標(biāo)題欄」的背景色以及視窗邊框顏色。
titleColor :視窗「標(biāo)題欄」文字的顏色。
titleWord :視窗「標(biāo)題欄」的文字。
scr :是否出現(xiàn)卷軸。取值yes/no或者1/0。
--------------------------------------------
*/
{
var contents="<html>"+
"<head>"+
"<title>"+titleWord+"</title>"+
"<META http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\">"+
"<object id=hhctrl type='application/x-oleobject' classid='clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11'><param name='Command' value='minimize'></object>"+
"</head>"+
"<body topmargin=0 leftmargin=0 scroll=no onselectstart='return false' ondragstart='return false'>"+
" <table height=100% width=100% cellpadding=0 cellspacing=1 bgcolor="+titleBg+" id=mainTab>"+
" <tr height=18 style=cursor:default; onmousedown='x=event.x;y=event.y;setCapture();mainTab.bgColor=\""+moveBg+"\";' onmouseup='releaseCapture();mainTab.bgColor=\""+titleBg+"\";' onmousemove='if(event.button==1)self.moveTo(screenLeft+event.x-x,screenTop+event.y-y);'>"+
" <td width=18 align=center><img height=12 width=12 border=0 src="+icon+"></td>"+
" <td width="+w+"><span style=font-size:12px;color:"+titleColor+";font-family:宋體;position:relative;top:1px;>"+titleWord+"</span></td>"+
" <td width=14><img border=0 width=12 height=12 alt=最小化 src="+minimizebar+" onmousedown=hhctrl.Click(); onmouseover=this.src='"+minimizebar2+"' onmouseout=this.src='"+minimizebar+"'></td>"+
" <td width=13><img border=0 width=12 height=12 alt=關(guān)閉 src="+closebar+" onmousedown=self.close(); onmouseover=this.src='"+closebar2+"' onmouseout=this.src='"+closebar+"'></td>"+
" </tr>"+
" <tr height=*>"+
" <td colspan=4>"+
" <iframe name=nbw_v6_iframe src="+fileName+" scrolling="+scr+" width=100% height=100% frameborder=0></iframe>"+
" </td>"+
" </tr>"+
" </table>"+
"</body>"+
"</html>";
pop=window.open("","_blank","fullscreen=yes");
pop.resizeTo(w,h);
pop.moveTo((screen.width-w)/2,(screen.height-h)/2);
pop.document.writeln(contents);
if(pop.document.body.clientWidth!=w||pop.document.body.clientHeight!=h) //如果無邊視窗不是出現(xiàn)在純粹的IE視窗中
{
temp=window.open("","nbw_v6");
temp.close();
window.showModalDialog("about:<"+"script language=javascript>window.open('','nbw_v6','fullscreen=yes');window.close();"+"</"+"script>","","dialogWidth:0px;dialogHeight:0px");
pop2=window.open("","nbw_v6");
pop2.resizeTo(w,h);
pop2.moveTo((screen.width-w)/2,(screen.height-h)/2);
pop2.document.writeln(contents);
pop.close();
}
}
</script>
//第二步:把如下代碼加入<body></body>區(qū)域中
<a href=#none onclick=noBorderWin('rate.htm','400','240','#000000','#333333','#CCCCCC','一個(gè)無邊視窗的測(cè)試?yán)?,'yes');>open〈/a〉
相關(guān)文章
JavaScript實(shí)現(xiàn)父子dom同時(shí)綁定兩個(gè)點(diǎn)擊事件,一個(gè)用捕獲,一個(gè)用冒泡時(shí)執(zhí)行順序的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)父子dom同時(shí)綁定兩個(gè)點(diǎn)擊事件,一個(gè)用捕獲,一個(gè)用冒泡時(shí)執(zhí)行順序的方法,涉及javascript事件的觸發(fā)與執(zhí)行原理及相關(guān)操作技巧,需要的朋友可以參考下2017-03-03JavaScript必看的10道面試題總結(jié)(推薦)
JavaScript 已經(jīng)成為全棧開發(fā)技能的基石,在全棧開發(fā)面試中都會(huì)不可避免地涉及到與 JavaScript 有關(guān)的問題。這篇文章主要給大家介紹了關(guān)于JavaScript必看的10道面試題,需要的朋友可以參考下2021-05-05javascript如何計(jì)算數(shù)組中某值的出現(xiàn)次數(shù)
這篇文章主要介紹了javascript如何計(jì)算數(shù)組中某值的出現(xiàn)次數(shù)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01javascript中關(guān)于類型判斷的一些疑惑小結(jié)
這篇文章主要給大家介紹了關(guān)于javascript中關(guān)于類型判斷的一些疑惑,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-10-10