[共享无限]54种网页特效代码(1)

2009年11月29日星期日 | | |

1 网页里文字上下滚动的源代码：(direction=up向上)(direction=down向下)(direction
=left向左)
注意:下面width=450是更改文字在网页里面滚动的宽度，scrolldelay=80是更改文字运行的
速度，
如果想改变文字运行方向，
aligh：是设置字幕是否居中，
left是居左、center是居中、right是居右
top是居上、bottom是居下，
bgcolor是设置被景颜色，
<img scr="某个图片的链接,只要把这断代码手面换成图片，就可以实行图片滚动了，
请按照上面的要求更改下面的代码，
<marquee direction=up TrueSpeed scrollAmount=1
scrollDelay=80 height=300
width=450 border="0">
<br>有太多往事就别喝下太少酒精
<br>太珍惜生命就别随便掏心
</marquee>

2 如何使文字变成超联接，也就是点击一下，就进入了你想连接的别人网站
把下面的代码插入网格内，
例如，我想联接网易代码如下
<A href="http://www.163.com" target=_blank><FONT size=2>网易</FONT></A>

3 被景不动的效果
这段程序放在<body ****>正文中
例如，先在修改内插入被景图片，然后再从代码中找出来，把下面的代码加入里面就好了，
找出来的结果如下：<BODY background="图片路径">
完成以后的结果如下：<BODY这里必需有空格style="BACKGROUND-ATTACHMENT: fixed" back
ground="图片路径">

4 不许用鼠标右键的效果，把下面代码插入<head></head>之间
<script>
function click() {
if (event.button==2) {
alert(你想看什麽？)
} }
document.onmousedown=click
</script>

5 不停变色的文字
<script language=javascript>
<!--
function initArray() {
this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++) {
this = initArray.arguments;
}
}
var ctext = "看看我，我会变色";
var speed = 1000;
var x = 0;
var color = new initArray(
"red",
"blue",
"green",
"black",
"yellow",
"pink");
if (navigator.appVersion.indexOf("MSIE") != -1)
{
document.write(<div id="c"><center>+ctext+</center></div>);
}
function chcolor()
{
if (navigator.appVersion.indexOf("MSIE") != -1)
{
document.all.c.style.color = color[x];
}
(x < color.length-1) ? x++ : x = 0;
}
setInterval("chcolor()",1000);
-->
</script>

6 心跳的文字
<style>
<!--
#glowtext{
filter:glow(color=0A9DF5,strength=2);
width:100%;
}
-->
</style>
<script language="JavaScript1.2">
function glowit(which){
if (document.all.glowtext[which].filters[0].strength==2)
document.all.glowtext[which].filters[0].strength=1
else
document.all.glowtext[which].filters[0].strength=2
}
function glowit2(which){
if (document.all.glowtext.filters[0].strength==2)
document.all.glowtext.filters[0].strength=1
else
document.all.glowtext.filters[0].strength=2
}
function startglowing(){
if (document.all.glowtext&&glowtext.length){
for (i=0;i<glowtext.length;i++)
eval(setInterval("glowit(+i+)",150))
}
else if (glowtext)
setInterval("glowit2(0)",150)
}
if (document.all)
window.onload=startglowing
</script>
<span id="glowtext"><font color="F5D20A" " face="宋体" size="3">心跳的感觉——数
字人！</font></span>

7 以下代码，可以使网页的背景向下滚动
<script language=VBScript>
dim c,numgc
c=-100000
numgc=document.body.sourceIndex
sub SF
c=c+1
Document.all(numgc).style.BackgroundPosition= "0 " & c
id=SetTimeOut("SF",16,"VBScript")
end sub
SF
</script>

8 鼠标经过时，文字就变色
<font face="arial" size=3 onmouseover="this.style.color = red;"
onmouseout="this.style.color = black;">Welcome in Webdesigner</font>

9 如果想把以上滚动的文字变为超链接，也就是点击一下，就可以进入另一个网站，
方法是："在上面文字前面加入<a href=http://www.cctv.com>代码，后面加入</a>
就可以了，但上面要链接的网址自行更改。

10 如果想在滚动的时候，鼠标放在文字上面，字就停止，方法是：在文字前面加入
<a onmouseover=stop() onmouseout=start()>文字的后面</a>。

