特效代码集

最新推荐文章于 2021-02-03 15:42:51 发布

gztoby

最新推荐文章于 2021-02-03 15:42:51 发布

阅读量4.4k

点赞数

分类专栏： -> 编程其他文章标签： javascript function border object iframe div

本文链接：https://blog.csdn.net/gztoby/article/details/138510

版权

-> 编程其他专栏收录该内容

18 篇文章 0 订阅

订阅专栏

滚动条

Code:

[Copy to clipboard]

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>

无边框窗口代码
制作无边框页面的代码

Code:

[Copy to clipboard]

//第一步:把如下代码加入<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' οndragstart='return false'>"+
" <table height=100% width=100% cellpadding=0 cellspacing=1 bgcolor="+titleBg+" id=mainTab>"+
" <tr height=18 style=cursor:default; οnmοusedοwn='x=event.x;y=event.y;setCapture();mainTab.bgColor=/""+moveBg+"/";' οnmοuseup='releaseCapture();mainTab.bgColor=/""+titleBg+"/";' οnmοusemοve='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+" οnmοusedοwn=hhctrl.Click(); οnmοuseοver=this.src='"+minimizebar2+"' οnmοuseοut=this.src='"+minimizebar+"'></td>"+
" <td width=13><img border=0 width=12 height=12 alt=关闭 src="+closebar+" οnmοusedοwn=self.close(); οnmοuseοver=this.src='"+closebar2+"' οnmοuseοut=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 οnclick=noBorderWin('rate.htm','400','240','#000000','#333333','#CCCCCC','一个无边视窗的测试例子','yes');>open〈/a〉

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

网页内容顶格
横向不间断滚动广告

Code:

[Copy to clipboard]

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

Code:

[Copy to clipboard]

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

Code:

[Copy to clipboard]

Code:

[Copy to clipboard]

Java代码容错

Code:

[Copy to clipboard]

flash透明

Code:

[Copy to clipboard]

状态栏 +在body中就ok

1.页面自动刷新：把如下代码加入<head>区域中

Code:

[Copy to clipboard]

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

2.页面自动跳转：把如下代码加入<head>区域中

Code:

[Copy to clipboard]

asp 随机图片显示百变美女asp代码

Code:

[Copy to clipboard]

<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<%
'----------------------------------------------------------------------------------------
'转发时请保留此声明信息,这段声明不并会影响你的显示速度!
'************************* 随机图片显示 ****************************
'代码设计:野汉子
'使用实例:img.asp?list=图片存放目录
'网站:http://yjj.con.cn
'声明:版权没有,随意使用!^_^不过如果各位不介意给我做个小小的连接,在下将感激不尽!
'----------------------------------------------------------------------------------------
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)%>

鼠标经过显示不同图片

Code:

[Copy to clipboard]

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

a.src = "../../../yanyanyan/me/me/4.jpg";
b.src = "../../../yanyanyan/me/me/3.jpg";
c.src = "../../../yanyanyan/me/me/2.jpg";

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

</head>

<body>

<table width="407" height="201" border=0 cellpadding="0" cellspacing="0" bgcolor="#333333">
<tr><td width="110" align="center">
<p>
<a href="#" οnmοuseοver="doButtons('a')">PHOTO 1</a><p>

<a href="#" οnmοuseοver="doButtons('b')">PHOTO 2</a><p>

<a href="#" οnmοuseοver="doButtons('c')">PHOTO 3</a><p>
<td width="297"><img name=picture src="../../../yanyanyan/me/me/4.jpg" width=294 height=345 border=0></td>
</tr>
</table>

Code:

[Copy to clipboard]

标题拦特效

Code:

[Copy to clipboard]

<SCRIPT>

//change title text to your own
var titletext="Welcome to Dynamic Drive"
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.οnlοad=οnlοad=welcometext
</SCRIPT>

文字不同颜色闪烁

<span style=behavior:url(font.htc)>这里是要闪烁的字颜色可以很多</span>

font.htc 代码

Code:

[Copy to clipboard]

*************************************************
<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.wooshow.com/dw/demo/ln/1.htm

fade.js代码

Code:

[Copy to clipboard]

