网页特效代码收集整理 (转贴)

目录：

滚动条
无边框窗口代码
让新窗口总在一个窗口弹出
网页内容顶格
横向不间断滚动广告
点击图片弹出无边自定义窗口
无边框对话框窗口可以在myie中弹出
Java代码容错
flash透明
同页面的超级连接不同颜色
页面自动刷新
页面自动跳转
asp 随机图片显示
鼠标经过显示不同图片
标题拦特效
文字不同颜色闪烁
让连接不停的变色
要使背景图案不随文字“滚动”的CSS是这样的
页面过滤渐变加到<head>中
鼠标移动到图标产生的渐变效果
任何连接滑过就点击
点广告才可以下载的代码
总在最下的广告代码
定时更换超级连接的代码
星空背景
---------------------------------------
滚动条

1．overflow内容溢出时的设置（设定被设定对象是否显示滚动条）
overflow-x水平方向内容溢出时的设置
overflow-y垂直方向内容溢出时的设置
以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。

2．scrollbar-3d-light-color立体滚动条亮边的颜色（设置滚动条的颜色）
scrollbar-arrow-color上下按钮上三角箭头的颜色
scrollbar-base-color滚动条的基本颜色
scrollbar-dark-shadow-color立体滚动条强阴影的颜色
scrollbar-face-color立体滚动条凸出部分的颜色
scrollbar-highlight-color滚动条空白部分的颜色
scrollbar-shadow-color立体滚动条阴影的颜色

我们通过几个实例来讲解上述的样式属性：
1.让浏览器窗口永远都不出现滚动条
没有水平滚动条
<body style="overflow-x:hidden">
没有垂直滚动条
<body style="overflow-y:hidden">
没有滚动条
<body style="overflow-x:hidden;overflow-y:hidden">或<body
style="overflow:hidden">

2.设定多行文本框的滚动条

没有水平滚动条
<textarea style="overflow-x:hidden"></textarea>

没有垂直滚动条
<textarea style="overflow-y:hidden"></textarea>

没有滚动条
<textarea style="overflow-x:hidden;overflow-y:hidden"></textarea>
或<textarea style="overflow:hidden"></textarea>

3.设定窗口滚动条的颜色
设置窗口滚动条的颜色为红色<body style="scrollbar-base-color:red">
scrollbar-base-color设定的是基本色，一般情况下只需要设置这一个属性就可以达到改变滚动条颜色的目的。
加上一点特别的效果：
<body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon">

4.在样式表文件中定义好一个类，调用样式表。
<style>
.coolscrollbar{scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;}
</style>
这样调用：
<textarea class="coolscrollbar"></textarea>

无边框窗口代码

//第一步:把如下代码加入<head></head>区域中
<script language=javascript>
minimizebar="minimize.gif"; //视窗右上角最小化「按钮」的图片
minimizebar2="minimize2.gif"; //滑鼠悬停时最小化「按钮」的图片
closebar="close.gif"; //视窗右上角关闭「按钮」的图片
closebar2="close2.gif"; //滑鼠悬停时关闭「按钮」的图片
icon="icon.gif"; //视窗左上角的小图标

