超炫的网页制作JavaScript特效 -

stevenjohn

浏览: 1488994 次
性别:
来自: 深圳

最近访客更多访客>>

liunancun

lerylee800

log_cd

smile725775

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

超炫的网页制作JavaScript特效

博客分类：

JavaScript XP J#IE Unix

/*----------------------------------飘落的雪花 ---------------------------------*/
注释：放在<head>与</head>之间
<script language=JavaScript>




var no = 8; // snow number
var speed = 12; // smaller number moves the snow faster
var snowflake = "图片名称";

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 = 400, doc_height = 500;
if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = 500;
doc_height = 500;
}
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[i] = 0;                        // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20;         // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random();     // set step variables
if (ns4up) {                      // set layers
    if (i == 0) {
      document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
      document.write("top=\"15\" visibility=\"show\"><img src=\"");
      document.write(snowflake + "\" border=\"0\"></layer>");
    } else {
      document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
      document.write("top=\"15\" visibility=\"show\"><img src=\"");
      document.write(snowflake + "\" border=\"0\"></layer>");
    }
} else if (ie4up) {
    if (i == 0) {
      document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
      document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
      document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
      document.write(snowflake + "\" border=\"0\"></div>");
    } else {
      document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
      document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
      document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
      document.write(snowflake + "\" border=\"0\"></div>");
    }
}
}
function snowNS() { // Netscape main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
    yp[i] += sty[i];
    if (yp[i] > doc_height-50) {
      xp[i] = Math.random()*(doc_width-am[i]-30);
      yp[i] = 0;
      stx[i] = 0.02 + Math.random()/10;
      sty[i] = 0.7 + Math.random();
      doc_width = self.innerWidth;
      doc_height = self.innerHeight;
    }
    dx[i] += stx[i];
    document.layers["dot"+i].top = yp[i];
    document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", speed);
}

function snowIE() { // IE main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
    yp[i] += sty[i];
    if (yp[i] > doc_height-50) {
      xp[i] = Math.random()*(doc_width-am[i]-30);
      yp[i] = 0;
      stx[i] = 0.02 + Math.random()/10;
      sty[i] = 0.7 + Math.random();
      doc_width = document.body.clientWidth;
      doc_height = document.body.clientHeight;
    }
    dx[i] += stx[i];
    document.all["dot"+i].style.pixelTop = yp[i];
    document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowIE()", speed);
}

if (ns4up) {
snowNS();
} else if (ie4up) {
snowIE();
}
</script>

/*----------------------------------------颤动的窗口 ---------------------------*/
注释：可放在网页的任何位置
<script>
function shake(n) {
if (self.moveBy){
for (i = 10; i > 0; i--) {
for (j = n; j > 0; j--) {
self.moveBy(0,i);
self.moveBy(i,0);
self.moveBy(0,-i);
self.moveBy(-i,0);
}
}
}
}
shake(12);
</script>

/*--------------------------------------跟随鼠标的星星-------------------------*/
注释：放在<body>与</body>之间
<script>
/*
Scrolling Image Map/Text Link Tooltip Script-
Special Thanks to: Rob(http://rob.yeah.net)
                   Miss Ann(http://annworld.126.com)
*/

if (!document.layers&&!document.all)
event="test"
function showtip2(current,e,text){

if (document.all&&document.readyState=="complete"){
document.all.tooltip2.innerHTML='<marquee style="border:1px solid black">'+text+'</marquee>'
document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10
document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10
document.all.tooltip2.style.visibility="visible"
}

else if (document.layers){
document.tooltip2.document.nstip.document.write('<b>'+text+'</b>')
document.tooltip2.document.nstip.document.close()
document.tooltip2.document.nstip.left=0
currentscroll=setInterval("scrolltip()",100)
document.tooltip2.left=e.pageX+10
document.tooltip2.top=e.pageY+10
document.tooltip2.visibility="show"
}
}
function hidetip2(){
if (document.all)
document.all.tooltip2.style.visibility="hidden"
else if (document.layers){
clearInterval(currentscroll)
document.tooltip2.visibility="hidden"
}
}

