注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

浩瀚星云

上善若水 厚德载物<学习版>

 
 
 

日志

 
 

ASP中的HTML实现鼠标篇(2)  

2007-12-30 01:57:47|  分类: ASP(过时) |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

                              作者:冰雨

  鼠标特效:鼠标的特效在,网页中很常见,特别在一些通用行网页当中,比如说QQ空间之中,经常有一些特效出现,这些特效会给访问者一种新鲜感,还有视觉上的享受.

跟随鼠标的三色彩带:

<html>

<head>

<title>标题</title>

</head><body bgColor=#000000>

<!--将以下代码加入HTML<Body></Body>之间-->

 <script language="JavaScript">

<!--

var a_Colour='fff000';

var b_Colour='00ff00';

var c_Colour='ff00ff';

var Size=120;

 var YDummy=new Array(),XDummy=new Array(),xpos=0,ypos=0,ThisStep=0;step=0.6;

if (document.layers){

window.captureEvents(Event.MOUSEMOVE);

function nsMouse(evnt){

xpos = window.pageYOffset+evnt.pageX+6;

ypos = window.pageYOffset+evnt.pageY+16;

}

window.onMouseMove = nsMouse;

}

else if (document.all)

{

function ieMouse(){

xpos = document.body.scrollLeft+event.x+6;

ypos = document.body.scrollTop+event.y+16;

}

document.onmousemove = ieMouse;

}

 function swirl(){

for (i = 0; i < 3; i++)

 {

 YDummy[i]=ypos+Size*Math.sin((1*Math.sin((ThisStep)/10))+i*2)*Math.sin((ThisStep)/4);

 XDummy[i]=xpos+Size*Math.cos((1*Math.sin((ThisStep)/10))+i*2)*Math.sin((ThisStep)/4);

 }

ThisStep+=step;

setTimeout('swirl()',10);

}

 var amount=10;

if (document.layers){

for (i = 0; i < amount; i++)

{

document.write('<layer name=nsa'+i+' top=0 left=0 width='+i/2+' height='+i/2+' bgcolor='+a_Colour+'></layer>');

document.write('<layer name=nsb'+i+' top=0 left=0 width='+i/2+' height='+i/2+' bgcolor='+b_Colour+'></layer>');

document.write('<layer name=nsc'+i+' top=0 left=0 width='+i/2+' height='+i/2+' bgcolor='+c_Colour+'></layer>');

}

}

else if (document.all){

document.write('<div id="ODiv" style="position:absolute;top:0px;left:0px">'

+'<div id="IDiv" style="position:relative">');

for (i = 0; i < amount; i++)

{

document.write('<div id=x style="position:absolute;top:0px;left:0px;width:'+i/2+';height:'+i/2+';background:'+a_Colour+';font-size:'+i/2+'"></div>');

document.write('<div id=y style="position:absolute;top:0px;left:0px;width:'+i/2+';height:'+i/2+';background:'+b_Colour+';font-size:'+i/2+'"></div>');

document.write('<div id=z style="position:absolute;top:0px;left:0px;width:'+i/2+';height:'+i/2+';background:'+c_Colour+';font-size:'+i/2+'"></div>');

}

document.write('</div></div>');

}