function noBorderWin(fileName,w,h,titleBg,moveBg,titleColor,titleWord,scr) //定义一个弹出无边视窗的函数，能数意义见下面「参数说明」，实际使用见最後的实例。
/*
------------------参数说明-------------------
fileName ：无边视窗中显示的文件。
w　　　　：视窗的宽度。
h　　　　：视窗的高度。
titleBg ：视窗「标题栏」的背景色以及视窗边框颜色。
moveBg ：视窗拖动时「标题栏」的背景色以及视窗边框颜色。
titleColor ：视窗「标题栏」文字的颜色。
titleWord ：视窗「标题栏」的文字。
scr ：是否出现卷轴。取值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=关闭 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) //如果无边视窗不是出现在纯粹的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>区域中
<a href=#none onclick=noBorderWin('rate.htm','400','240','#000000','#333333','#CCCCCC','一个无边视窗的测试例子','yes');>open〈/a〉

让新窗口总在一个窗口弹出

新开一个的窗口（name=screen）
再在这个窗口内打开链接（target=screen）

网页内容顶格

横向不间断滚动广告

点击图片弹出无边自定义窗口

无边框对话框窗口可以在myie中弹出

Java代码容错

flash透明

同页面的超级连接不同颜色

<html>
<head>
<style>
a.a1:link {
    font-size: 9pt;
    color: #000000;
    text-decoration: none;
}
a.a1:visited {
    font-size: 9pt;
    color: #999999;
    text-decoration: none;
}
a.a1:hover {
    font-size: 9pt;
    color: #FF6600;
    position: relative;
    top: 1px;

}
a.a1:active {
    font-size: 9pt;
    color: #333333;
    text-decoration: none;
}
a.a2:link {
    font-size: 9pt;
    color: #00ff00;
    }
a.a2:hover {
    font-size: 10pt;
    color: #FF3300;
    position: relative;
    top: 5px;

}
a.a2:active {
    font-size: 9pt;
    color: #fffff;
    text-decoration: none;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>

<body>
<center>
<br>
<br>
<br>
<br>
<a href="" class="a1">连接一</a>
<a href="" class="a2">连接二</a>
</center>
</body>
</html>

页面自动刷新

其中20指每隔20秒刷新一次页面

页面自动跳转

asp 随机图片显示

<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<%
'----------------------------------------------------------------------------------------
'转发时请保留此声明信息,这段声明不并会影响你的显示速度!
'*************************    随机图片显示   ****************************
'代码设计:kenvi
'使用实例:img.asp?list=图片存放目录
'网站:http://www.jicama.cn
'演示:http://bbs.pjhome.net/viewthread.php?tid=8472&extra=&page=1
'声明:版权没有,随意使用!^_^不过如果各位不介意给我做个小小的连接,在下将感激不尽!
'----------------------------------------------------------------------------------------
Function AllPath()
    Dim Domain,GFilePath
    Domain    = Request.ServerVariables("SERVER_NAME")
    GFilePath = Request.ServerVariables("PATH_INFO")
    GFilePath = lcase(left(GFilePath,instrRev(GFilePath,"/")))
    AllPath    = "http://"&Domain&GFilePath
End Function

Function ShowFileList(folderspec)
    Dim Path,objFSO,objFolder,count,objFile,nume,S
    Path = Server.MapPath(folderspec)
    Set objFSO = Server.CreateObject("Scripting.FileSystemObject")
    If objFSO.FolderExists(Path) Then
       Set objFolder = objFSO.GetFolder(Path)
       count = 0
       For Each objFile in objFolder.Files
           count = count+1
       Next
       randomize
       nume = Int((count*rnd)+1)
       S = 0
       ShowFileList = ""
       For Each objFile in objFolder.Files
       S = S + 1
         If S = nume Then
         ShowFileList = objFile.Name
         Exit For
         End If
       Next
       Set objFolder = Nothing
    Else
    ShowFileList = "NO"
    End If
    Set objFSO = Nothing
End Function

Dim list,filename,address,str

list = trim(Request.QueryString("list"))
if list = "" then
   Response.write "本页需要正确参数引入,您缺少相关的参数！正确格式如下："&AllPath&"img.asp?list=图片存放目录"
   Response.End()
end if

filename = ShowFileList("./"&list&"/")
if filename = "NO" then
   Response.write "您指定的目录<b>"&list&"</b>不存在，请重新指定！"
   Response.End()
end if

if filename = "" then
   Response.write "您指定的目录<b>"&list&"</b>没有相关的图片文件存在，请重新指定！"
   Response.End()
end if

str = right(filename,3)
if str<>"jpg" and str<>"gif" then
filename = "erro.gif"
end if

address = AllPath&list&"/"
address = address&filename
%>
<%Response.redirect(address)%>

鼠标经过显示不同图片

<SCRIPT LANGUAGE="JavaScript">
var a = new Image();
var b = new Image();
var c = new Image();

a.src = "logo/23.jpg";
b.src = "logo/29.jpg";
c.src = "logo/43.jpg";

function doButtons(picimage) {
eval("document['picture'].src = " + picimage + ".src");
}
</script>

</head>

<body>

<table width="130" height="130" border=0 cellpadding="0" cellspacing="0" bgcolor="#333333">
<tr><td width="130" align="center">
<p>
<a href="#" onmouseover="doButtons('a')">PHOTO 1</a><p>

<a href="#" onmouseover="doButtons('b')">PHOTO 2</a><p>

<a href="#" onmouseover="doButtons('c')">PHOTO 3</a><p>
<td width="130"><img name=picture src="logo/34.jpg" width=130 height=130 border=0></td>
</tr>
</table>

标题拦特效

<SCRIPT>

//change title text to your own
    var titletext="Welcome to Kenvi's Blog"
    var thetext=""
    var started=false
    var step=0
    var times=1

    function welcometext()
    {
      times--
      if (times==0)
      {
        if (started==false)
        {
          started = true;
          document.title = titletext;
          setTimeout("anim()",1);
        }
        thetext = titletext;
      }
    }

    function showstatustext(txt)
    {
      thetext = txt;
      setTimeout("welcometext()",4000)
      times++
    }

    function anim()
    {
      step++
      if (step==7) {step=1}
      if (step==1) {document.title='>==='+thetext+'===<'}
      if (step==2) {document.title='=>=='+thetext+'==<='}
      if (step==3) {document.title='>=>='+thetext+'=<=<'}
      if (step==4) {document.title='=>=>'+thetext+'<=<='}
      if (step==5) {document.title='==>='+thetext+'=<=='}
      if (step==6) {document.title='===>'+thetext+'<==='}
      setTimeout("anim()",200);
    }

if (document.title)
window.onload=onload=welcometext
</SCRIPT>

文字不同颜色闪烁

<span style=behavior:url(font.htc)>点击运行看看! 这里是要闪烁的字颜色可以很多</span>
font.htc 代码:

程序代码
*************************************************
<PUBLIC:COMPONENT URN="rainbow" name="darainbow()"/>
<PUBLIC:ATTACH  EVENT = "oncontentready" ONEVENT ="beginIt()"/>
<SCRIPT language="JAVASCRIPT">
var Kill_ID=null;
var internalValue;
var originalValue;
function putValue(){
        element.innerHTML=internalValue;
        encapsulate();
        startSwirl();
}
function eventHandler(){
        clearInterval(Kill_ID);
        internalValue=element.value;
        element.detachEvent("onpropertychange",eventHandler);
        if(event.propertyName=="value"){
                element.innerHTML=internalValue;
                putValue();
        } else startSwirl();
        element.attachEvent("onpropertychange",eventHandler);
}
function swirl(){
        var I;
        I=ran(internalValue.length-1,0);
        if(element.children(I) != null)element.children(I).style.color=randomColor();
}
function startSwirl(){
        if (element.swirlInterval == null)
                element.swirlInterval=50;
        if ((internalValue!=null) && (element.swirlInterval!=0))
                Kill_ID=setInterval(swirl,element.swirlInterval);
}
function encapsulate(){
        var I;
        var tempStr="";
        for (I=0; I < internalValue.length; I++){
                        tempStr += "<SPAN style=\"color:"+randomColor()+"\">" + internalValue.substr(I,1) + "</SPAN>";
                }
        innerHTML=tempStr;
}
function ran(upperbound, lowerbound){
        return(parseInt((upperbound - lowerbound + 1) * Math.random() + lowerbound));
}
function randomColor(){
        var R=ran(255,0);
        var G=ran(255,0);
        var B=ran(255,0);
        R=R.toString(16);
        G=G.toString(16);
        B=B.toString(16);
        if (R.length==1)R="0"+R;
        if (G.length==1)G="0"+G;
        if (B.length==1)B="0"+B;
        return("#"+R+G+B);
}
function beginIt(){
        internalValue=element.value;
        originalValue=element.innerHTML;
        if (internalValue==null)
                internalValue=element.innerHTML;
        putValue();
        element.attachEvent("onpropertychange",eventHandler);
}
function clearIt(){
        clearInterval(Kill_ID);
        element.detachEvent("onpropertychange",eventHandler);
        element.innerHTML=originalValue;
}
</script>
***************************************

让连接不停的变色

<SCRIPT language=Javascript src="fade.js"></SCRIPT>
演示:http://www.jicama.cn/blog/dome/fade.html
fade代码：
程序代码
/************* **** <config>
**/
startColor = "#4D4D4D"; // 颜色可以改
endColor = "#ffffff"; // MouseOver link color
stepIn = 10; // delay when fading in
stepOut = 20; // delay when fading out
/* ** set to true or false; true will
** cause all links to fade automatically
***/
autoFade = true;
/*
** set to true or false; true will cause all CSS
** classes with "fade" in them to fade onmouseover ***/