function scrolltip(){
if (document.tooltip2.document.nstip.left>=-document.tooltip2.document.nstip.document.width)
document.tooltip2.document.nstip.left-=5
else
document.tooltip2.document.nstip.left=150
}
</script>
<script language="JavaScript">
function YY_Layerfx(yyleft,yytop,yyfnx,yyfny,yydiv,yybilder,yyloop,yyto,yycnt,yystep) { //v1.2
//copyright (c)1999 Yaromat, Jaro von Flocken
if ((document.layers)||(document.all)){
with (Math) {yynextx= eval(yyfnx)}
with (Math) {yynexty= eval(yyfny)}
yycnt=(yyloop && yycnt>=yystep*yybilder)?0:yycnt+yystep;
if (document.layers){
    eval(yydiv+".top="+(yynexty+yytop))
    eval(yydiv+".left="+(yynextx+yyleft))
}
if (document.all){
    eval("yydiv=yydiv.replace(/.layers/gi, '.all')");
    eval(yydiv+".style.pixelTop="+(yynexty+yytop));
    eval(yydiv+".style.pixelLeft="+(yynextx+yyleft));
}
argStr='YY_Layerfx('+yyleft+','+yytop+',"'+yyfnx+'","'+yyfny+'","'+yydiv+'",'+yybilder+','+yyloop+','+yyto+','+yycnt+','+yystep+')';
if (yycnt<=yystep*yybilder){eval(yydiv+".yyto=setTimeout(argStr,yyto)");}
}

}
function YY_Mousetrace(evnt) { //v1.2 copyright (c)1999 Yaromat
if (yyns4)
{if (evnt.pageX) {yy_ml=evnt.pageX; yy_mt=evnt.pageY;} }
else{
   yy_ml=(event.clientX + document.body.scrollLeft);
   yy_mt=(event.clientY + document.body.scrollTop);
}
if (yy_tracescript)eval(yy_tracescript)
}
</script>
<script language="JavaScript">
function PopWin()
{
var PopWin = window.open("new.htm","PopWin","toolbar=no,directries=no,scrollBars=yes,height=350,width=400");
}
</script>
      <div id="tooltip2"
style="position:absolute;visibility:hidden;clip:rect(0 150 50 0);width:150px;background-color:lightyellow">
        <layer name="nstip" width="1000px" bgcolor="lightyellow"> </layer>
      </div>
      <div id="yyd0"
style="position:absolute; left:10px; top:50px; width:3px; height:3px; z-index:1; background-color: #19636c; layer-background-color: #19636c; border: 1px none #000000; clip: rect(0 3 3 0)"></div>
      <div
id="yyd1"
style="position:absolute; left:20px; top:50px; width:3px; height:3px; z-index:1; background-color: #708574; layer-background-color: #708574; border: 1px none #000000; clip: rect(0 3 3 0)"></div>
      <div
id="yyd2"
style="position:absolute; left:30px; top:50px; width:3px; height:3px; z-index:1; background-color: #379bbf; layer-background-color: #379bbf; border: 1px none #000000; clip: rect(0 3 3 0)"></div>
      <div
id="yyd3"
style="position:absolute; left:40px; top:50px; width:3px; height:3px; z-index:1; background-color: #25184c; layer-background-color: #25184c; border: 1px none #000000; clip: rect(0 3 3 0)"></div>
      <div
id="yyd4"
style="position:absolute; left:50px; top:50px; width:3px; height:3px; z-index:1; background-color: #31bd3c; layer-background-color: #31bd3c; border: 1px none #000000; clip: rect(0 3 3 0)"></div>
      <div
id="yyd5"
style="position:absolute; left:60px; top:50px; width:3px; height:3px; z-index:1; background-color: #c11efd; layer-background-color: #c11efd; border: 1px none #000000; clip: rect(0 3 3 0)"></div>
        <script>
var yyns4=window.Event?true:false; var yy_mt = 0; var yy_ml = 0;
document.onmousemove = YY_Mousetrace;
yy_tracescript = '';

if (yyns4){ document.captureEvents(Event.MOUSEMOVE);
YY_Mousetrace('',',document.YY_Mousetrace1')}

