主页javascript特效19则

最新推荐文章于 2024-11-14 10:56:19 发布

ZHANGJIZELOVEBJ

最新推荐文章于 2024-11-14 10:56:19 发布

阅读量878

点赞数

文章标签： javascript button function string image hex

主页javascript特效19则

时间：2009-02-19

　　1 不让页面嵌套在其他框架结构里

如果你不想让你的页面被嵌套在其他框架结构里，你可以在你的页面相应位置加入下面几行代码即可。（此处略去相应位置其它HTML代码）

< head > < script language="JavaScript" > if(self!=top){top.location=self.location;} < /script > < /head >

2 不让页面脱离相应的框架结构

如果你不想让你的页面脱离相应的框架结构，也只要在相应页面中加入下面代码。（此处同样略去相应位置其它HTML代码）

< head > < script language="JavaScript" > if(self==top){self.location.href="url";} < /script > < /head >

---- 这里的url应该设置成你网页中定义相应框架结构的页面地址。

3 在新的窗口中打开页面

你还可以设置在新的窗口中打开你的页面，而不是用你的页面替换原有页面。

window.open("url","windowName","windowFeatures")

4 让网页具备浏览器识别适应功能

让网页具备浏览器识别适应功能

---- 随着网络的技术发展，动态网页已被Netscape和Microsoft分别引入应用，但在标准应用中有相当大的分歧，往往必须分别为它们俩分别编写不同的HTML页面，同时兼顾不支持动态网页的浏览器。用下面的JavaScript可以解决这个问题。

< script language="JavaScript" > function testBrowser(){ ie=((navigator.appName=="Microsoft. Internet Explorer")&& (parseInt(navigator.appVision) >=4)) ns=((navigator.appName=="Netscape")&& (parseInt(navigator.appVision) >=4)) if(ie){self.location.href="index_ie.html";} if(ns){self.location.href="index_ns.html";} } < /script > 同时，还必须在该页面的BODY 中还要加入对程序的调用： < body onLoad="testBrowser()" >

---- 这个调用在网页被加载时激活，如果浏览器是IE4.0或更高版本，浏览器就加载相应 index_ie.html；如果浏览器是Netscape 4.0或更高版本，浏览器就加载相应 index_ns.html；如果两种情况都不满足，浏览器就停留在现在的页面。

5 对表单进行校验

