javascript鼠标效果

18、鼠标感应弹出警告
====1、将以下代码加入到HTML的<body></body>之间:

<a href onmouseover="alert('^-^哈哈上当了')">笑林广记?</a>  
19、跟随鼠标的小星星
====1、将以下代码加入到HEML的<head></head>之间:

<STYLE TYPE="text/css">
<!--
BODY{
overflow:scroll;
overflow-x:hidden;
}
.s1
{
position : absolute;
font-size : 12pt;
color : blue;
visibility: hidden;
}
.s2
{
position : absolute;
font-size : 20pt;
color : red;
visibility : hidden;
}
.s3
{
position : absolute;
font-size : 16pt;
color : gold;
visibility : hidden;
}
.s4
{
position : absolute;
font-size : 14pt;
color : lime;
visibility : hidden;
}
-->
</STYLE>

====2、将以下代码加入HTML的<body></body>之间:

<DIV ID="div1" CLASS="s1">*</DIV>
<DIV ID="div2" CLASS="s2">*</DIV>
<DIV ID="div3" CLASS="s3">*</DIV>
<DIV ID="div4" CLASS="s4">*</DIV>
<script language="javascript" type="text/javascript" class="s5">
var nav = (document.layers);
var tmr = null;
var spd = 50;
var x = 0;
var x_offset = 5;
var y = 0;
var y_offset = 15;
if(nav) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = get_mouse; 
function get_mouse(e)
{ 
x = (nav) ? e.pageX : event.clientX+document.body.scrollLeft;
y = (nav) ? e.pageY : event.clientY+document.body.scrollTop;
x += x_offset;
y += y_offset;
beam(1); 
}
function beam(n)
{
if(n<5)
{
if(nav)
{ 
eval("document.div"+n+".top="+y);
eval("document.div"+n+".left="+x);
eval("document.div"+n+".visibility='visible'");
} 
else
{
eval("div"+n+".style.top="+y);
eval("div"+n+".style.left="+x);
eval("div"+n+".style.visibility='visible'");
}
n++;
tmr=setTimeout("beam("+n+")",spd);
}
else
{
clearTimeout(tmr);
fade(4);
} 
} 
function fade(n)
{
if(n>0) 
{
if(nav)eval("document.div"+n+".visibility='hidden'");
else eval("div"+n+".style.visibility='hidden'"); 
n--;
tmr=setTimeout("fade("+n+")",spd);
}
else clearTimeout(tmr);
}
// -->
</script>
</body> 
20、跟随鼠标的文字
====1、将以下代码加入HTML的<body></body>之间

<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[i]=-50}
var ypos=new Array()
for (i=0;i<=message.length-1;i++) {
ypos[i]=-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[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("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[i])
document.write("</span>")}
if (document.layers){
document.captureEvents(Event.MOUSEMOVE);}
document.onmousemove = handlerMM;
</script>
21、跟随鼠标的图片
====1、将以下的代码加入到HEML的<head></head>之间:

<!-- 以下代码是设定smile的代码 -->
<script LANGUAGE="JavaScript">
var newtop=0
var newleft=0
if (navigator.appName == "Netscape") {
layerStyleRef="layer.";
layerRef="document.layers";
styleSwitch="";
}
else
{
layerStyleRef="layer.style.";
layerRef="document.all";
styleSwitch=".style";
}
function doMouseMove() {
layerName = 'iit'
eval('var curElement='+layerRef+'["'+layerName+'"]')
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"')
eval('curElement'+styleSwitch+'.visibility="visible"')
eval('newleft=document.body.clientWidth-curElement'+styleSwitch+'.pixelWidth')
eval('newtop=document.body.clientHeight-curElement'+styleSwitch+'.pixelHeight')
eval('height=curElement'+styleSwitch+'.height')
eval('width=curElement'+styleSwitch+'.width')
width=parseInt(width)
height=parseInt(height)
if (event.clientX > (document.body.clientWidth - 5 - width))
{
newleft=document.body.clientWidth + document.body.scrollLeft - 5 - width
}
else
{
newleft=document.body.scrollLeft + event.clientX
}
eval('curElement'+styleSwitch+'.pixelLeft=newleft')
if (event.clientY > (document.body.clientHeight - 5 - height))
{
newtop=document.body.clientHeight + document.body.scrollTop - 5 - height
}
else
{
newtop=document.body.scrollTop + event.clientY
}
eval('curElement'+styleSwitch+'.pixelTop=newtop')
}
document.onmousemove = doMouseMove;
</script>

====2、将以下代码加入到HEML的<body></body>之间:

<!-- 以下代码是设定此页的鼠标样式代码 -->
<script language="javascript">
if (navigator.appName == "Netscape") {
}
else
{
document.write('<div ID=OuterDiv>')
document.write('<img ID=iit src="想要显示的图片.gif" STYLE="position:absolute;
TOP:5pt;LEFT:5pt;Z-INDEX:10;visibility:hidden;">') document.write('</div>') } </script>
22、跟随鼠标的小虫子
====1、将以下代码加入HEML的<body></body>之间:

<script language="JavaScript">
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
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) { 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> <body> <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> </body>
17、鼠标感应逐显图象
====1、将以下代码加入HTML的&lt;head>&lt;/head>之间:

&lt;script language="JavaScript1.2">
function makevisible(cur,which){
if (which==0)
cur.filters.alpha.opacity=100
else
cur.filters.alpha.opacity=20
}
&lt;/script>

====2、将以下代码加入到HTML的&lt;body>&lt;body>之间:

&lt;img src="想要显示的图片.gif" style="filter:alpha(opacity=20)"
onMouseOver="makevisible(this,0)" onMouseOut="makevisible(this,1)">

你可能感兴趣的:(JavaScript)