YY_Layerfx(0,0,'yy_ml+cos((15*sin(yycnt/39.83007847812662))+0)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','yy_mt+sin((15*sin(yycnt/34.224861639800686))+0)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','document.layers[\'yyd0\']',2000,true,80,0,1);

YY_Layerfx(0,0,'yy_ml+cos((15*sin(yycnt/27.66510707209673))+30)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','yy_mt+sin((15*sin(yycnt/9.240632767417667))+30)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','document.layers[\'yyd1\']',2000,true,80,0,1);

YY_Layerfx(0,0,'yy_ml+cos((15*sin(yycnt/16.45318944579641))+60)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','yy_mt+sin((15*sin(yycnt/16.0564452288292))+60)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','document.layers[\'yyd2\']',2000,true,80,0,1);

YY_Layerfx(0,0,'yy_ml+cos((15*sin(yycnt/6.95348954836835))+90)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','yy_mt+sin((15*sin(yycnt/44.13697049887155))+90)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','document.layers[\'yyd3\']',2000,true,80,0,1);

YY_Layerfx(0,0,'yy_ml+cos((15*sin(yycnt/33.90077294583733))+120)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','yy_mt+sin((15*sin(yycnt/2.2378828869411587))+120)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','document.layers[\'yyd4\']',2000,true,80,0,1);

YY_Layerfx(0,0,'yy_ml+cos((15*sin(yycnt/37.858312521039835))+150)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','yy_mt+sin((15*sin(yycnt/18.083839795990098))+150)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','document.layers[\'yyd5\']',2000,true,80,0,1);
</script>
        <script>
/*
Scrolling Image Map/Text Link Tooltip Script-
Special Thanks to: Rob(http://rob.yeah.net)
                   Miss Ann(http://annworld.126.com)
*/

if (!document.layers&&!document.all)
event="test"
function showtip2(current,e,text){

if (document.all&&document.readyState=="complete"){
document.all.tooltip2.innerHTML='<marquee style="border:1px solid black">'+text+'</marquee>'
document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10
document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10
document.all.tooltip2.style.visibility="visible"
}

else if (document.layers){
document.tooltip2.document.nstip.document.write('<b>'+text+'</b>')
document.tooltip2.document.nstip.document.close()
document.tooltip2.document.nstip.left=0
currentscroll=setInterval("scrolltip()",100)
document.tooltip2.left=e.pageX+10
document.tooltip2.top=e.pageY+10
document.tooltip2.visibility="show"
}
}
function hidetip2(){
if (document.all)
document.all.tooltip2.style.visibility="hidden"
else if (document.layers){
clearInterval(currentscroll)
document.tooltip2.visibility="hidden"
}
}

function scrolltip(){
if (document.tooltip2.document.nstip.left>=-document.tooltip2.document.nstip.document.width)
document.tooltip2.document.nstip.left-=5
else
document.tooltip2.document.nstip.left=150
}
</script>
        <script language="JavaScript">
function YY_Layerfx(yyleft,yytop,yyfnx,yyfny,yydiv,yybilder,yyloop,yyto,yycnt,yystep) { //v1.2
//copyright (c)1999 Yaromat, Jaro von Flocken
if ((document.layers)||(document.all)){
with (Math) {yynextx= eval(yyfnx)}
with (Math) {yynexty= eval(yyfny)}
yycnt=(yyloop && yycnt>=yystep*yybilder)?0:yycnt+yystep;
if (document.layers){
    eval(yydiv+".top="+(yynexty+yytop))
    eval(yydiv+".left="+(yynextx+yyleft))
}
if (document.all){
    eval("yydiv=yydiv.replace(/.layers/gi, '.all')");
    eval(yydiv+".style.pixelTop="+(yynexty+yytop));
    eval(yydiv+".style.pixelLeft="+(yynextx+yyleft));
}
argStr='YY_Layerfx('+yyleft+','+yytop+',"'+yyfnx+'","'+yyfny+'","'+yydiv+'",'+yybilder+','+yyloop+','+yyto+','+yycnt+','+yystep+')';
if (yycnt<=yystep*yybilder){eval(yydiv+".yyto=setTimeout(argStr,yyto)");}
}

}
function YY_Mousetrace(evnt) { //v1.2 copyright (c)1999 Yaromat
if (yyns4)
{if (evnt.pageX) {yy_ml=evnt.pageX; yy_mt=evnt.pageY;} }
else{
   yy_ml=(event.clientX + document.body.scrollLeft);
   yy_mt=(event.clientY + document.body.scrollTop);
}
if (yy_tracescript)eval(yy_tracescript)
}
</script>
        <script language="JavaScript">