< script language="JavaScript" > function checkForm(){ if (document.userInfo.userName.value==""){ alert（“用户名必须输入：”） return false;} if (document.userInfo.userEmail.value.indexOf('@')==-1){ alert（"请输入正确的电子邮件地址！”）； return false;} }< /script > 同时，在表单的提交项中必须加入对该程序的调用： < form action="YOUR_CGI" onSubmit="checkForm()" >

---- 如果还有更多的调查项目，则可以设置更多更严格的校验条件，使你的表单取得更有效更准确的结果。

6 栏目导航

< form name="siteGuide" > < stlect name="siteList" onChange="self.location.href=this.form.siteList.options［ this.form.siteList.selectedIndex］.value" > < option selected value="#" >请选择栏目< /option > < option value="http://www.ciw.com.cn" > 中国计算机报< /option > < option value="http://www.ccw.com.cn" > 计算机世界< /option > < /select > < /form >

---- 这里，我们还可以把JavaScript独立出来作为一个函数进行调用，甚至加以扩展，以实现更多的功能。

7 动态图片广告更换显示

< script language="JavaScript" > function loadBanner(){ setTimer=setTimeout("changeBanner()",5000); listCode=0; listBanner=new Arrey(2) listBanner［0］=new Image(400,40) listBanner［0］.src="banner_0.gif" listBanner［1］=new Image(400,40) listBanner［1］.src="banner_1.gif" } function changeBanner(){ listCode=listCode+1 if(listCode=="2"){listCode=0} bannerSrc="banner_"+listCode+".gif" document.adBanner.src=bannerSrc setTimer=setTimeout("changeBanner()",5000); } function changeLink(){ if(listCode==0){adLink="http://www.netease.com"} if(listCode==1){adLink="http://www.chinabyte.com"} self.location=adLink }< /script > 同时，为了确保效果，建议在网页的 Body中激活相应JavaScript函数。 < body onLoad="LoadBanner()" >

还要在页面相应放置广告图片的地方放置以下代码， < a href="JavaScript:changeLink()" > < img src="banner_o.gif" border="0" name="adBanner" width="400" height="40" alt="动态广告图片" >< /a >

---- 为了适应你的需要，你还可以添加更多的图片项进去，只要调整相应的语句和相应的参数，就可以满足你的更高要求了。

8 鼠标感应动画标签

制作鼠标感应动画标签　 <script LANGUAGE="JavaScript">

j=document.images;

if (j)

{

button00=new Image(); button00.src="image.gif"; button001=new Image(); button001.src="image11.gif"; button01=new Image(); button01.src="image2.gif"; button011=new Image(); button011.src="image21.gif"; button02=new Image(); button02.src="image3.gif"; button021=new Image(); button021.src="image31.gif"; }

function img_act(p) {if (j) {on = eval (p + "1.src"); document<p>.src = on;} }

function img_inact(p) {if (j) {off = eval (p + ".src"); document<p>.src = off; } }

// --></script>

以上首先按顺序定义显示图片和覆盖图片的路径名称,共定义了三对随鼠标接触而变化的图片，其中的imageX.gif即为图片的相对路径。

再将下列代码加入<body>和</body>之间你需要的地方： <table CELLSPACING="0" CELLPADDING="0" WIDTH="1%"> <tr> <td>

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

注释：　这是在href中插入已经定义好的javascript图象变化，而被变化的是有name="buttonxx"的图片，当鼠标上移到图片上是该图片的src就由被定义为buttonxx的src变为被定义为buttonxx+1的src。因此产生了变化效果。

9 按次序在同一位置变换图象

<html> <head> <title>按次序在同一位置变换图象（适用于4.0版本的浏览器）</title> <SCRIPT LANGUAGE="JavaScript"> var totalLayersInLoop=3; 　　　　//上面这句说明总共定义三个图象层，在下面的语句中通过j avascript前后显示不同的层以达到图象变换的效果 var layerNumShowing=1; 　　　　//初始显示第一层

function showPreviousLayer(){ var layerNumToShow=layerNumShowing-1; if (layerNumToShow < 1){layerNumToShow=totalLayersInLoop;} hideLayer(eval('"layer' + layerNumShowing+'"')); showLayer(eval('"layer' + layerNumToShow+'"')); layerNumShowing=layerNumToShow; } 　　　 //以上这段定义一个function，使图象位置向前一层显示

function showNextLayer(){ var layerNumToShow=layerNumShowing+1; if (layerNumToShow > totalLayersInLoop){layerNumToShow=1;} hideLayer(eval('"layer' + layerNumShowing+'"')); showLayer(eval('"layer' + layerNumToShow+'"')); layerNumShowing=layerNumToShow; } 　　　 //以上这段定义一个function，使图象位置向后一层显示

function showLayer(layerName){ eval(layerRef+'<"'+layerName+'">' +styleSwitch+'.visibility="visible"'); } //定义显示图层的function

function hideLayer(layerName){ eval(layerRef+'<"'+layerName+'">' +styleSwitch+'.visibility="hidden"'); } 　　　　//定义隐藏图层的function

</SCRIPT> <STYLE TYPE="text/css">  #layer1 {position: absolute; z-index: 10; visibility: visible; left: 150px; top: 80px;}  #layer2 {position: absolute; z-index: 20; visibility: hidden; left: 150px; top: 80px;}  #layer3 {position: absolute; z-index: 30; visibility: hidden; left: 150px; top: 80px;}  #loopControls {position: absolute; z-index: 40; visibility: visible; left: 20px; top: 20px;}

</STYLE>

</head> <body bgcolor="#000000" link="orange" vlink="tan" text="white" onLoad="init()">

<div id="layer1" > <IMG SRC="layer1.jpg" WIDTH=100 HEIGHT=50 BORDER=0><BR> 这是图层一 </div>

<div id="layer2" > <IMG SRC="layer2.jpg" WIDTH=100 HEIGHT=50 BORDER=0><BR> 这是图层二 </div>

<div id="layer3" > <IMG SRC="layer3.jpg" WIDTH=100 HEIGHT=50 BORDER=0><BR> 这是图层三 </div>

<div id="loopControls" > <a href="javascript:showNextLayer()">向后浏览</a> <BR><br> <a href="javascript:showPreviousLayer()">向前浏览</a>　<BR> </div>

</body> </html>

10 彩虹特效

主持人：Arky：mailto:arky@188.net

彩虹特效　　近来在网上见到一个非常棒的javascrip特效，用来创建彩虹字，其效果完全可以和javaapplet媲美，而且解释速度更快，我将源代码附录在下面： <html> <head> <title>用javascrip创建的彩虹字</title> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=gb2312"> <script language="JavaScript"> <!-- Hide the script from old browsers --

// Michael P. Scholtis (mpscho@planetx.bloomu.edu) // All rights reserved.　January 15, 1996 // You may use this JavaScript example as you see fit, as long as the // information within this comment above is included in your script.

function MakeArray(n){ 　 this.length=n; 　 for(var i=1; i<=n; i++) this［i］=i-1; 　 return this }

hex=new MakeArray(16); hex［11］="A"; hex［12］="B"; hex［13］="C"; hex［14］="D"; hex［15］="E"; hex［16］="F";

function ToHex(x){ 　 var high=x/16; // Changes a int to hex (in the range 0 to 255) 　 var s=high+""; //1 　 s=s.substring(0,2); //2 the combination of these are the same as the trunc function 　 high=parseInt(s,10); //3 　 var left=hex［high+1］; // left part of the hex-value 　 var low=x-high*16; // calculate the rest of the values 　 s=low+""; //1 　 s=s.substring(0,2); //2 the combination of these are the same as the trunc function 　 low=parseInt(s,10); //3 　 var right=hex［low+1］; // right part of the hex-value 　 var string=left+""+right; // add the high and low together 　 return string; }

function rainbow(text){ 　 text=text.substring(3,text.length-4); // gets rid of the HTML-comment-tags 　 color_d1=255; // any value in 'begin' 0 to 255 　 mul=color_d1/text.length; 　 for(i=0;i<text.length;i++){ 　　　color_d1=255*Math.sin(i/(text.length/3)); // some other things you can try>> "=255-mul*i" to fade out, //"=mul*i" to fade in, or try "255*Math.sin(i/(text.length/3))" 　　　color_h1=ToHex(color_d1); 　　　color_d2=mul*i; 　　　color_h2=ToHex(color_d2); 　　　document.write("<FONT COLOR='#FF"+color_h1+color_h2+"'> //"+text.substring(i,i+1)+'</FONT>'); 　 } }

// --End Hiding Here --> </script>

</head> <body bgcolor="ffffff"> <center> <br><br><br> <hr width=100%> <SCRIPT LANGUAGE="JavaScript"> 用javascrip创建的彩虹字<!__");} //--> </SCRIPT> <hr width=100%> </center> </body> </HTML>

11 声音播放控制

用javascript进行声音播放控制 <html> <head> <title>用javascript进行声音播放控制</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script language="JavaScript">  </script> </head>

<body>  <embed name='MM_controlSound1' src='sound.wav' loop=false autostart=false mastersound hidden=true width=0 height=0></embed>  <a href="#" onMouseOver="MM_controlSound('play','document.MM_controlSound1')"> 当鼠标移到这儿时会播放声音</a> </body> </html>

12 按时问好

function SayHello(){ var today = new Date(); var hours = today.getHours(); var minutes = today.getMinutes(); var string = "嗨!您好,现在是: "; string =string+hours+" 点 "+minutes+" 分；"; if(hours==0) alert(string + "已经是午夜零点多了, 哇你的精神好好嗳! .^."); if(hours==1) alert(string + "己经是午夜壹点多啦!还在游荡哪?再不睡,明儿个要钓鱼喽!"); if(hours==2) alert(string + "己经是午夜贰点多了,在找什么东东吗?要不要帮忙?"); if(hours==3) alert(string + "己经是午夜叁点多了喔!还没睡?真是现代网络夜猫子!^_^"); if(hours==4) alert(string + "己经是午夜肆点多了,真不困哪?佩服!佩服!"); if(hours==5) alert(string + "这么早起床? 还是彻夜未眠呀?"); if(hours==6) alert(string + "早晨好! 新的一天又开始啦!"); if(hours==7) alert(string + "早安! 早饭可很重要哦,吃饱没有?"); if(hours>7 && hours<11) alert(string + "早!又是忙碌的一天，祝行事顺利!"); if(hours==11) alert(string + "快中午啦, 饿不饿?可别胡弄自己呀!"); if(hours==12) alert(string + "中午喽!吃饱没有? 是准备'猫一小觉'，还是出去晒晒太阳?"); if(hours>12 && hours<15) alert(string + "下午是最容易犯困的时候，可要提起精神哦。"); if(hours==15) alert(string + "来杯下午茶吧! 休息是为了走更远的路嘛!"); if(hours>15 && hours<18) alert(string + "又开始期待下课/班了吧?不过一定要今日事,今日毕呦!"); if(hours==18) alert(string + "在加班还是休息，身体可是第一位的啊。"); if(hours==19) alert(string + "吃了吗?别忘了抽点时间跟爱人聊聊天!"); if(hours==20) alert(string + "不爱看电视吧? 太闷?来我这里就对啦!"); if(hours>20 && hours<23) alert(string + "晚上好! 是不是开始泡网啦?我这儿是最佳选择!"); if(hours==23) alert(string + "快午夜了, 要不要来块点心；注意身体别太辛苦了?"); } SayHello();

13 超级返回

<body> 与 </body> 之间必要的地方加入如下代码： <form> <p><input type="button" value="返回到前一页" οnclick="history.go(-1);return true;"></p> </form>

14 窗口自动上卷

<head>中加入以下代码： <script language="JavaScript">  </script> 再在BODY中加上οnlοad="scroller()"即可以实现了

15 跑马灯

跑马灯(1)

<HTML> <HEAD> <TITLE>跑马灯</TITLE> <SCRIPT Language="JavaScript"> var msg="欢迎光临本报编辑部"; var interval = 100; seq = 0; function Scroll() { document.tmForm.tmText.value = msg.substring(0, seq+1); seq++; if ( seq >= msg.length ) { seq = 0 }; window.setTimeout("Scroll();", interval ); } </SCRIPT> <BODY OnLoad="Scroll();" > <FORM Name=tmForm> <INPUT Type=Text Name=tmText Size=45> </FORM> </BODY> </HTML>

16 变脸

17 引用外部javascript

引用外部javascript <script language="JavaScript" src="javascript.js"> </script>

18 java图形变量的定义

java图形变量的定义 img = new image(71,21); img.src = "image/home2.gif"

19 将本站加入收藏夹

将本站加入收藏夹 <form> <input TYPE="BUTTON" VALUE="将本站加入收藏夹" onClick="window.external.addFavorite('http://personal.hb.cninfo.net/~hqse','［指南针］贺庆生个人主页')" class="p1"> </form>