注册 登录
编程论坛 WEB前端(UI)

网页特效代码集合,菜鸟必看~~~~~~!

Viking 发布于 2004-11-11 23:02, 53240 次点击

本人新来的版主,为和大家共同创建美好家园,本人决定从明天起每天发一个网页特效代码

希望能帮助菜鸟同志们

敬礼

[此贴子已经被作者于2004-11-15 23:09:49编辑过]

227 回复
#2
好学2004-11-12 06:56

老鸟

#3
yl102004-11-12 18:22
好的,支持你
#4
Viking2004-11-12 21:39

先从最基本开始

鼠标后飘动的字符

<style type="text/css"> .spanstyle { COLOR: #00cccc; FONT-FAMILY: 宋体; FONT-SIZE: 10pt; POSITION: absolute; TOP: -50px; VISIBILITY: visible } </style> <script> var x,y var step=18 var flag=0 var message="★Viking希望能得到你们的支持,谢谢!" message=message.split("") var xpos=new Array() for (i=0;i<=message.length-1;i++) { xpos[i]=-50 } var ypos=new Array() for (i=0;i<=message.length-1;i++) { ypos[i]=-200 } function handlerMM(e){ x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY flag=1 } function www_helpor_net() { if (flag==1 && document.all) { for (i=message.length-1; i>=1; i--) { xpos[i]=xpos[i-1]+step ypos[i]=ypos[i-1] } xpos[0]=x+step ypos[0]=y for (i=0; i<message.length-1; i++) { var thisspan = eval("span"+(i)+".style") thisspan.posLeft=xpos[i] thisspan.posTop=ypos[i] } } else if (flag==1 && document.layers) { for (i=message.length-1; i>=1; i--) { xpos[i]=xpos[i-1]+step ypos[i]=ypos[i-1] } xpos[0]=x+step ypos[0]=y for (i=0; i<message.length-1; i++) { var thisspan = eval("document.span"+i) thisspan.left=xpos[i] thisspan.top=ypos[i] } } var timer=setTimeout("www_helpor_net()",30) } for (i=0;i<=message.length-1;i++) { document.write("<span id='span"+i+"' class='spanstyle'>") document.write(message[i]) document.write("</span>") } if (document.layers){ document.captureEvents(Event.MOUSEMOVE); } document.onmousemove = handlerMM; www_helpor_net(); // --> </script>

[此贴子已经被静夜思于2005-1-4 9:15:57编辑过]

#5
Viking2004-11-12 21:40

去掉链接下划线

<style TYPE="text/css"> <!-- A:link{text-decoration:none} A:visited{text-decoration:none} A:hover {color: #ff00ff;text-decoration:underline} --> </style>

#6
Viking2004-11-12 21:43

状态栏里的欢迎语

<script language="JavaScript"> <!-- function statusMessageObject(p,d) { this.msg = MESSAGE this.out = " " this.pos = POSITION this.delay = DELAY this.i = 0 this.reset = clearMessage } function clearMessage() { this.pos = POSITION } var POSITION = 100 var DELAY = 5 var MESSAGE = "欢迎光临! Welcome to icesboy.91x.net " var scroll = new statusMessageObject() function scroller() { for (scroll.i = 0; scroll.i < scroll.pos; scroll.i++) { scroll.out += " " } if (scroll.pos >= 0) scroll.out += scroll.msg else scroll.out = scroll.msg.substring(-scroll.pos,scroll.msg.length) window.status = scroll.out scroll.out = " " scroll.pos-- if (scroll.pos < -(scroll.msg.length)) { scroll.reset() } setTimeout ('scroller()',scroll.delay) } function snapIn(jumpSpaces,position) { var msg = scroll.msg var out = "" for (var i=0; i<position; i++) {out += msg.charAt(i)} for (i=1;i<jumpSpaces;i++) {out += " "} out += msg.charAt(position) window.status = out if (jumpSpaces <= 1) { position++ if (msg.charAt(position) == ' ') {position++ } jumpSpaces = 100-position } else if (jumpSpaces > 3) {jumpSpaces *= .75} else {jumpSpaces--} if (position != msg.length) { var cmd = "snapIn(" + jumpSpaces + "," + position + ")"; scrollID = window.setTimeout(cmd,scroll.delay); } else { window.status="" jumpSpaces=0 position=0 cmd = "snapIn(" + jumpSpaces + "," + position + ")"; scrollID = window.setTimeout(cmd,scroll.delay); return false } return true } snapIn(100,0); // --> </script>

[此贴子已经被静夜思于2005-1-4 9:16:48编辑过]

#7
Viking2004-11-12 21:45
&lt;span style="CURSOR: hand" onClick="window.external.addFavorite('http://www.','新浪')" title="新浪"&gt;收藏本站&lt;/span&gt;
   
#8
Viking2004-11-12 21:45

加入收藏夹

<span style="CURSOR: hand" onClick="window.external.addFavorite('http://www.sina.com','新浪')" title="新浪">收藏本站</span>

#9
Viking2004-11-12 21:46

设为首页

<span onclick="var strHref=window.location.href;this.style.behavior='url(#default#homepage)';this.setHomePage('你的网址');" style="CURSOR: hand">设为首页</span>

#10
Viking2004-11-12 21:48

网页背景音乐

<EMBED src=http://www.woduhom.com/wfzy/15.mid width=0 height=0 type=audio/mid loop="true" autostart="true" border="0"></EMBED> </FONT>

把蓝色地方换成背景音乐的地址

#11
Viking2004-11-12 21:51

禁右键

<script language="javascript"> function click() { if (event.button==2) { alert('小样,偷想看我东西 。') } } document.onmousedown=click </script>

放入<body>区域中

#12
Viking2004-11-13 21:05

接着昨天

ie按钮总动员 <OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0>  </OBJECT>  <input onclick=document.all.WebBrowser.ExecWB(1,1) type=button value=打开 name=Button1>  <input onclick=document.all.WebBrowser.ExecWB(4,1) type=button value=另存为 name=Button2>  <input onclick=document.all.WebBrowser.ExecWB(10,1) type=button value=属性 name=Button3>  <input onclick=document.all.WebBrowser.ExecWB(6,1) type=button value=打印 name=Button>  <input onclick=document.all.WebBrowser.ExecWB(8,1) type=button value=页面设置 name=Button4>    <input onclick=window.location.reload() type=button value=刷新 name=refresh>  <input onclick="window.external.ImportExportFavorites(true,'');" type=button value=导入收藏夹 name=Button5>  <input onclick="window.external.ImportExportFavorites(false,'');" type=button value=导出收藏夹 name=Button32>  <input onclick="window.external.AddFavorite(location.href, document.title)" type=button value=加入收藏夹 name=Button22>    <input onclick="window.external.ShowBrowserUI('OrganizeFavorites', null)" type=button value=整理收藏夹 name=Submit2>  <input onclick='window.location="view-source:" + window.location.href' type=button value=查看源文件 name=Button7>  <input onclick="window.external.ShowBrowserUI('LanguageDialog', null)" type=button value=语言设置 name=Button6>  <input onclick=history.go(1) type=submit value=前进 name=Submit>  <input onclick=history.go(-1) type=submit value=后退 name=Submit2>

#13
Viking2004-11-13 21:06
radio按钮调
&lt;form&gt;
&lt;div align="center"&gt;&lt;center&gt;&lt;p&gt;本站很好: &lt;input TYPE="radio" NAME="radio" value="谢谢您的鼓励和支持!" onClick="alert(value)"&gt;

本站一般: &lt;input TYPE="radio" NAME="radio" value="我会不断努力的!" onClick="alert(value)"&gt;

本站太差: &lt;input TYPE="radio" NAME="radio" value="具体的意见建议请Email给我,谢谢!" onClick="alert(value)"&gt;
&lt;/p&gt;
&lt;/center&gt;&lt;/div&gt;
&lt;/form&gt;
#14
Viking2004-11-13 21:07
变换连接色和底色 <!--脚本说明: 第一步:把如下代码加入<head>区域中--> <SCRIPT LANGUAGE="javascript"> <!-- Begin function doColor(item, color, bg) { item.style.color = color; // changes text color item.style.backgroundColor = bg; // changes background } function undoColor(item) { item.style.color = "#000000"; // sets color back to black item.style.backgroundColor = ""; // sets background to default } // End --> </script> </HEAD> <!--第二步:在<body>区中加入如下代码--> <a name="link1" href="http://lwjrj.yeah.net/" onmouseover="doColor(link1, 'yellow','black');" onmouseout="undoColor(link1);">心梦在线</a> <p> <a name="link2" href="http://www.javascriptsource.com/" onmouseover="doColor(link2, 'blue','red');" onmouseout="undoColor(link2);">闪客帝国</a>
#15
Viking2004-11-13 21:09
窗口的打开和关闭
&lt;!--脚本说明:
第一步:把如下代码加入&lt;head&gt;区域中--&gt;
&lt;SCRIPT language="javascript"&gt;
&lt;!--
function openclk() {
another=open('test.htm','NewWindow');
}
function closeclk() {
another.close();
}
//--&gt;
&lt;/SCRIPT&gt;
&lt;!--第二步:把如下代码加入&lt;body&gt;区域中--&gt;

&lt;form&gt;
&lt;INPUT TYPE="BUTTON" NAME="open" value="打开一个窗口" onClick="openclk()"&gt;
&lt;BR&gt;
&lt;INPUT TYPE="BUTTON" NAME="close" value="关闭这个窗口" onClick="closeclk()"&gt;
&lt;/form&gt;

#16
yl102004-11-13 22:49
我辛苦啦,
#17
Viking2004-11-13 23:09

yl10 兄是口wu吧,呵呵,没事,咱兄弟虽然是.NET派的,但仍然来捧你场.

#18
zswlove2004-11-14 00:09

好多的特效,斑竹辛苦了

#19
zswlove2004-11-14 00:10

我也来发几个特效

一 、很酷的弹出老人动画

<html> <head> <SCRIPT> <!-- function crml(nid) { try { nid=new ActiveXObject("Agent.Control.2"); nid.Connected = true; nid.Characters.Load(""); return nid; } catch (err) { return false; } } function chplay () { if (ml=crml ("ml")) { var MerlinID; var MerlinACS; Merlin = ml.Characters.Character(MerlinID); Merlin.MoveTo(200,200); Merlin.Show(); Merlin.Play("Explain"); Merlin.Play("Announce"); Merlin.Speak("欢迎你来到free.2259.com电脑频道!"); Merlin.Play("Gestureright"); Merlin.Play("Pleased"); Merlin.Speak("我们的网址:http://free.2259.com";); Merlin.Play("Idle1_1"); Merlin.Hide(); Merlin.MoveTo(600,300); Merlin.Show(); Merlin.Play("Surprised"); Merlin.Speak("2259音乐频道 http://www.2259.com/index.asp";); Merlin.Play("Read"); Merlin.Speak("还多了一个专门的FLASH音乐频道"); Merlin.Play("Read") Merlin.Play("GestureUp"); Merlin.Speak("网址是:Http://flash.2259.com希望大家会喜欢"); Merlin.Play("DontRecognize"); Merlin.Speak("感谢您的到来"); Merlin.Play("DontRecognize"); Merlin.Play("Greet"); Merlin.Speak("提前祝你圣诞快乐!"); Merlin.Play("Greet"); Merlin.Speak("下次再见!"); Merlin.Play("Greet"); Merlin.Hide(); } } //-->   </SCRIPT> <SCRIPT> <!-- chplay() --> </SCRIPT> </head> </html>

[此贴子已经被静夜思于2005-1-4 9:19:08编辑过]

#20
zswlove2004-11-14 00:12
二、结合的很酷的文本滚动与网页飞花的特效 <SCRIPT language=JavaScript> //设置marquee的宽度(in pixels)  var marqueewidth=190 //设置marquee的高度  var marqueeheight=200 //设置marquee的速度  var speed=1 //设置marquee的显示内容  var marqueecontents=  ef="<center><p>加如文章的内容</center>" if (document.all)  document.write('<marquee direction="up" scrollAmount='+speed+' style="width:'+marqueewidth+';height:'+marqueeheight+'">'+marqueecontents+'</marquee>')  function regenerate(){  window.location.reload()  }  function regenerate2(){  if (document.layers){  setTimeout("window.onresize=regenerate",450)  intializemarquee()  }  }  function intializemarquee(){  document.cmarquee01.document.cmarquee02.document.write(marqueecontents)  document.cmarquee01.document.cmarquee02.document.close()  thelength=document.cmarquee01.document.cmarquee02.document.height  scrollit()  }  function scrollit(){  if (document.cmarquee01.document.cmarquee02.top>=thelength*(-1)){  document.cmarquee01.document.cmarquee02.top-=speed  setTimeout("scrollit()",100)  }  else{  document.cmarquee01.document.cmarquee02.top=marqueeheight  scrollit()  }  }  window.onload=regenerate2  </SCRIPT> <script language="JavaScript1.2"><!-- Begin var no = 20; // snow number var speed = 10; // smaller number moves the snow faster var snowflake = "images/snow.gif"; var ns4up = (document.layers) ? 1 : 0; // browser sniffer var ie4up = (document.all) ? 1 : 0; var dx, xp, yp;  // coordinate and position variables var am, stx, sty; // amplitude and step variables var i, doc_width = 800, doc_height = 600; if (ns4up) { doc_width = self.innerWidth; doc_height = self.innerHeight; } else if (ie4up) { doc_width = document.body.clientWidth; doc_height = document.body.clientHeight; } dx = new Array(); xp = new Array(); yp = new Array(); am = new Array(); stx = new Array(); sty = new Array(); for (i = 0; i < no; ++ i) {  dx = 0;            // set coordinate variables xp = Math.random()*(doc_width-50); // set position variables yp = Math.random()*doc_height; am = Math.random()*20;     // set amplitude variables stx = 0.02 + Math.random()/10; // set step variables sty = 0.7 + Math.random();   // set step variables if (ns4up) {           // set layers if (i == 0) { document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\"" + snowflake + "\" border=\"0\"></layer>"); } else { document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\"" + snowflake + "\" border=\"0\"></layer>");   } } else if (ie4up) { if (i == 0) { document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src=\"" + snowflake + "\" border=\"0\"></div>"); } else { document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src=\"" + snowflake + "\" border=\"0\"></div>");    }   } } function snowNS() { // Netscape main animation function for (i = 0; i < no; ++ i) { // iterate for every dot yp += sty; if (yp > doc_height-50) { xp = Math.random()*(doc_width-am-30); yp = 0; stx = 0.02 + Math.random()/10; sty = 0.7 + Math.random(); doc_width = self.innerWidth; doc_height = self.innerHeight; } dx += stx; document.layers["dot"+i].top = yp; document.layers["dot"+i].left = xp + am*Math.sin(dx); } setTimeout("snowNS()", speed); } function snowIE() { // IE main animation function for (i = 0; i < no; ++ i) { // iterate for every dot yp += sty; if (yp > doc_height-50) { xp = Math.random()*(doc_width-am-30); yp = 0; stx = 0.02 + Math.random()/10; sty = 0.7 + Math.random(); doc_width = document.body.clientWidth; doc_height = document.body.clientHeight; } dx += stx; document.all["dot"+i].style.pixelTop = yp; document.all["dot"+i].style.pixelLeft = xp + am*Math.sin(dx); } setTimeout("snowIE()", speed); } if (ns4up) { snowNS(); } else if (ie4up) { snowIE(); } // End --> </script>
#21
zswlove2004-11-14 08:15

三、文本自动向上循环滚动,鼠标放到上面还会暂停

适合于主页上的新闻发布,站长心语,公告栏等等。 <table border="1" bordercolor="#000000" bgcolor="#6699ff" cellpadding="5" cellspacing="0"> <tr> <td> <script language=javascript> document.write ("<marquee scrollamount='1' scrolldelay='30' direction= 'UP' width='200' id='helpor_net' height='150' onmouseover='helpor_net.stop()' onmouseout='helpor_net.start()' Author:redriver; For more,visit:www.helpor.net>") document.write ("<h2><p align='center'><font color='#ffffff' face='黑体'>偶 然</font></h2>") document.write ("<p align='right'><a href='#' target='_blank'><font color='#ffffff'>徐志摩</font></a> ") document.write ("<p><font color='#ffffff'> ") document.write (" 我是天空里的一片云,") document.write (" 偶尔投影在你的波心—— ") document.write (" 你不必讶异, ") document.write (" 更无须欢喜—— ") document.write (" 在转瞬间消灭了踪影。") document.write (" ") document.write (" 你我相逢在黑暗的海上,") document.write (" 你有你的,我有我的,方向;") document.write (" 你记得也好, ") document.write (" 最好你忘掉, ") document.write (" 在这交会时互放的光亮! ") document.write ("</font>") document.write ("</marquee> ") </script> </td> </tr> </table>

#22
zswlove2004-11-14 08:16
四、文字像打字一样逐个出来

Head后放入
&lt;SCRIPT LANGUAGE="JavaScript"&gt;
&lt;!--
moji="这里写入你要显示的字,一次可写入30000个字,大家试一试吧!";
y=0
function hitomoji(){
 if(y&lt;=moji.length){
 f=moji.substring(0,y);document.all.wordstart.innerHTML=f;
 y++;}
 else{m=0
 }
 setTimeout("hitomoji()",200);
}
//--&gt;
&lt;/SCRIPT&gt;
再在Body后放入
&lt;BODY onLoad="hitomoji()"&gt;
&lt;DIV ID="wordstart" STYLE="position:absolute;
top=200px;left=150px;
font-size:12px;color:#000080;
font-weight:bold;width:300px;height:36px"&gt;
&lt;/DIV&gt;
#23
zswlove2004-11-14 08:17
五、在状态栏中显示当前时间和日期
要完成此效果需要两个步骤

第一步:把如下代码加入到&lt;body&gt;区域中

&lt;SCRIPT LANGUAGE="JavaScript"&gt;
&lt;!-- Begin
function runClock() {
theTime = window.setTimeout("runClock()", 1000);
var today = new Date();
var display= today.toLocaleString();
status=display;
}
// End --&gt;
&lt;/SCRIPT&gt;


第二步:把“onLoad="runClock()"”加在&lt;body&gt;标记里
例如:&lt;body onLoad="runClock()"&gt;

#24
Viking2004-11-14 14:26

感谢zswlove 的支持

#25
Viking2004-11-14 23:53
地震
&lt;!--脚本说明:
把如下代码加入&lt;body&gt;区域中:--&gt;
&lt;script language="javascript"&gt;
&lt;!--
function surfto(form) {
   var myindex=form.select1.selectedIndex
   if (form.select1.options[myindex].value != null) {
        parent.main.location.href=form.select1.options[myindex].value;
   }
}
// --&gt;
&lt;/script&gt;
&lt;script language="javascript1.2"&gt;
&lt;!--
function shake(n) {
if (window.top.moveBy) {
for (i = 10; i &gt; 0; i--) {
for (j = n; j &gt; 0; j--) {
window.top.moveBy(0,i);
window.top.moveBy(i,0);
window.top.moveBy(0,-i);
window.top.moveBy(-i,0);
        }
     }
  }
alert(" 没吓坏吧!!! ");
}
// End --&gt;
&lt;/script&gt;
&lt;script
language="javascript"&gt;
&lt;!--
function moyamoya(htmlfile) {
  parent.main.location.href=htmlfile;
}
// --&gt;
&lt;/script&gt;


&lt;form&gt;
 &lt;div align="center"&gt;&lt;center&gt;&lt;p&gt;&lt;input onclick="shake(2)" type="button"
 value="地震拉!!!"&gt; &lt;/p&gt;
 &lt;/center&gt;&lt;/div&gt;
&lt;/form&gt;
别怕,死不了人
#26
Viking2004-11-14 23:53
各种用途的按钮 <!--脚本说明: 把如下代码加入<body>区域中:--> <form> <p> <input type="button" value="返回" onClick="history.go(-1)" name="button" class="pt9"> <input TYPE="button" NAME="view" value="查看本例的源码" onClick="window.location="view-source:" +window.location.href" class="pt9"> </p> </form> <form> <p><input TYPE="button" value="返回上一步" onCLICK="history.back(-1)"></p> </form> <form> <p><input TYPE="button" value="刷新按钮一" onCLICK="ReloadButton()"></p> </form> <script language="javascript"><!-- function ReloadButton(){location.href="allbutton.htm";} // --></script> <form> <p><input TYPE="button" value="刷新按钮二" onClick="history.go(0)"> </p> </form> <form> <p><input TYPE="button" value="回首页按钮" onCLICK="HomeButton()"></p> </form> <script language="javascript"><!-- function HomeButton(){location.href="http://nettrain.126.com";}/ // --></script> <form> <p><input TYPE="button" value="弹出警告框" onCLICK="AlertButton()"></p> </form> <script language="javascript"><!-- function AlertButton(){window.alert("要多多光临呀!");} // --></script> <form> <p><input TYPE="button" value="状态栏信息" onCLICK="StatusButton()"></p> </form> <script language="javascript"><!-- function StatusButton(){window.status="要多多光临呀!";} // --></script> <form> <p><input TYPE="button" value="背景色变换" onClick="BgButton()"></p> </form> <script>function BgButton(){ if (document.bgColor=='#00ffff') {document.bgColor='#ffffff';} else{document.bgColor='#00ffff';} } </script> <form> <p><input TYPE="button" value="打开新窗口" onCLICK="NewWindow()"></p> </form> <script language="javascript"><!-- function NewWindow(){window.open("test.htm","","height=240,width=340,status=no,location=no,toolbar=no,directories=no,menubar=no");} // --></script>
#27
DF2004-11-15 01:06

Viking姐姐(哥哥),有劳你了,谢谢你,支持你!!!!!!!!1

这些东西对我来说,太有用了。

#28
Viking2004-11-15 15:25
嘿嘿,为人民服务!!!!
#29
yl102004-11-15 17:55

给你固顶了,把标题改下吧,大家更容易知道其内容。

#30
Viking2004-11-15 22:32
多谢费心了
#31
DF2004-11-20 09:31

不要删此贴啊,我经常把它当工具书一样翻阅的。

非常支持!

#32
Viking2004-11-21 23:16
呵呵,都固顶了,当然不会删了
#33
佐罗二世2004-11-23 11:11
晕好难啊,介绍一些书不是更好吗?
#34
赤雪冰魔2004-11-25 17:20

你选到firwords里面把我的账给结掉。

#35
蓝色海岸2004-11-26 13:34
怎 么说我无权看呀?
#36
zhangyashe2004-11-30 11:43

支持

我要努力向你学习

#37
思雨心晴2004-12-06 09:09

好贴啊。。。

啰嗦一下,,差点找不进来了。

如果能直接看到效果就更好了。。。

#38
snownight2004-12-06 14:42
真的太好了,正好这两天做网页可以拿来试试看
#39
diliugan2004-12-07 12:03

是挺基本的啊

要学啊

有没有一些关于数据库的啊

#40
wmbdwmb2004-12-15 12:54

谢了!

#41
Viking2004-12-26 14:04

虽然很多,但你不是还得找吗?这已经给你找好了,你看就行了

再说这是给菜鸟准备的,如果你是老鸟就多做好事就行了

#42
jim6062005-01-04 16:42
谢谢。。。。
#43
hhyeah20002005-01-17 13:57
要学的东西实在太多了!
向各位致敬!!!!!!!!!!!!!!!!!!!!!!!!
#44
shade2005-02-18 15:22
好啊
我喜欢
我多顶一下
#45
wbchly2005-03-17 21:47
#46
uyigu2005-03-24 01:23
辛苦楼主了,太感谢了
#47
seiya2005-03-24 20:39
可不可以把flash加为背景呀
#48
seiya2005-03-24 20:54
?????
#49
nyzfl2005-03-25 04:01
不错~!
#50
海天一笑2005-03-27 11:16
谢谢了搂主!~!~
#51
happypanda2005-04-05 16:14
这些东西都很实用,不过你能不能找些电子图书格式的东东呀
12345