11 文字旋转的效果（测试以后，效果很好！）你把下面的代码插入网页后看一下，
<SCRIPT language=javascript>
Phrase="片片枫叶情！"
Balises=""
Taille=40;
Midx=100;
Decal=0.5;
Nb=Phrase.length;
y=-10000;
for (x=0;x<Nb;x++){
Balises=Balises + <DIV Id=L + x + STYLE="width:3;font-family: Courier New;fo
nt-weight:bold;position:absolute;top:40;left:50;z-index:0"> + Phrase.charAt(x) +
</DIV>
}
document.write (Balises);
Time=window.setInterval("Alors()",10);
Alpha=5;
I_Alpha=0.05

12、在网页里面插入歌曲
<bgsound src="ccdd.mp3"loop="-1">

13、鼠标跟随文字的效果<body></body>或<head></head>之间
<style type="text/css">
.spanstyle {
position:absolute;
visibility:visible;
top:-50px;
font-size:9pt;
color: #000000;
font-weight:bold;
}</style>
<script>
var x,y
var step=20
var flag=0
var message="呼吸小秘书帮您作主页！"
message=message.split("")
var xpos=new Array()
for (i=0;i<=message.length-1;i++) {
xpos=-50}
var ypos=new Array()
for (i=0;i<=message.length-1;i++) {
ypos=-50}
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 makesnake() {
if (flag==1 && document.all) {
for (i=message.length-1; i>=1; i--) {
xpos=xpos[i-1]+step
ypos=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
thisspan.posTop=ypos } }
else if (flag==1 && document.layers) {
for (i=message.length-1; i>=1; i--) {
xpos=xpos[i-1]+step
ypos=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
thisspan.top=ypos} }
var timer=setTimeout("makesnake()",30)}

</script>
<body onLoad="makesnake()" >
<script>
for (i=0;i<=message.length-1;i++) {
document.write("<span id=span"+i+"class=spanstyle>")
document.write(message)
document.write("</span>")}
if (document.layers){
document.captureEvents(Event.MOUSEMOVE);}
document.onmousemove = handlerMM;
</script>

13、在网页里面插入播放器代码
<embed autoplay="false" src="ab1.wma" width="200" height="45"></embed>

14、很有诗意的下雪特效
<!--此特效有2步需要操作-->
<!--第一步：把网页Html中的<body>改为：(这里网页背景默认黑色,这样效果比较好)-->
<body bgcolor=#000000 onLoad="snow()" text="#FFFFFF">
<!--第二步：将下面代码粘贴到网页Html的<body></body>之间-->
<script language="JavaScript">
<!--
N = 40;
Y = new Array();
X = new Array();
S = new Array();
A = new Array();
B = new Array();
M = new Array();
V = (document.layers)?1:0;