/*************

**** <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是这样的：

Code:

[Copy to clipboard]

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

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

Code:

[Copy to clipboard]

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

1.inc/main.js末尾增加如下代码：

//渐隐渐现函数
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);
}
}
2.index模板html(7):

function showboard

.......

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,'');
}

......

增加以上红色部分。

任何连接滑过就点击

Code:

[Copy to clipboard]

不错的向上滚动广告代码

演示 http://gong.88qq.com/88qq_468-60-lun.htm

Code:

[Copy to clipboard]

<SCRIPT language=javascript1.2>

</SCRIPT>
<ILAYER id=main bgcolor="&{scrollerbgcolor};"
height="&{scrollerheight};" width="&{scrollerwidth};"><LAYER id=first
width="&{scrollerwidth};" top="1" left="0">
<SCRIPT language=javascript1.2>
if (document.layers)
document.write(slideimages[0])
</SCRIPT>
</LAYER><LAYER id=second width="&{scrollerwidth};" top="0" left="0"
visibility="hide">
<SCRIPT language=javascript1.2>
if (document.layers)
document.write(slideimages[1])
</SCRIPT>
</LAYER></ILAYER>
<SCRIPT language=javascript1.2>

</SCRIPT>

点广告才可以下载的代码

这样写点了广告就在新页面自动下载了

Code:

[Copy to clipboard]

站长站弹出广告代码

Code:

[Copy to clipboard]

<SCRIPT language=javascript>window.showModelessDialog("http://www.chinaz.com/A-Ddi.htm","CHINAZDindexP","center:no;dialogLeft:5px;dialogTop:5px;scroll:0;status:0;help:0;resizable:0;dialogWidth:305px;dialogHeight:325px")</SCRIPT>

总在最下的广告代码

Code:

[Copy to clipboard]

<script language="javascript">

</script>
<span id="bar" style="position:absolute; left:68px; top:455px; width: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://remotion.myetang.com">网页特效梦工厂</a></td>
<td > <a href="http://www.skycn.com">天空下载</a></td>
</tr></table></span>

定时更换超级连接的代码

Code:

[Copy to clipboard]

<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://remotion.myetang.com'>网页特效梦工厂</a>"
news[1]="<a href='http://www.skycn.com'>天空下载</a>"
news[2]="<a href='http://www.delphibbs.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.οnresize=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>

星空背景

Code:

[Copy to clipboard]

<SCRIPT language=javascript>

</SCRIPT>

时间特效。js读取时间

Code:

[Copy to clipboard]

<script language="javascript">

</script>

鼠标经过图片加亮显示

Code:

[Copy to clipboard]

<SCRIPT language="javascript">

</SCRIPT>

<img src="image/flag.gif"
style="filter:alpha(opacity=20)"
onMouseOver="makevisible(this,0)"
onMouseOut="makevisible(this,1)">

鼠标经过图片晃动效果

Code:

[Copy to clipboard]

<style>
.shakeimage{
position:relative
}
</style>

<img src=image/family.jpg class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this)">

<script language="javascript1.2">
var rector=3
var stopit=0
var a=1

function init(which){
stopit=0
shake=which
shake.style.left=0
shake.style.top=0
}

function rattleimage(){
if ((!document.all&&!document.getElementById)||stopit==1)
return
if (a==1){
shake.style.top=parseInt(shake.style.top)+rector
}
else if (a==2){
shake.style.left=parseInt(shake.style.left)+rector
}
else if (a==3){
shake.style.top=parseInt(shake.style.top)-rector
}
else{
shake.style.left=parseInt(shake.style.left)-rector
}
if (a<4)
a++
else
a=1
setTimeout("rattleimage()",50)
}

function stoprattle(which){
stopit=1
which.style.left=0
which.style.top=0
}

</script>

图片幻灯片显示效果

Code:

[Copy to clipboard]

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>图片幻灯片显示效果</title>
<SCRIPT LANGUAGE="javascript">

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 3;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'images/1.jpg'
Pic[1] = 'images/2.jpg'
Pic[2] = 'images/3.jpg'
Pic[3] = 'images/4.jpg'
Pic[4] = 'images/5.jpg'
Pic[5] = 'images/6.jpg'
Pic[6] = 'images/7.jpg'
Pic[7] = 'images/8.jpg'
Pic[8] = 'images/9.jpg'
Pic[9] = 'images/10.jpg'
Pic[10] = 'images/11.jpg'
Pic[11] = 'images/12.jpg'
Pic[12] = 'images/13.jpg'
Pic[13] = 'images/14.jpg'
Pic[14] = 'images/15.jpg'
Pic[15] = 'images/16.jpg'
Pic[16] = 'images/17.jpg'
Pic[17] = 'images/18.jpg'
Pic[18] = 'images/19.jpg'
Pic[19] = 'images/20.jpg'
Pic[20] = 'images/21.jpg'
Pic[21] = 'images/22.jpg'
Pic[22] = 'images/23.jpg'
Pic[23] = 'images/24.jpg'
Pic[24] = 'images/25.jpg'
Pic[25] = 'images/26.jpg'
Pic[26] = 'images/27.jpg'
Pic[27] = 'images/28.jpg'
Pic[28] = 'images/29.jpg'
Pic[29] = 'images/30.jpg'
Pic[30] = 'images/31.jpg'

// do not edit anything below this line
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
</script>
<script language="javascript" type="text/javascript">

</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" onLoad="runSlideShow()">
<div id="testimage" style="position:absolute;visibility:visible;top:0px;left:0px; width:622px; height:493px;">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="550" height="400">
<param name="movie" value="flash/0541.swf">
<param name="quality" value="high"><param name="wmode" value="transparent">
<embed src="flash/0541.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="550" height="400"></embed>
  </object>
</div>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU">
<img src="images/1.jpg" name='SlideShow' width=388 height=415>
</td>
</tr>
</table>
</body>
</html>

超级连接很酷的变色

<script src="fade.js"></script>
fade.js

Code:

[Copy to clipboard]

/*************
**** <config>
**/
startColor = "#000000"; // MouseOut link color
endColor = "#FFFFFF"; // MouseOver link color