sloppyClass = true;
/** **** </config> **************/
/************* **** <install> ** ** **** </install> **************/
hexa = new makearray(16);
for(var i = 0; i < 10; i++)
hexa[i] = i;
hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
hexa[13]="d"; hexa[14]="e"; hexa[15]="f";
document.onmouseover = domouseover;
document.onmouseout = domouseout;
startColor = dehexize(startColor.toLowerCase());
endColor = dehexize(endColor.toLowerCase());
var fadeId = new Array();
var timerID = 0;
var theElement,theTagName,theClassName,theUniqueID
function dehexize(Color){
var colorArr = new makearray(3);
for (i=1; i<7; i++){
for (j=0; j<16; j++){
if (Color.charAt(i) == hexa[j]){
if (i%2 !=0)
colorArr[Math.floor((i-1)/2)]=eval(j)*16;
else
colorArr[Math.floor((i-1)/2)]+=eval(j);
}
}
}
return colorArr;
function domouseover() {
if(document.all) {
clearTimeout(timerID);
theElement = event.srcElement;
theTagName = theElement.tagName;
theClassName = theElement.className;
theUniqueID = theElement.uniqueID;
if ((theTagName == "A" && autoFade) || theClassName == "fade" || (sloppyClass && theClassName.indexOf("fade") != -1)) {
//alert(theElement);
fade(startColor,endColor,theUniqueID,stepIn);
timerID = setTimeout('pulsedown()',500);
}
}
}

function pulseup() {
if(document.all) {
clearTimeout(timerID);
if ((theTagName == "A" && autoFade) || theClassName == "fade" || (sloppyClass && theClassName.indexOf("fade") != -1)) {
//alert(theElement);
fade(startColor,endColor,theUniqueID,stepIn);
timerID = setTimeout('pulsedown(theElement)',500);
}
}
}

function pulsedown(theElement) {
if (document.all) {
clearTimeout(timerID);
if ((theTagName == "A" && autoFade) || theClassName == "fade" || (sloppyClass && theClassName.indexOf("fade") != -1)) {
//alert(theElement);
fade(endColor,startColor,theUniqueID,stepOut);
timerID = setTimeout('pulseup()',500);
}
}
}

function domouseout() {
if (document.all) {
clearTimeout(timerID);
var srcElement = event.srcElement;
if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1))
fade(endColor,startColor,srcElement.uniqueID,stepOut);
}
}