iH=(document.layers)?window.innerHeight:window.document.body.clientHeight;
iW=(document.layers)?window.innerWidth:window.document.body.clientWidth;
for (i=0; i < N; i++){
Y=Math.round(Math.random()*iH);
X=Math.round(Math.random()*iW);
S=Math.round(Math.random()*5+2);
A=0;
B=Math.random()*0.1+0.1;
M=Math.round(Math.random()*1+1);
}
if (V){
for (i = 0; i < N; i++)
{document.write("<LAYER NAME=sn"+i+" LEFT=0 TOP=0 BGCOLOR=#FFFFF0
CLIP=0,0,"+M+","+M+"></LAYER>")}
}
else{
document.write(<div style="position:absolute;top:0px;left:0px">);
document.write(<div style="position:relative">);
for (i = 0; i < N; i++)
{document.write(<div id="si" style="position:absolute;top:0;left:0;width
:+M+;height:+M+;
background:#fffff0;font-size:+M+"></div>)}
document.write(</div></div>);
}
function snow(){
var H=(document.layers)?window.innerHeight:window.document.body.clientHeight;
var W=(document.layers)?window.innerWidth:window.document.body.clientWidth;
var T=(document.layers)?window.pageYOffset:document.body.scrollTop;
var L=(document.layers)?window.pageXOffset:document.body.scrollLeft;
for (i=0; i < N; i++){
sy=S*Math.sin(90*Math.PI/180);
sx=S*Math.cos(A);
Y+=sy;
X+=sx;
if (Y > H){
Y=-10;
X=Math.round(Math.random()*W);
M=Math.round(Math.random()*1+1);
S=Math.round(Math.random()*5+2);
}
if (V){document.layers[sn+i].left=X;document.layers[sn+i].top=Y+T}
else{si.style.pixelLeft=X;si.style.pixelTop=Y+T}
A+=B;
}
setTimeout(snow(),10);
}
//-->
</script>

15、图片左右移动的特效
<!--此特效有2步需要操作-->
<!--第一步：将下面代码粘贴到网页Html的<head></head>之间-->
<script LANGUAGE="JavaScript"><!--
step = 0;
obj = new Image();
function anim(xp,xk,smer) //smer = direction
{
obj.style.left = x;
x += step*smer;
if (x>=(xk+xp)/2) {
if (smer == 1) step--;
else step++;
}
else {
if (smer == 1) step++;
else step--;
}
if (x >= xk) {
x = xk;
smer = -1;
}
if (x <= xp) {
x = xp;
smer = 1;
}
// if (smer > 2) smer = 3;
setTimeout(anim(+xp+,+xk+,+smer+), 50);
}
function moveLR(objID,movingarea_width,c)
{
if (navigator.appName=="Netscape") window_width = window.innerWidth;
else window_width = document.body.offsetWidth;
obj = document.images[objID];
image_width = obj.width;
x1 = obj.style.left;
x = Number(x1.substring(0,x1.length-2)); // 30px -> 30
if (c == 0) {
if (movingarea_width == 0) {
right_margin = window_width - image_width;
anim(x,right_margin,1);
}
else {
right_margin = x + movingarea_width - image_width;
if (movingarea_width < x + image_width) window.alert("No space for moving!");
else anim(x,right_margin,1);
}
}
else {
if (movingarea_width == 0) right_margin = window_width - image_width;
else {
x = Math.round((window_width-movingarea_width)/2);
right_margin = Math.round((window_width+movingarea_width)/2)-image_width;
}
anim(x,right_margin,1);
}
}
//--></script>
<!--第二步：将下面代码粘贴到网页Html的<body></body>之间-->
<img src="../../gifpict/bluelogo.gif" name="picture"
style="position: absolute; top: 70px; left: 30px;" BORDER="0" WIDTH="140" HEIGHT="40">
<script LANGUAGE="JavaScript"><!--
setTimeout("moveLR(picture,300,1)",10);
//--></script>

16、我不想要该死的链接的下划线！
将以下代码加入<head> </head>之间
<style type="text/css">
<!--
a:link{text-decoration:none}
a:hover{text-decoration:none}
a:visited{text-decoration:none}
-->
</style>

17、以下是在网页飘动的图片，（暂时还没有测试）
<!--将下面代码粘贴到网页Html的<body></body>之间-->
<script LANGUAGE="JavaScript">
var brOK=false;
var mie=false;
var aver=parseInt(navigator.appVersion.substring(0,1));
var aname=navigator.appName;
function checkbrOK()
{if(aname.indexOf("Internet Explorer")!=-1)
{if(aver>=4) brOK=navigator.javaEnabled();
mie=true;
}
if(aname.indexOf("Netscape")!=-1)
{if(aver>=4) brOK=navigator.javaEnabled();}
}
var vmin=2;
var vmax=5;
var vr=0.02;
var timer1;
function Chip(chipname,width,height)
{this.named=chipname;
this.vx=vmin+vmax*Math.random();
this.vy=vmin+vmax*Math.random();
this.w=width;
this.h=height;
this.xx=0;
this.yy=0;
this.timer1=null;
}
function movechip(chipname)
{
if(brOK)
{eval("chip="+chipname);
if(!mie)
{pageX=window.pageXOffset;
pageW=window.innerWidth;
pageY=window.pageYOffset;
pageH=window.innerHeight;
}
else
{pageX=window.document.body.scrollLeft;
pageW=window.document.body.offsetWidth-22;
pageY=window.document.body.scrollTop;
pageH=window.document.body.offsetHeight-34;
}

chip.xx=chip.xx+chip.vx;
chip.yy=chip.yy+chip.vy;

chip.vx+=vr*(Math.random()-0.5);
chip.vy+=vr*(Math.random()-0.5);
if(chip.vx>(vmax+vmin)) chip.vx=(vmax+vmin)*2-chip.vx;
if(chip.vx<(-vmax-vmin)) chip.vx=(-vmax-vmin)*2-chip.vx;
if(chip.vy>(vmax+vmin)) chip.vy=(vmax+vmin)*2-chip.vy;
if(chip.vy<(-vmax-vmin)) chip.vy=(-vmax-vmin)*2-chip.vy;
if(chip.xx<=pageX)
{chip.xx=pageX;
chip.vx=vmin+vmax*Math.random();
}
if(chip.xx>=pageX+pageW-chip.w)
{chip.xx=pageX+pageW-chip.w;
chip.vx=-vmin-vmax*Math.random();
}
if(chip.yy<=pageY)
{chip.yy=pageY;
chip.vy=vmin+vmax*Math.random();
}
if(chip.yy>=pageY+pageH-chip.h)
{chip.yy=pageY+pageH-chip.h;
chip.vy=-vmin-vmax*Math.random();
}

if(!mie)
{eval(document.+chip.named+.top =+chip.yy);
eval(document.+chip.named+.left=+chip.xx);
}
else
{eval(document.all.+chip.named+.style.pixelLeft=+chip.xx);
eval(document.all.+chip.named+.style.pixelTop =+chip.yy);
}
chip.timer1=setTimeout("movechip("+chip.named+")",140);
}
}

function hide(chipname){
if(brOK){
eval("chip="+chipname);
if(!mie)
eval(document.+chip.named+.visibility =+"hide");
else
eval(document.all.+chip.named+.style.visibility =+"hidden");
}
}

function stopme(chipname)
{if(brOK)
{//alert(chipname)
eval("chip="+chipname);
if(chip.timer1!=null)
{clearTimeout(chip.timer1)}
}
}
var chip1;
function pagestart()
{checkbrOK();
chip1=new Chip("chip1",117,75);
if(brOK)
{ movechip("chip1");
}
}
//if(brOK) {stopme(chip1);}
</script>
<DIV id=chip1
style="height: 105; position: absolute; visibility: visible; width:
140; left: 180; top: 157">
<TABLE border=0 cellPadding=4 cellSpacing=0 class=bd width=60>
<TBODY>
<TR>
<TD align=middle class=bg2><A class=prs1
href="http://blueant1006.myetang.com" target=_blank>
<!--把上面"http://"改为图片所要链接的网址，改下面的"src="为你的图片,修改高度、宽度-->
<IMG border=0 class=bd src="../../gifpict/bluelogo.gif" width="88" height="31">
</A></TD></TR></TBODY></TABLE></DIV>
<SCRIPT event=onload for=window language=JavaScript>
pagestart();
</SCRIPT>

18、打字效果的特效
<!--把下列代码加入到网页Html的<body></body>之间-->
<body>
<script language="JavaScript1.2">
var it=0
var head="display:"
function initialize(){
mytext=typing.innerText
var myheight=typing.offsetHeight
typing.innerText=
document.all.typing.style.height=myheight
typeit()
}
function typeit(){
typing.insertAdjacentText("beforeEnd",mytext.charAt(it))
if (it<mytext.length-1){
it++
setTimeout("typeit()",100)
}
else
return
}
if (document.all)
document.body.onload=initialize
</script>
<span id="typing"
style="visiblity:hidden;height:2" style="{head};">
<p>
<font color="#FF0000">BlueAnt欢迎您的光临</span> </font></p>
 
我的QQ空间
kmeleon.js及pref.js配置解释
K-MeleonCCF ME目录下的defaults\pref\kmeleon.js保存了K-Meleon...
 

0 评论:

发表评论

订阅： 博文评论 (Atom)

所有文章收集于网络，如果有牵扯到版权问题请与本站站长联系。谢谢合作！[email protected]

 
Glossy Blue by N.Design Studio
Blogger Templates by Blogcrowds | Glossy Blue Blogger Template