45IT.COM- 电脑学习从此开始!
DIY硬件教程攒机经验装机配置
设计Photoshop网页设计特效
系统注册表DOS系统命令其它
存储主板显卡外设键鼠内存
维修显卡CPU内存打印机
WinXPVistaWin7unix/linux
CPU光驱电源/散热显示器其它
修技主板硬盘键鼠显示器光驱
办公ExcelWordPowerPointWPS
编程数据库CSS脚本PHP
网络局域网QQ服务器
软件网络系统图像安全
页面导航: 首页 > 设计学院 > 网页设计 >

主页javascript特效19则 9二)

电脑软硬件应用网 45IT.COM 时间:2005-12-30 19:11 作者:45IT收集

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><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"> <!--   {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://wl4587.126.com/','情缘文学娱乐网')" class="p1"> </form>

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: baidushare.htm
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码:点击我更换图片
推荐知识