[共享无限]54种网页特效代码 之(5)
2009年11月29日星期日 | | |39、在网页中漂动的多张图片
第一步:把如下代码加入<body>区域中
<script language="JavaScript">
<!--
Pic=new Array(photo/04261.gif,photo/04262.gif,photo/04263.gif,p
hoto/04264.gif,photo/04265.gif)
//Smoothness of animation depends on the number of images and theyre file size.
MaxSpeed=5;
MinSpeed=2;
load = new Array()
for(i=0; i < Pic.length; i++)
{
load = new Image();
load.src = Pic;
}
amount=Pic.length;
ns=(document.layers)?1:0;
if (ns){
for (i=0; i < amount; i++){
document.write("<LAYER NAME=netscape"+i+" LEFT=0 TOP=0><img name=ne
tpics src="+load.src+"></LAYER>")}
}
else{
document.write("<div style=position:absolute;top:0px;left:0px><div st
yle=position:relative>");
for (i=0; i < amount; i++){
document.write("<img id=explorer src="+load.src+" style=positio
n:absolute;top:0px;left:0px>")}
document.write("</div></div>")
}
VB=0;
HB=0;
R=new Array();
PB=new Array();
RD=new Array();
Y=new Array();
X=new Array();
D=new Array();
SP=new Array();
BY=new Array();
BX=new Array();
for (i=0; i < amount; i++){
Y=10;
X=10;
D=Math.floor(Math.random()*70+10);
SP=Math.floor(Math.random()*MaxSpeed+MinSpeed);
}
function Curve(){
plusMinus=new Array(1,-1,2,-2,3,-3,0,1,-1,0,5,-5)
for (i=0; i < amount; i++){
R=Math.floor(Math.random()*plusMinus.length);
RD=plusMinus[R];
}
setTimeout(Curve(),1500);
}
function MoveRandom(){
var H=(document.layers)?window.innerHeight:document.body.clientHeight;
var W=(document.layers)?window.innerWidth:document.body.clientWidth;
var YS=(document.layers)?window.pageYOffset:document.body.scrollTop;
var XS=(document.layers)?window.pageXOffset:document.body.scrollLeft;
for (i=0; i < amount; i++){
BY=-load.height;
BX=-load.width;
PB=D+=RD;
y = SP*Math.sin(PB*Math.PI/180);
x = SP*Math.cos(PB*Math.PI/180);
if (D < 0) D+=360;
Y+=y;
X+=x;
VB=180-D;
HB=0-D;
//Corner rebounds! not necessary but looks nice.
if ((Y < 1) && (X < 1)) {Y=1;X=1;D=45;}
if ((Y < 1) && (X > W+BX)) {Y=1;X=W+BX;D=135;}
if ((Y > H+BY) && (X < 1)) {Y=H+BY;X=1;D=315;}
if ((Y > H+BY) && (X > W+BX)) {Y=H+BY;X=W+BX;D=225;}
//Edge rebounds!
if (Y < 1) {Y=1;D=HB;}
if (Y > H+BY) {Y=H+BY;D=HB;}
if (X < 1) {X=1;D=VB;}
if (X > W+BX) {X=W+BX;D=VB;}
var layer=(document.layers)?document.layers[netscape+i]:explorer.style;
layer.top=Y+YS;
layer.left=X+XS;
}
setTimeout(MoveRandom(),10);
}
function sTaRt(){Curve();MoveRandom()}
//-->
</script>
第二步:把如下代码加入<body>区域中<body bgcolor="#ffffff" onLoad="if
(document.all||document.layers) sTaRt()">
40、从上往下漂动的雪花（自已可以改为图片噢）
第一步:把如下代码加入<body>区域中
<script language="JavaScript">
<!--
Amount=20; //Smoothness! depends on image file size, the smaller the
size the more you can use!
//Pre-load your image below!
Image0=new Image();
Image0.src="photo/flake1.gif";
Image1=new Image();
Image1.src="photo/flake2.gif";
Image2=new Image();
Image2.src="photo/flake3.gif";
Image3=new Image();
Image3.src="photo/flake4.gif";
Image4=new Image();
Image4.src="photo/flake5.gif";
grphcs=new Array(5)
grphcs[0]="photo/flake1.gif"
grphcs[1]="photo/flake2.gif"
grphcs[2]="photo/flake3.gif"
grphcs[3]="photo/flake4.gif"
grphcs[4]="photo/flake5.gif"
Ypos=new Array();
Xpos=new Array();
Speed=new Array();
Step=new Array();
Cstep=new Array();
ns=(document.layers)?1:0;
if (ns){
for (i = 0; i < Amount; i++){
var P=Math.floor(Math.random()*grphcs.length);
rndPic=grphcs[P];
document.write("<LAYER NAME=sn"+i+" LEFT=0 TOP=0><img src="+rndPic+"></LAYER>");
}
}
else{
document.write(<div style="position:absolute;top:0px;left:0px">
<div style="position:relative">);
for (i = 0; i < Amount; i++){
var P=Math.floor(Math.random()*grphcs.length);
rndPic=grphcs[P];
document.write(<img id="si" src="+rndPic+" style="position:abso
lute;top:0px;left:0px">);
}
document.write(</div></div>);
}
WinHeight=(document.layers)?window.innerHeight:window.document.body.clientHeight;
WinWidth=(document.layers)?window.innerWidth:window.document.body.clientWidth;
for (i=0; i < Amount; i++){
Ypos = Math.round(Math.random()*WinHeight);
Xpos = Math.round(Math.random()*WinWidth);
Speed= Math.random()*3+2;
Cstep=0;
Step=Math.random()*0.1+0.05;
}
function fall(){
var WinHeight=(document.layers)?window.innerHeight:window.document.body.clientHeight;
var WinWidth=(document.layers)?window.innerWidth:window.document.body.clientWidth;
var hscrll=(document.layers)?window.pageYOffset:document.body.scrollTop;
var wscrll=(document.layers)?window.pageXOffset:document.body.scrollLeft;
for (i=0; i < Amount; i++){
sy = Speed*Math.sin(90*Math.PI/180);
sx = Speed*Math.cos(Cstep);
Ypos+=sy;
Xpos+=sx;
if (Ypos > WinHeight){
Ypos=-60;
Xpos=Math.round(Math.random()*WinWidth);
Speed=Math.random()*5+2;
}
if (ns){
document.layers[sn+i].left=Xpos;
document.layers[sn+i].top=Ypos+hscrll;
}
else{
si.style.pixelLeft=Xpos;
si.style.pixelTop=Ypos+hscrll;
}
Cstep+=Step;
}
setTimeout(fall(),10);
}
//-->
</script>
第二步:把如下代码加入<body>区域中<body bgcolor="#ffffff" onLoad="fall()">
41、图片上面有光线在滚动效果
把如下代码加入<body>区域中
<SCRIPT LANGUAGE="JavaScript">
i=0;
function f_wave()
{i=i-4;
ShowCool.style.filter="Wave(Freq=1,LightStrength=20,Phase=" + i + ")";
setTimeout("f_wave()",100);
}
window.onload=f_wave;</SCRIPT>
<IMG SRC="photo/logo0509.gif" WIDTH="180" HEIGHT="60" ID=ShowCool>
42、日期效果（2003年10月25日星期三）
<script language=JavaScript>
<!-- Begin
today=new Date();
function initArray(){
this.length=initArray.arguments.length
for(var i=0;i<this.length;i++)
this[i+1]=initArray.arguments }
var d=new initArray(
"星期日",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六");
document.write(
"<font color=##000000 style=font-size:9pt;font-family: 宋体> ",
today.getYear(),"年",
today.getMonth()+1,"月",
today.getDate(),"日",
d[today.getDay()+1],
"</font>" );
// End -->
</script>
42、把下面的代码插入网页，就会在你打开网页的时候弹出一个窗口(*****.htm
是插入自已做要弹出的网页
width=468,height=60,left=200,top=50是你要必弹出网页大小的窗口)
<script language="javascript">
window.open("*****.htm","www_g168_net","toolbar=no, status=no,menubar=no,
scrollbars=no,resizable=no,width=468,height=60,left=200,top=50");
</script>
43、就是在网页里面试听歌曲，注意在DW链接的时候，路径一定要是绝对路径，例如我的路径是
要把下面rtsp://weico.3322.net/mp3/01.ram改成我服务器里的路径即http://zx
y023028.nease.net/***.wma
就可以了）
<a href=rtsp://weico.3322.net/mp3/01.ram>在线收听</a>
44、在线试听歌曲的连接，（没有试用呢？）
<a href=rtsp://weico.3322.net/mp3/01.ram>在线收听</a>
45、如何给网页里插入的水平线添加颜色？
这就是代码，希望对你有所帮助，<hr size="0" color="#cc6633">
上面的color="#cc6633表示此线条是红色自行可以更改。
上面的size="0"表示线条宽度为0。
46、HTML没有直接写竖线的专用标记，使用<hr>来做竖线有局限性，
所以竖线只能通过表格table来实现。有2种方法可以写竖线，你可任选一种，
例如要高90像素的竖线：
，1.代码如：<table height=90
style=border-color:000000;border-left-style:solid;border-width:1px>
<tr><td valign=top>内容</table>
47、防止别人复制你的网页代码
<script language="JavaScript"><!--
if (navigator.appName.indexOf("Internet Explorer") != -1)
document.onmousedown = noSourceExplorer;
function noSourceExplorer(){if (event.button == 2 | event.button == 3)
{
alert("版权所有，严禁拷贝！");}}
// --></script>
48、禁止使用右键（把以下代码放入<body>在也就是<body ********>）
oncontextmenu=self.event.returnValue=false onselectstart="return false"
background=""
完成以后的效果为：<body oncontextmenu=self.event.returnValue=false
onselectstart="return false"
background="">
49、显示IP地址效果的代码，(中间的网址只能显示IP不显示地理位子,您有更好的可以换掉)
你现在的IP是：<script src="http://code.helpor.net/mine/ip.php"></script>
50、网页里面简单的图片滚动效果
<marquee direction="right" scrollamount="8" scrolldelay="100">
<img src="图片路径"></img>
<img src="图片路径"></img>
</marquee>
51、文字物效软件，美中不足的是英文版本，只能做一些网址等英文内容，
不能做出中文的文字效果
软件地址为：软件王2003-1/配套软件/Flax1.52
52、如何去掉网页滚动条
代码如下：
<body scroll=no>
去掉水平滚动条：
<body style="overflow-x: hidden">
去掉竖直滚动条：
<body style="overflow-y: hidden">
隐藏横向滚动条，显示纵向滚动条:
<body style="overflow-x:hidden;overflow-y:scroll">
全部隐藏
<body style="overflow:hidden">
或者是
<body scroll="no">
53、以下代码是友情连接，适合任何人网站，此图片为测试图片，
<a href="http://zxy023028.nease.net" target="_blank">
<img src="http://zxy023028.nease.net/images/yforum25.gif" width="50" height="40"
border="0" alt="多情浪子"></a>
54、精美的下拉菜单（第八行的168PX是修改下拉菜单上部分长或短，
第十三行的-5PX是调整下部分长或短的。）
<!-- 样式部分 -->
<style type=text/css>
td,div { font: normal 12px 宋体; }
a { color: #F8F8F8; text-decoration: none; }
a:hover { color: #F8F8F8; text-decoration: underline; }
</style>
<!-- 实现部分 -->
<div style="background-color:#3366CC;width:168px;text-align:center;
padding:3px;border-bottom:1px solid #FFFFFF;z-index:1;"
onmouseover="myMenu.style.display=block"
onmouseout="myMenu.style.display=none">
<div style="position:absolute;width:0px;height:0px;overflow:visible;">
<div id=myMenu style="position:absolute;left:-5px;top:18px;display:none;
width:90px;background-color:#3366CC;padding:5px;text-align:left;">
<a href=#none>Link 1</a><br>
<a href=#none>Link 2</a><br>
<a href=#none>Link 3</a><br>
<a>...</a><br>
<a href=#none>Link N</a><br>
</div>
</div>
<a href=#none>菜单实例</a>
</div>
From:网络.由于篇幅原因.故分开发.
博文