function makearray(n) {
this.length = n;
for(var i = 1; i <= n; i++)
this[i] = 0;
return this;
}

function hex(i) {
if (i < 0)
return "00";
else if (i > 255)
return "ff";
else
return "" + hexa[Math.floor(i/16)] + hexa[i%16];}
function setColor(r, g, b, element) {
var hr = hex(r); var hg = hex(g); var hb = hex(b);
element.style.color = "#"+hr+hg+hb;
}
function fade(s,e, element,step){
var sr = s[0]; var sg = s[1]; var sb = s[2];
var er = e[0]; var eg = e[1]; var eb = e[2];
if (fadeId[0] != null && fade[0] != element){
setColor(sr,sg,sb,eval(fadeId[0]));
var i = 1;
while(i < fadeId.length){
clearTimeout(fadeId[i]);
i++;
}
}
for(var i = 0; i <= step; i++) {
fadeId[i+1] = setTimeout("setColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" +
step+ ")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+
")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ "/" +step+ ")),"+element+");",i*step);
}
fadeId[0] = element;
}

要使背景图案不随文字“滚动”的CSS是这样的

〈style type="text/css"〉
〈!--
BODY { background: purple url(bg.jpg);
　　　 background-repeat:repeat-y;
　　　 background-attachment:fixed 　
　　　　}
--〉
〈/style〉