stepIn = 20; // delay when fading in
stepOut = 23; // 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();

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){
var srcElement = event.srcElement;
if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1))
fade(startColor,endColor,srcElement.uniqueID,stepIn);
}
}

function domouseout() {
if (document.all){
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;
}

最大化/最小化/关闭窗口代码集锦

在制作网页时,我们常常需要用到这类代码,很简单也很实用

最大化窗口：
<OBJECT id="max" type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<PARAM name="Command" value="Maximize"></OBJECT>
<a href="#1" οnclick="max.Click()">最大化</a>

最小化窗口：
<object id=minimize type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<param name="Command" value="Minimize"></object>
<a href="#1" οnclick="minimize.Click()">最小化</a>

关闭窗口：
<a href="javascript:window.close()">关闭窗口</a>

将内嵌式广告隐藏

一些免费主页空间的提供商开始将弹出式广告条改为内嵌式广告条了，笔者对这种内嵌式广告条进行分析，写出一段javascript代码，通过这段代码可以将内嵌式广告隐藏起来：

Code:

[Copy to clipboard]

＜div id=CTsidebar style=″Z-INDEX:15;visibility:hidden″＞
＜script language=″javascript″＞
showSideBarCol
showHideSidebar
function showSideBarCol 
var mstrSideBarCol
mstrSideBarCol = '＜div id=sidecol＞'
ifnavigator.appName ==″Netscape″ 
document.write

else 
document.write（'＜div＞'+ mstrSideBarCol +'＜/div＞'）;

＜/script＞
＜/div＞

　　这段代码主要通过建立一个层，使用visility变量设置为hidden隐藏），用javascript将广告隐藏起来，将代码插在＜boby＞＜/boby＞之间（最好插在＜/boby＞之前），保存上传，打开你的主页，广告条是不是不见了!

离开时自动提示设为首页

Code:

[Copy to clipboard]

用MYIE等多窗口浏览器进入后会弹出

是弹出一个新IE窗口来的，它的实现代码很简单
看
http://www.feing.com/qq37600367xongdi/yjj/lunwen/index.htm

Code:

[Copy to clipboard]

然后在http://www.feing.com/qq37600367xongdi/yjj/tan.htm这个页面放置这个代码：

Code:

[Copy to clipboard]

这样弹出的多页面窗口又自动关闭了，根本看不出来……

图片向下闪缩放的效果

先保存这个为xxx.js文件放在页面的 <head></head>里

Code:

[Copy to clipboard]

然都在图片后面加上下面的蓝色代码
<img src="banner_13.jpg" width="760" height="120" style="border-color:#000000;border-width:1px;border-style:solid;filter: blur(add=1, direction=100, strength=2)" onMouseOut="off(this)" onMouseOver="on(this)" >

鼠标放在图片上才显示色彩平时是灰色的图片

<a href="index.aspx"><img id="ibHome" οnmοuseοver="removemask(this)" style="FILTER: gray alpha(opacity=50)"
οnmοuseοut="addmask(this)" src="macnew/ihome.gif" title="进入首页<br>[Beta home]" Border="0"></a>

Code:

[Copy to clipboard]

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

Code:

<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">123456</a>
<a href="" class="a2">000000</a>
</center>
</body>
</html>