您的位置:首页精文荟萃软件资讯 → 主页javascript特效19则

主页javascript特效19则

时间:2004/10/7 18:18:00来源:本站整理作者:蓝点我要评论(0)

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分别引入应用,但在标准应用中有相当大的分歧,往往必须分别为它们俩分别编写不同的H TML页面,同时兼顾不支持动态网页的浏览器。用下面的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 鼠标感应动画标签 
  
制作鼠标感应动画标签    

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

.src = on;} } 

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

.src = off; } } 

// --> 

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

再将下列代码加入和之间你需要的地方:    

 

  

   

   

   

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

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

  按次序在同一位置变换图象(适用于4.0版本的浏览器)  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 

   #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;} 

 

  

   
 这是图层一  

  
 这是图层二  

  
 这是图层三  

  向后浏览 

 向前浏览 
  

  

10 彩虹特效 
  

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

彩虹特效   近来在网上见到一个非常棒的javascrip特效,用来创建彩虹字,其效果完全可以和javaapplet媲美,而且解释速度更快,我将源代码附录在下面:   用javascrip创建的彩虹字     

  

 


   用javascrip创建的彩虹字   
   

11 声音播放控制 
  

用javascript进行声音播放控制   用javascript进行声音播放控制      

     当鼠标移到这儿时会播放声音   

  

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 超级返回 
  
 与  之间必要的地方加入如下代码: 
 

 
 

14 窗口自动上卷 
  
中加入以下代码:    再在BODY中加上onload="scroller()"即可以实现了 

15 跑马灯 
  
跑马灯(1) 

  跑马灯  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 ); }        

16 变脸 
 

   

17 引用外部javascript 
引用外部javascript   

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

19 将本站加入收藏夹 
将本站加入收藏夹 

  

相关阅读 Mac访问Windows共享文件夹Windows 7正版系统验证方法windows 8.1系统版本号查看方法Windows 8.1系统电话激活时无法输入微软返回代码解决方法Windows 8如何调整屏幕分辨率windows8.1磁盘占用100%解决方法Mac双系统如何删除Boot Camp安装的Windows分区Apple教你如何在Mac 上运行 Windows

文章评论
发表评论

热门文章 360随身Wifi 4G版什么怎样提高origin下载速百度收购PPS已敲定!3

最新文章 伊森卡特的消失通关流千牛怎么设置自动回复 增加新功能,S版Moto G喜获Android 4.4.4更鸡肋?谷歌Play Music发布更新版本千牛怎么设置自动回复​千牛云盘怎么用

人气排行 xp系统停止服务怎么办?xp系统升级win7系统方office2013安装教程图解:手把手教你安装与同步推是什么?同步推使用方法介绍QQ2012什么时候出 最新版下载VeryCD镜像网站逐个数,电驴资料库全集利用PHP程序设定防止MySQL注入或HTML表单滥web服务器和应用服务器的区别安卓android 系统支持什么视频格式