页面过滤渐变加到<head>中

鼠标移动到图标产生的渐变效果

程序代码
//渐隐渐现函数
nereidFadeObjects = new Object();
nereidFadeTimers = new Object();

function nereidFade(object, destOp, rate, delta) {
if (!document.all) {return;}
if (object != "[object]"){
  setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
  return;
}
clearTimeout(nereidFadeTimers[object.sourceIndex]);
diff = destOp-object.filters.alpha.opacity;
direction = 1;
if (object.filters.alpha.opacity > destOp){
  direction = -1;
}
delta=Math.min(direction*diff,delta);
object.filters.alpha.opacity+=direction*delta;
if (object.filters.alpha.opacity != destOp){
  nereidFadeObjects[object.sourceIndex]=object;
  nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
}
}

以上保存为JS作为调用
再在相应的图片代码处添加

程序代码
style="FILTER: alpha(opacity=40)" onMouseOut=nereidFade(this,40,10,10) onMouseOver=nereidFade(this,100,0,10)

例如

程序代码
if (indexIMG!='')
{
  str = str.replace(/{\$indexIMG}/gi,'<table align="left"><tr><td><a href="list.asp?boardid='+BoardID+'"> <img src='+indexIMG+' align="top" border="0" style="FILTER: alpha(opacity=40)" onMouseOut=nereidFade(this,40,10,10) onMouseOver=nereidFade(this,100,0,10) ></a></td><td width="20"></td></tr></table>');
}
else
{
  str = str.replace(/{\$indexIMG}/gi,'');
}

任何连接滑过就点击

点广告才可以下载的代码

总在最下的广告代码

<script language="javascript">

</script>
<span id="bar" style="position:absolute; left:68px; top:455px; 614px; height:45px; z-index:9" >
<table align="center" border="1" hspace="1" cellpadding="1" bordercolor="#000000" bgcolor="#FFFFFF">
<tr align="center">

<td > <a href="http://www.jicama.cn">Kenvi's Blog</a></td>
<td > <a href="http://bbs.jicama.cn">洛城社区</a></td>
</tr></table></span>

定时更换超级连接的代码

<style>

</style>
<div id="tickertape">
<div id="subtickertape" class="subtickertapefont">初始化

</div>
</div>
<script language="JavaScript1.2">

var speed=4500

var news=new Array()
news[0]="<a href='http://www.jicama.cn'>kenvi's blog</a>"
news[1]="<a href='http://www.luocen.com'>洛城社区</a>"
news[2]="<a href='http://www.luocen.com'>洛城社区门户</a>"

i=0
if (document.all)
tickerobject=document.all.subtickertape.style
else
tickerobject=document.tickertape.document
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers)
setTimeout("window.onresize=regenerate",450)
}

function update(){
BgFade(0xff,0xff,0xff, 0x00,0x00,0x00,10);
if (document.layers){
document.tickertape.document.subtickertape.document.write('<span class="subtickertapefont">'+news[i]+'</span>')
document.tickertape.document.subtickertape.document.close()
}
else
document.all.subtickertape.innerHTML=news[i]

if (i<news.length-1)
i++
else
i=0
setTimeout("update()",speed)
}

function BgFade(red1, grn1, blu1, red2,
grn2, blu2, steps) {
sred = red1; sgrn = grn1; sblu = blu1;
ered = red2; egrn = grn2; eblu = blu2;
inc = steps;
step = 0;
RunFader();
}
function RunFader() {
var epct = step/inc;
var spct = 1 - epct;
if (document.layers)
tickerobject.bgColor =
Math.floor(sred * spct + ered *
epct)*256*256 +
Math.floor(sgrn * spct + egrn * epct)*256 +
Math.floor(sblu * spct + eblu * epct);
else
tickerobject.backgroundColor=
Math.floor(sred * spct + ered *
epct)*256*256 +
Math.floor(sgrn * spct + egrn * epct)*256 +
Math.floor(sblu * spct + eblu * epct);
if ( step < inc ) {
setTimeout('RunFader()',50);
}
step++;
}

</script>
</tr></table>

星空背景

<SCRIPT language=JavaScript>

</SCRIPT>

转自：http://www.jicama.cn/blog/article.asp?id=252