|
|
主页javascript特效19则
|
||||||||||||||||||||||||||||||||||||||||||||||||||||
广告招租，e-mail:yesize@hotmail.com 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> <a href=url1 onmouseOver=img_act(button00) onmouseOut=img_inact(button00)> <img src=image1.gif name=button00 border=0 WIDTH=50 HEIGHT=27> </a> <a href=url2 onmouseOver=img_act(button01) onmouseOut=img_inact(button01)> <img src=image2.gif name=button01 border=0 WIDTH=50 HEIGHT=27> </a> <a href=hahatest.htm onmouseOver=img_act(button02) onmouseOut=img_inact(button02)> <img src=image3.gif name=button02 border=0 WIDTH=50 HEIGHT=27> </a> </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 init(){ if (navigator.appName == Netscape) { layerStyleRef=layer.; layerRef=document.layers; styleSwitch=; }else{ layerStyleRef=layer.style.; layerRef=document.all; styleSwitch=.style; } } //以上这段使script适合于不同的浏览器解释 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()> <!--置入图层--> <!--layer 1--> <div id=layer1 > <IMG SRC=layer1.jpg WIDTH=100 HEIGHT=50 BORDER=0><BR> 这是图层一 </div> <!--layer 2--> <div id=layer2 > <IMG SRC=layer2.jpg WIDTH=100 HEIGHT=50 BORDER=0><BR> 这是图层二 </div> <!--layer 3--> <div id=layer3 > <IMG SRC=layer3.jpg WIDTH=100 HEIGHT=50 BORDER=0><BR> 这是图层三 </div> <!--置入控制区位置--> <div id=loopControls > <a href=javascript:showNextLayer()>向后浏览</a> <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> <hr width=100%> <SCRIPT LANGUAGE=JavaScript> <!-- {rainbow(-->用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> <!-- //定义一个声音播放控制的function, 需注意Netscape和IE对script的解释各不相同 function MM_controlSound(sndAction,sndObj) { if (eval(sndObj) != null) { if (navigator.appName==Netscape) eval(sndObj+((sndAction==stop)?.stop():.play(false))); else if (eval(sndObj+.FileName)) eval(sndObj+((sndAction==stop)?.stop():.run())); } } //--> </script> </head> <body> <!-- 开始控制声音播放 --> <embed name=MM_controlSound1 src=sound.wav loop=false autostart=false mastersound hidden=true width=0 height=0></embed> <!-- 用onMouseOver控制声音播放 --> <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=返回到前一页 onclick=history.go(-1);return true;></p> </form> 14 窗口自动上卷 <head>中加入以下代码： <script language=JavaScript> <!-- var position = 0; function scroller() { if (position !=700 ) { position++; scroll(0,position); clearTimeout(timer); var timer = setTimeout(scroller(),50); timer; } } // --> </script> 再在BODY中加上onload=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 变脸 <form name=myForm> <p><input type=text name=input value=嘿,你好. size=20> <input type=button value=点我一下，看看输入框中有什么变化 onclick=document.myForm.input.value=:)> </form> 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>
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||
加入最爱
热门小游戏分类 