function PopWin()
{
var PopWin = window.open("new.htm","PopWin","toolbar=no,directries=no,scrollBars=yes,height=350,width=400");
}
</script>

/*-----------------------------------禁止点击鼠标右键--------------------------*/
注释：放在<head>与</head>之间
<script language="javascript">
function click() {
if (event.button==2) {
alert('警告内容')
}
}
document.onmousedown=click
</script>

/*-----------------------------------变色文本----------------------------------*/
注释：放在<body>与</body>之间
<p onMouseMove="hello()">文本内容</p>
<script language="VBScript">
sub hello
document.fgColor=int(256*256*256*rnd)
end sub
</script>

/*-----------------------------文本永远在窗口的顶端--------------------------*/
注释：放在<body>与</body>之间
<div id="KBStatic" style="position:absolute; left:3px; top:0px; width:553px; height:70px; z-index:25">
                    <font size="5">文本内容 </font></div>
                  <script language=JavaScript>
function KB_keepItInIE(theName,theWantTop,theWantLeft) {
theRealTop=parseInt(document.body.scrollTop)
theTrueTop=theWantTop+theRealTop
document.all[theName].style.top=theTrueTop
theRealLeft=parseInt(document.body.scrollLeft)
theTrueLeft=theWantLeft+theRealLeft
document.all[theName].style.left=theTrueLeft
}
function KB_keepItInNN(theName,theWantX,theWantY) {
theRealLay=document.layers[theName]
theBadX=self.pageYOffset
theBadY=self.pageXOffset
theRealX=theBadX+theWantX
theRealY=theBadY+theWantY
theRealLay.moveTo(theRealY,theRealX)
}
IE4=(document.all)?1:0
NN4=(document.layers)?1:0
if (IE4)
setInterval('KB_keepItInIE("KBStatic",0,0)',1)
if (NN4)
setInterval('KB_keepItInNN("KBStatic",0,0)',1)
</script>

/*----------------------------------图形淡出淡隐-------------------------------*/
注释：放在<body****>里
<img src="图形的文件名" name="u" border=0
alt="Image" style="filter:alpha(opacity=0)">
<script language="JavaScript">

var b = 1;
var c = true;

function fade(){
if(document.all);

if(c == true) {
b++;
}
if(b==100) {
b--;
c = false
}

if(b==10) {
b++;
c = true;
}

if(c == false) {
b--;
}
u.filters.alpha.opacity=0 + b;
setTimeout("fade()",50);
}
</script>

/*--------------------------------变换图形------------------------------*/
注释：放在<body>与</body>之间
<script language="JavaScript">

</script>
<a href="" onClick="clickhref2()" onMouseOver="Overhref2();return true;" onMouseOut="Outhref2;return true;"><img src="" name="banner" border="0" ></a>

/*----------------------------------记录来宾姓名------------------------------*/
注释：放在<head>与</head>之间
<script language="JavaScript">

</script>
注释：放在<body>与</body>之间
<script language="JavaScript">
if (Count()==0)
{
document.write("您好!" + Who() + ". 您首次来这儿,请多提宝贵意见.");
}
else
{
document.write("您好!" + Who() + ". 您已来这儿 " + Count() + "次了，最后一次在 " + When() +".");
}
</script>

/*----------------------------------记录浏览次数-------------------------------*/
注释：放在<body>与</body>之间
<script language="JavaScript">

</script>

/*-----------------------------------进入网页警告------------------------------*/
注释：放在<head>与</head>之间
<script language="JavaScript">
alert("警告内容 ")
</script>