function prepos(){

var ntscp=document.layers;

var msie=document.all;

if (document.layers){

for (i = 0; i < amount; i++)

{

 if (i < amount-1)

 {

 ntscp['nsa'+i].top=ntscp['nsa'+(i+1)].top;ntscp['nsa'+i].left=ntscp['nsa'+(i+1)].left;

 ntscp['nsb'+i].top=ntscp['nsb'+(i+1)].top;ntscp['nsb'+i].left=ntscp['nsb'+(i+1)].left;

 ntscp['nsc'+i].top=ntscp['nsc'+(i+1)].top;ntscp['nsc'+i].left=ntscp['nsc'+(i+1)].left;

 }

else 

 {

 ntscp['nsa'+i].top=YDummy[0];ntscp['nsa'+i].left=XDummy[0];

 ntscp['nsb'+i].top=YDummy[1];ntscp['nsb'+i].left=XDummy[1];

 ntscp['nsc'+i].top=YDummy[2];ntscp['nsc'+i].left=XDummy[2];

 }

}

}

else if (document.all){

for (i = 0; i <  amount; i++)

{

 if (i < amount-1)

 {

 msie.x[i].style.top=msie.x[i+1].style.top;msie.x[i].style.left=msie.x[i+1].style.left;

 msie.y[i].style.top=msie.y[i+1].style.top;msie.y[i].style.left=msie.y[i+1].style.left;

 msie.z[i].style.top=msie.z[i+1].style.top;msie.z[i].style.left=msie.z[i+1].style.left;

 }

else

 {

 msie.x[i].style.top=YDummy[0];msie.x[i].style.left=XDummy[0];

 msie.y[i].style.top=YDummy[1];msie.y[i].style.left=XDummy[1];

 msie.z[i].style.top=YDummy[2];msie.z[i].style.left=XDummy[2];

 }

}

}

setTimeout("prepos()",10);

}

function Start(){

swirl(),prepos()

}

window.onload=Start;

// -->

</script>

</body></html>

鼠标随移动的方向而改变:

<html xmlns:v="urn:schemas-microsoft-com:vml">

<STYLE>

body{margin:0px;cursor:url(http://www.jscode.cn/jscode/images/Select.cur)}

v\:* { Behavior: url(#default#VML) }

</STYLE>

     <script>

     var trace=""

     var vP

     var r=0

     var vS

     var p=new Object()

     var lineColor=[[255,0,0],[255,0,255]]

     p.x=0;p.y=0

     function init(){

            document.body.onmousedown=function(){

              if (event.button==1 || event.button==4){

               if (event.button==1) vP=document.createElement("v:PolyLine"); else vP=document.createElement("v:line");

              }

              vS=document.createElement("v:stroke")

              vP.filled="false"

              vP.appendChild(vS)

              document.body.appendChild(vP)

              trace="";

              if (event.button==4) vP.from.value=event.clientX + "," + event.clientY;

            }

             document.body.onmousemove=function(){

              if (event.button==1){

              pos=event.clientX + "," + event.clientY + " ";

              trace+=pos

              vS.color="rgb(255,0,0)"

                 vP.points.value=trace

             }

             if  (event.button==4) {

              vP.to.value=event.clientX + "," + event.clientY;

             }

              rImg.style.left=event.clientX-20;

             rImg.style.top=event.clientY-20;

             var cX = p.x-event.clientX;

             var cY = p.y-event.clientY;

             if (cX || cY) {

                                   status ="cX:"+cX+" -cY:"+cY

                       rotationImg(180-parseInt(Math.atan2(cY,cX)*180/Math.PI,10));

             } 

                    p.x=event.clientX;

                    p.y=event.clientY;     

            }

               document.body.onmouseup=function(){

                     vS.EndArrow="Block"

             }

            document.onselectstart=function(){return false}

     }

     function rotationImg(flag){

          window.status=r + " to " + flag;

          var step=3;

               while(r-flag>180) flag+=360

               while(flag-r>180) flag-=360

               r += (flag-r)/step

     rImg.style.rotation=90-r;

    }

    </script>

<body onload="init()">

<v:image id="rImg" src="http://www.jscode.cn/jscode/images/mouse.gif" style="position:absolute;top:0;left:0;width:37;height:37;0" >

 <v:Stroke dashstyle="Solid"/>

</v:image>

</body>

点击变色:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>标题</title>

</head>

 <body>

 <p onMouseMove="hello()">将鼠标移到这里看看<p><p></p>

<script language="VBScript">

sub hello

document.fgColor=int(256*256*256*rnd)

end sub

</script>

疯狂旋转的花朵:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=字体字型">

<title>标题</title>

</head>

<body>

<script language="JavaScript">

<!--

var images='图片的来源';

var amount=7;//Number of images here. Do not alter for this script!!

var speed=1;

var RunTime = 0;

var cntr=0;

var xcntr=100;

var pulse=25;

var Xpos = 0;

var Ypos = 0;

var _y;

var temp;

 

/*If you use an image larger or smaller than the one I've used

the cursor will be off center.Alter the 2 variables below to center it.*/

var UpDown=-10;

var LeftRight=-5;

if (document.all){

document.write('<div id="ieDiv" style="position:absolute;top:0px;left:0px">');

document.write('<div id="c" style="position:relative">');

for (n=0; n < amount; n++)

document.write('<img src="'+images+'" style="position:absolute;top:0px;left:0px;visibility:hidden">');

document.write('</div>');

document.write('</div>');

function FollowMouse(){

Xpos = document.body.scrollLeft+event.x+UpDown;

Ypos = document.body.scrollTop+event.y+LeftRight;

}

document.onmousemove = FollowMouse;

}

else if (document.layers){

window.captureEvents(Event.MOUSEMOVE);

function xFollowMouse(evnt){

Xpos = evnt.pageX+UpDown;

Ypos = evnt.pageY+LeftRight;

}

window.onMouseMove = xFollowMouse;

for (ns=0; ns < amount; ns++)

document.write("<LAYER NAME='n"+ns+"' LEFT=0 TOP=0 VISIBILITY=HIDE><IMG SRC='"+images+"'></LAYER>");

}

function msi(){

if (document.layers){

for ( i = 0 ; i < ns ; i++ )

{

temp="n"+i

document.layers[0].visibility='show';

document.layers[0].top = Ypos+cntr*Math.cos((RunTime+i*4.5)/5);

document.layers[0].left =Xpos+cntr*Math.sin((RunTime+i*4.5)/5);

}

cntr+=1;

RunTime+=speed;

stp=setTimeout('msi()',10);

if (cntr>=100)

{

cntr=100;

speed=2.5;

for ( i = 0 ; i < ns ; i++ )

{

temp="n"+i

document.layers[temp].visibility='show';

document.layers[temp].top=Ypos+cntr*Math.cos((RunTime-100)*i/90);

document.layers[temp].left=Xpos+cntr*Math.sin((RunTime-100)*i/90);

}

}

if (RunTime>182)

{

speed=0.5;

for ( i = 0 ; i < ns ; i++ )

{

temp="n"+i

document.layers[temp].top=Ypos+xcntr*Math.cos(((RunTime-182)+i*4.5)/5);

document.layers[temp].left=Xpos+xcntr*Math.sin(((RunTime-182)+i*4.5)/5)*Math.cos((RunTime-182)/5);

}

}

}

else if (document.all){

for (i=0;i<ieDiv.all.c.all.length;i++)

{

ieDiv.all.c.all[0].style.visibility='visible';

ieDiv.all.c.all[0].style.top=Ypos+cntr*Math.cos((RunTime+i*4.5)/5);

ieDiv.all.c.all[0].style.left=Xpos+cntr*Math.sin((RunTime+i*4.5)/5);

}

cntr+=1;

RunTime+=speed;

stp=setTimeout('msi()',10);

if (cntr>=100)

{

cntr=100;

speed=2.5;

for (i=0;i<ieDiv.all.c.all.length;i++)

{

ieDiv.all.c.all[i].style.visibility='visible';

ieDiv.all.c.all[i].style.top=Ypos+cntr*Math.cos((RunTime-100)*i/90);

ieDiv.all.c.all[i].style.left=Xpos+cntr*Math.sin((RunTime-100)*i/90);

}

}

if (RunTime>182)

{

speed=0.5;

for (i=0;i<ieDiv.all.c.all.length;i++)

{

ieDiv.all.c.all[i].style.top=Ypos+xcntr*Math.cos(((RunTime-182)+i*4.5)/5);

ieDiv.all.c.all[i].style.left=Xpos+xcntr*Math.sin(((RunTime-182)+i*4.5)/5)*Math.cos((RunTime-182)/5);

}

}

}

if (RunTime>210)

{

xcntr-=10;

}

if (document.layers)

_y=-window.innerWidth-90;

else if (document.all)

_y=-document.body.clientWidth-90;

if (xcntr <= _y)

{

RunTime=0;

speed=1;

cntr=0;

xcntr=100;

}

}

msi()

//-->

</script>

</body>

</html>

  评论这张
 
阅读(106)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017