/*--------------------------------------模拟病毒-------------------------------*/
注释：放在<body>与</body>之间
<script language=JavaScript>
function hassl() {
;alert('警告，我是黑黑病毒，已侵入你的系统！！！')
;alert('我现在已经驻在你家里，你欢迎我么？？？？')
;alert('你的硬盘文件将会被我“吃掉“，哈哈....')
;alert('我是不是很“黑“，现在才知道么？太晚了！！！')
;alert('我要开始工作了，，，，，，。。')
;alert('我正在大口的嚼，你的Command文件真香^_^')
;alert('你怕不怕，你一定要记住我黑黑。。。')
confirm('黑黑懒懒洋洋的伸了伸腰，真的好舒服。')
;alert('我现在要格式么你的硬盘了，你做好准备了么？？？')
;alert('One..Two..Three..现在开始^_^')
;alert('10%')
;alert('20%')
;alert('25%')
;alert('40%')
;alert('50%')
;alert('60%')
;alert('65%')
;alert('70%')
;alert('79%')
;alert('80%')
;alert('90%')
;alert('98%')
;alert('100%')
;alert('不要害怕，你的硬盘丝毫未损，先跟你开个玩')
;alert('现在要开始了，要小心！！！！')
;alert('10%')
;alert('30%')
;alert('55%')
;alert('70%')
;alert('80%')
;alert('90%')
;alert('95%')
;alert('100%')
;alert('complete')
;alert('黑黑已成功的侵犯了你的系统，黑黑在得意的^_^..^_^...')
;alert('你的系统已被锁定％±÷＃（')
;alert('黑黑睁开笑眯眯的眼睛，突然大吼道“我要吃掉所有的文件”....')
confirm('黑黑的老臊隐，总是发个没完')
;alert('我黑黑算是病毒么？')

;alert('我自己也搞不清楚')
;alert('我算是一个又黑又不黑的玩意')
;alert('黑黑有些累了，看来我不想吃你的“东西”，其实我一些在跟你开玩笑，')
;alert('黑黑要跟你说再见，黑黑其实是个好孩子')

}
</script>
<input type="button" value="模拟病毒" onClick="hassl()" name="button">

/*-------------------------------带开关的From时钟----------------------------*/
注释：放在<body>与</body>之间
<script language="JavaScript">


var enabled=0;

function TOfunc() {

TO = window.setTimeout( "TOfunc()", 1000
);

var today = new Date();

document.clock.disp.value =
today.toLocaleString();

}

</script>
<form name="clock">
<input type="text" name="disp" value="" size=20
onFocus="this.blur()" >
<br>
<input type="radio" name="rad" value="off"
onClick="
if( enabled==1 )
    {
     document.clock.disp.value='';
     clearTimeout( TO );
     enabled = 0;
     }
   " checked>
关<font color="#FFFF99"> </font>
<input type="radio" name="rad" value="on"
onClick="
     if( enabled == 0 ) {
        var TO = setTimeout( 'TOfunc()', 1000 );
        enabled = 1;     }" >
开<font color="#FFFF99"> </font>
</form>
为了您的安全，请只打开来源可靠的网址

打开网站    取消
来自: http://hi.baidu.com/ramanda%5Fko/blog/item/2d63d509c4f2ad39e8248847.html

分享到：

网页制作Javascript经典小技巧总结 | [网页制作]58种网页常用小技巧(javascrip ...

2010-12-31 12:54
浏览 1190
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

超炫的网页制作JavaScript特效

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

超炫的网页制作JavaScript特效

评论

发表评论

相关推荐

DIV 切换(二)

DIV 切换(一)

Struts2 修改页面

DB2 分页

网页自动跳转代码html

JSP 分页

jsp request 对象详解

WML标签

利用JSP开发wml手机网页的几个例子

掌上手机 JSP页面

JSP页面显示时间

JSP从界面接受数据并且在界面把读入的数据显示出来

HTML代码简介

常用JAVA方法大全

网页制作Javascript经典小技巧总结

[网页制作]58种网页常用小技巧(javascript)

网页制作中JavaScript常用脚本语句三

网页制作中JavaScript常用脚本语句二

网页制作中JavaScript常用脚本语句一

javascript 触发事件列表

最近访客更多访客>>