10个经典的网页鼠标特效代码
程序员文章站
2022-04-29 12:06:23
1、鼠标指向出现实用特殊提示
1、鼠标指向出现实用特殊提示
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="zh-cn" />
<title>css打造鼠标触发效果</title>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
color: #000;
font-size: 12px;
line-height: 160%;
text-align: left;
height: 100%;
font-family: '宋体',tahoma ,arial,verdana,sans-serif,'lucida grande','lucida sans unicode';
}
*{ margin:0; padding:0;}
h2,h2 a:link,h2 a:hover,h2 a:visited{
font-size: 14px;
text-decoration: none;
color: #000000;
}
.kw_from {
padding:20px 0 0 0px;
margin: auto;
height: 300px;
overflow: hidden;
width: 650px;
}
.kw_from .sbtn{
float:left;
width:80px;
padding: 16px 0 0 0;
}
.kw_from .searchmore{
float:left;
width:80px;
padding: 4px;
}
#searchnav {
width:430px;
float: left;
}
#searchnav #conter1, #searchnav #conter3{
float:left;
width:250px;
}
#searchnav #conter2, #searchnav #conter4{
float:left;
width:180px;
}
#searchnav ul {
padding: 0;
margin: 0;
list-style: none;
}
#searchnav li {
float: left;
}
#searchnav li ul {
display: none;
top: 20px;
}
#searchnav li:hover ul, #searchnav li.over ul {
display: block;
float:left;
}
#searchnav ul li a{
float:left;
display:block;
font-size:12px;
padding:3px;
text-decoration: none;
color: #777;
}
#searchnav ul li a:hover{
background-color:#f4f4f4;
}
#searchnav #jobkw{
width:220px;
height:18px;
}
#searchnav #citykw{
width:130px;
height:18px;
}
-->
</style>
<script type="text/javascript">
<!--//--><![cdata[//>
<!--
startlist = function() {
if (document.all&&document.getelementbyid) {
navroot = document.getelementbyid("searchnav");
for (i=0; i<navroot.childnodes.length; i++) {
node = navroot.childnodes[i];
if (node.nodename=="li") {
node.onmouseover=function() {
this.classname+=" over";
}
node.onmouseout=function() {
this.classname=this.classname.replace(" over", "");
}
}
}
}
}
window.onload=startlist;
//--><!]]>
</script>
</head>
<body>
<div class="kw_from">
<form action="/search.html" method="get" name="searchform" id="searchform" onsubmit="return check()">
<ul id="searchnav">
<li id="conter1"><h2>找什么</h2>
<input id="jobkw" name="jobkw" type="text" />
<ul id="conter3">
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >会计</a> </li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >网页设计</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >翻译</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >家教</a></li>
<li><span class="morecity"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >更多>> </a></span></li>
</ul>
</li>
<li id="conter2"><h2>在那里</h2>
<input id="citykw" name="citykw" type="text" />
<ul id="conter4">
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >北京</a> </li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >上海</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >广州</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >深圳</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >南京</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >天津</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >杭州</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >成都</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >重庆</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >武汉</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >西安</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >沈阳</a></li>
<li><span class="morecity"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >更多城市>></a></span></li>
</ul>
</li>
</ul>
<div class="sbtn">
<input name="submit" type="submit" class="btn4" style="margin:0px 15px 2px 0;" value="搜索工作" />
</div>
<div class="searchmore">
<a href="search_expert.html" rel="external nofollow" >高级搜索</a><br /><a href="search_sort.html" rel="external nofollow" >分类搜索</a> </div>
</form>
</div>
</body>
</html>
2、跟随鼠标的流星
<html>
<head>
<title>网页特效---跟随鼠标的流星</title>
<meta content="text/html; charset=gb2312" http-equiv="content-type">
</head>
<body bgcolor="#000000">
<script language="javascript">
<!--
clrs=new array('ff0000','00ff00','ffffff','ff00ff','ffa500','ffff00','00ff00','ffffff','ff00ff')
var speed=1;
var runtime = 0;
var cntr=0;
var xcntr=100;
var nslayers;
var pulse=25;
var onclrs;
var xpos = 421;
var ypos = 231;
var _y;
if (document.layers){
window.captureevents(event.mousemove);
function xfollowmouse(evnt){
xpos = evnt.pagex;
ypos = evnt.pagey;
}
window.onmousemove = xfollowmouse;
document.write('<layer name="a0" left=10 top=10 bgcolor="#ff0000" clip="0,0,2,2"></layer>'
+'<layer name="a1" left=10 top=10 bgcolor="#00ff00" clip="0,0,2,2"></layer>'
+'<layer name="a2" left=10 top=10 bgcolor="#ffffff" clip="0,0,2,2"></layer>'
+'<layer name="a3" left=10 top=10 bgcolor="#ffa500" clip="0,0,2,2"></layer>'
+'<layer name="a4" left=10 top=10 bgcolor="#ff00ff" clip="0,0,2,2"></layer>'
+'<layer name="a5" left=10 top=10 bgcolor="#8888ff" clip="0,0,2,2"></layer>'
+'<layer name="a6" left=10 top=10 bgcolor="#fff000" clip="0,0,2,2"></layer>');
}
else if (document.all){
function followmouse(){
xpos = document.body.scrollleft+event.x;
ypos = document.body.scrolltop+event.y;
}
document.onmousemove = followmouse;
document.write('<div id="iediv" style="position:absolute;top:0px;left:0px">'
+'<div id="c" style="position:relative">'
+'<div style="position:absolute;top:0px;left:0px;width:2px;height:2px;background:#ff0000;font-size:2px"></div>'
+'<div style="position:absolute;top:0px;left:0px;width:2px;height:2px;background:#00ff00;font-size:2px"></div>'
+'<div style="position:absolute;top:0px;left:0px;width:2px;height:2px;background:#ffffff;font-size:2px"></div>'
+'<div style="position:absolute;top:0px;left:0px;width:2px;height:2px;background:#ffa500;font-size:2px"></div>'
+'<div style="position:absolute;top:0px;left:0px;width:2px;height:2px;background:#ff00ff;font-size:2px"></div>'
+'<div style="position:absolute;top:0px;left:0px;width:2px;height:2px;background:#8888ff;font-size:2px"></div>'
+'<div style="position:absolute;top:0px;left:0px;width:2px;height:2px;background:#fff000;font-size:2px"></div>'
+'</div>'
+'</div>');
}
function sv2(){
if (document.layers){
for (i=0;i<7;i++)
{
nslayers="a"+i;
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);
var randcol=math.round(math.random()*8);
document.layers[0].bgcolor=clrs[randcol];
}
cntr+=1;
runtime+=speed;
stp=settimeout('sv2()',10);
if (cntr>=100)
{
cntr=100;
speed=2.5;
for (i=0;i<7;i++)
{
nslayers="a"+i;
document.layers[nslayers].top=ypos+cntr*math.cos((runtime-100)*i/90);
document.layers[nslayers].left=xpos+cntr*math.sin((runtime-100)*i/90);
}
}
if (runtime>182)
{
speed=0.5;
for (i=0;i<7;i++)
{
nslayers="a"+i;
document.layers[nslayers].top=ypos+xcntr*math.cos(((runtime-182)+i*4.5)/5)*math.cos((runtime-182)/5);
document.layers[nslayers].left=xpos+xcntr*math.sin(((runtime-182)+i*4.5)/5);
}
}
}
else if (document.all){
for (i=0;i<iediv.all.c.all.length;i++)
{
var randcol=math.round(math.random()*8);
iediv.all.c.all[0].style.background=clrs[randcol];
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;
window.status=runtime;
stp=settimeout('sv2()',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.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)*math.cos((runtime-182)/5);
iediv.all.c.all[i].style.left=xpos+xcntr*math.sin(((runtime-182)+i*4.5)/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;
}
}
sv2()
//-->
</script>
</body>
</html>
3、跟随鼠标的三色彩带
<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>
4、鼠标经过滚动提示文字
<a href="http://www.网址.com" rel="external nofollow" _fcksavedurl="http://www.网址.com" target="_blank" onmouseover="helpor_net_show(this,event,'网页鼠标特效')" onmouseout="helpor_net_hide()">把鼠标放上来试试</a>
<div id="tooltip2" style="position:absolute;visibility:hidden;clip:rect(0 150 50 0);width:150px;background-color:seashell">
<layer name="nstip" width="1000px" bgcolor="seashell"></layer>
</div>
<script language="javascript">
<!--
if (!document.layers&&!document.all)
event="test"
function helpor_net_show(current,e,text){
if (document.all&&document.readystate=="complete"){
document.all.tooltip2.innerhtml='<marquee style="border:1px solid #3399ff">'+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 helpor_net_hide(){
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>
5、围绕鼠标旋转的三叶空间旋浆
<html>
<head>
<title>围绕鼠标旋转的三叶空间旋浆</title>
<meta content="text/html; charset=gb2312" http-equiv="content-type">
</head>
<body bgcolor="#000000">
<script
language="javascript">
<!--
//to add more stars simply add more colours in below array!!
colours=new array('ff0000','00ff00','3366ff','ff00ff','ffa500','ffffff','fff000')
//alter nothing below!!
amount=colours.length;
ygetdelay=0,xgetdelay=0,ydelay=0,xdelay=0,ns=(document.layers)?1:0,step=0.2,currstep=0,my=0,mx=0;
if (ns){
for (i=0; i < amount; i++)
document.write('<layer name="nsstars'+i+'" bgcolor='+colours[i]+' clip="0,0,2,2"></layer>');
}
else{
document.write('<div id="ie" style="position:absolute;top:0;left:0;"><div style="position:relative">');
for (i=0; i < amount; i++)
document.write('<span id="iestars" style="position:absolute;top:0;left:0;width:2px;height:2px;background:'+colours[i]+';font-size:2px"></span>');
document.write('</div></div>');
}
if (ns){
window.captureevents(event.mousemove);
function nmouse(evnt){
my=evnt.pagey;mx=evnt.pagex
}
window.onmousemove=nmouse;
}
else{
function imouse(){
my=event.y;mx=event.x;
}
document.onmousemove=imouse
}
function stars(){
if (!ns)ie.style.top=document.body.scrolltop;
for (i=0; i < amount; i++)
{
var layer=(document.layers)?document.layers["nsstars"+i]:iestars[i].style;
layer.top= ydelay+100*math.sin((5*math.sin((currstep-15.99)/10))+i*70)*math.sin((currstep)/10)*math.cos((currstep+i*25)/10);
layer.left=xdelay+180*math.cos((5*math.sin((currstep-15.99)/10))+i*70)*math.sin((currstep)/10)*math.cos((currstep+i*25)/10);
}
currstep+=step;
}
function delay(){
ydelay = ygetdelay+=(my-ygetdelay)*1/20;
xdelay = xgetdelay+=(mx-xgetdelay)*1/20;
stars();
settimeout('delay()',10);
}
delay();
//-->
</script>
<script language="javascript">
<!-- hide
function gohist(a)
{
history.go(a);
}
//-->
</script>
</body>
</html>
6、围绕鼠标的立体星环（摩天轮）
<html>
<head>
<title>围绕鼠标的立体星环</title>
<meta content="text/html; charset=gb2312" http-equiv="content-type">
<script language="javascript">
<!--
ns=(document.layers)?1:0;
clrs=new array('ff0000','00ff00','ffffff','ff00ff','ffa500','ffff00','00ff00','ffffff','ff00ff')
var amount=8
var step=0.3;
var currstep=0;
var ypos=0;
var xpos=0;
if (ns){
for (i=0; i < amount; i++)
document.write('<layer name="n'+i+'" left=0 top=0 bgcolor=#ffffff clip="0,0,2,2"></layer>');
window.captureevents(event.mousemove);
function nmouse(evnt){
ypos = evnt.pagey;
xpos = evnt.pagex;
}
window.onmousemove=nmouse;
}
else{
document.write('<div style="position:absolute;top:0px;left:0px">');
document.write('<div style="position:relative">');
for (i=0; i < amount; i++)
document.write('<div id="me" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#00aaff"></div>');
document.write('</div></div>');
function imouse(){
ypos=event.y+document.body.scrolltop;
xpos=event.x+document.body.scrollleft;
}
document.onmousemove = imouse;
}
function comet(){
for (i=0; i < amount; i++){
var randcol=math.floor(math.random()*clrs.length);
var layer=(document.layers)?document.layers['n'+i]:me[i].style;
layer.top =ypos+60*math.sin((currstep + i*3.1)/4)*math.cos(currstep/10);
layer.left=xpos+60*math.cos((currstep + i*3.1)/4);
if (ns) layer.bgcolor=clrs[randcol];else layer.background=clrs[randcol];
}
currstep+=step;
settimeout("comet()",10);
}
window.onload=comet;
// -->
</script>
</head>
<body bgcolor="#000000">
</body>
</html>
7、围绕鼠标的立体旋转文字
<html>
<head>
<title>围绕鼠标的立体旋转文字</title>
<meta content="text/html; charset=gb2312" http-equiv="content-type">
<meta content="microsoft frontpage 5.0" name="generator">
</head>
<body>
<script language="javascript">
<!-- begin
if (document.all) {
yourlogo = "网页制作大宝库"; //not less than 2 letters!
logofont = "arial";
logocolor = "ff0000";
//nothing needs altering below!
yourlogo = yourlogo.split('');
l = yourlogo.length;
trigsplit = 360 / l;
sz = new array()
logowidth = 100;
logoheight = -30;
ypos = 0;
xpos = 0;
step = 0.09;
currstep = 0;
document.write('<div id="outer" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < l; i++) {
document.write('<div id="ie" style="position:absolute;top:0px;left:0px;'
+'width:10px;height:10px;font-family:'+logofont+';font-size:12px;'
+'color:'+logocolor+';text-align:center">'+yourlogo[i]+'</div>');
}
document.write('</div></div>');
function mouse() {
ypos = event.y;
xpos = event.x - 5;
}
document.onmousemove=mouse;
function animatelogo() {
outer.style.pixeltop = document.body.scrolltop;
for (i = 0; i < l; i++) {
ie[i].style.top = ypos + logoheight * math.sin(currstep + i * trigsplit * math.pi / 180);
ie[i].style.left = xpos + logowidth * math.cos(currstep + i * trigsplit * math.pi / 180);
sz[i] = ie[i].style.pixeltop - ypos;
if (sz[i] < 5) sz[i] = 5;
ie[i].style.fontsize = sz[i] / 1.7;
}
currstep -= step;
settimeout('animatelogo()', 20);
}
window.onload = animatelogo;
}
// end -->
</script>
</body>
</html>
8、跟随鼠标的日期时间表盘
<html>
<head>
<title>跟随鼠标的日期时间表盘</title>
</head><body>
<!--将以下代码加入html的<body></body>之间-->
<script language=javascript>
<!--
dcol="0000ff"
fcol="ff0000"
scol="00ff00"
mcol="000000"
hcol="000000"
clockheight=40;
clockwidth=40;
clockfrommousey=0;
clockfrommousex=100;
d=new array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
m=new array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");
date=new date();
day=date.getdate();
year=date.getyear();
if (year < 2000) year=year+1900;
todaysdate="年 "+m[date.getmonth()]+" "+day+"日 "+d[date.getday()]+" "+year;
d=todaysdate.split('');
h='...';
h=h.split('');
m='....';
m=m.split('');
s='.....';
s=s.split('');
face='1 2 3 4 5 6 7 8 9 10 11 12';
font='arial';
size=1;
speed=0.6;
ns=(document.layers);
ie=(document.all);
face=face.split(' ');
n=face.length;
a=size*10;
ymouse=0;
xmouse=0;
scrll=0;
props="<font face="+font+" size="+size+" color="+fcol+">";
props2="<font face="+font+" size="+size+" color="+dcol+">";
split=360/n;
dsplit=360/d.length;
handheight=clockheight/4.5
handwidth=clockwidth/4.5
handy=-7;
handx=-2.5;
scrll=0;
step=0.06;
currstep=0;
y=new array();x=new array();y=new array();x=new array();
for (i=0; i < n; i++){y[i]=0;x[i]=0;y[i]=0;x[i]=0}
dy=new array();dx=new array();dy=new array();dx=new array();
for (i=0; i < d.length; i++){dy[i]=0;dx[i]=0;dy[i]=0;dx[i]=0}
if (ns){
for (i=0; i < d.length; i++)
document.write('<layer name="nsdate'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props2+d[i]+'</font></center></layer>');
for (i=0; i < n; i++)
document.write('<layer name="nsface'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+face[i]+'</font></center></layer>');
for (i=0; i < s.length; i++)
document.write('<layer name=nsseconds'+i+' top=0 left=0 width=15 height=15><font face=arial size=3 color='+scol+'><center><b>'+s[i]+'</b></center></font></layer>');
for (i=0; i < m.length; i++)
document.write('<layer name=nsminutes'+i+' top=0 left=0 width=15 height=15><font face=arial size=3 color='+mcol+'><center><b>'+m[i]+'</b></center></font></layer>');
for (i=0; i < h.length; i++)
document.write('<layer name=nshours'+i+' top=0 left=0 width=15 height=15><font face=arial size=3 color='+hcol+'><center><b>'+h[i]+'</b></center></font></layer>');
}
if (ie){
document.write('<div id="od" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < d.length; i++)
document.write('<div id="iedate" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props2+d[i]+'</font></div>');
document.write('</div></div>');
document.write('<div id="of" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="ieface" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+face[i]+'</font></div>');
document.write('</div></div>');
document.write('<div id="oh" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < h.length; i++)
document.write('<div id="iehours" style="position:absolute;width:16px;height:16px;font-family:arial;font-size:16px;color:'+hcol+';text-align:center;font-weight:bold">'+h[i]+'</div>');
document.write('</div></div>');
document.write('<div id="om" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < m.length; i++)
document.write('<div id="ieminutes" style="position:absolute;width:16px;height:16px;font-family:arial;font-size:16px;color:'+mcol+';text-align:center;font-weight:bold">'+m[i]+'</div>');
document.write('</div></div>')
document.write('<div id="os" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < s.length; i++)
document.write('<div id="ieseconds" style="position:absolute;width:16px;height:16px;font-family:arial;font-size:16px;color:'+scol+';text-align:center;font-weight:bold">'+s[i]+'</div>');
document.write('</div></div>')
}
(ns)?window.captureevents(event.mousemove):0;
function mouse(evnt){
ymouse = (ns)?evnt.pagey+clockfrommousey-(window.pageyoffset):event.y+clockfrommousey;
xmouse = (ns)?evnt.pagex+clockfrommousex:event.x+clockfrommousex;
}
(ns)?window.onmousemove=mouse:document.onmousemove=mouse;
function clockandassign(){
time = new date ();
secs = time.getseconds();
sec = -1.57 + math.pi * secs/30;
mins = time.getminutes();
min = -1.57 + math.pi * mins/30;
hr = time.gethours();
hrs = -1.575 + math.pi * hr/6+math.pi*parseint(time.getminutes())/360;
if (ie){
od.style.top=window.document.body.scrolltop;
of.style.top=window.document.body.scrolltop;
oh.style.top=window.document.body.scrolltop;
om.style.top=window.document.body.scrolltop;
os.style.top=window.document.body.scrolltop;
}
for (i=0; i < n; i++){
var f=(ns)?document.layers['nsface'+i]:ieface[i].style;
f.top=y[i] + clockheight*math.sin(-1.0471 + i*split*math.pi/180)+scrll;
f.left=x[i] + clockwidth*math.cos(-1.0471 + i*split*math.pi/180);
}
for (i=0; i < h.length; i++){
var hl=(ns)?document.layers['nshours'+i]:iehours[i].style;
hl.top=y[i]+handy+(i*handheight)*math.sin(hrs)+scrll;
hl.left=x[i]+handx+(i*handwidth)*math.cos(hrs);
}
for (i=0; i < m.length; i++){
var ml=(ns)?document.layers['nsminutes'+i]:ieminutes[i].style;
ml.top=y[i]+handy+(i*handheight)*math.sin(min)+scrll;
ml.left=x[i]+handx+(i*handwidth)*math.cos(min);
}
for (i=0; i < s.length; i++){
var sl=(ns)?document.layers['nsseconds'+i]:ieseconds[i].style;
sl.top=y[i]+handy+(i*handheight)*math.sin(sec)+scrll;
sl.left=x[i]+handx+(i*handwidth)*math.cos(sec);
}
for (i=0; i < d.length; i++){
var dl=(ns)?document.layers['nsdate'+i]:iedate[i].style;
dl.top=dy[i] + clockheight*1.5*math.sin(currstep+i*dsplit*math.pi/180)+scrll;
dl.left=dx[i] + clockwidth*1.5*math.cos(currstep+i*dsplit*math.pi/180);
}
currstep-=step;
}
function delay(){
scrll=(ns)?window.pageyoffset:0;
dy[0]=math.round(dy[0]+=((ymouse)-dy[0])*speed);
dx[0]=math.round(dx[0]+=((xmouse)-dx[0])*speed);
for (i=1; i < d.length; i++){
dy[i]=math.round(dy[i]+=(dy[i-1]-dy[i])*speed);
dx[i]=math.round(dx[i]+=(dx[i-1]-dx[i])*speed);
}
y[0]=math.round(y[0]+=((ymouse)-y[0])*speed);
x[0]=math.round(x[0]+=((xmouse)-x[0])*speed);
for (i=1; i < n; i++){
y[i]=math.round(y[i]+=(y[i-1]-y[i])*speed);
x[i]=math.round(x[i]+=(x[i-1]-x[i])*speed);
}
clockandassign();
settimeout('delay()',40);
}
if (ns||ie)window.onload=delay;
//-->
</script>
</body></html>
9、很有特色的荧光鼠标
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<title>很有特色的荧光鼠标</title>
<meta name="generator" content="microsoft frontpage 5.0">
</head>
<body id="mybody" style="filter:light(enabled=1);" bgcolor="#ffffff" text="#000000">
<div
id="layer1" style="height: 32; left: 66; position: absolute; top: 41; width: 52">
<dd>
<div align="right">
<img src="images/light.gif" width="29" height="30"> </div>
</dd>
</div>
<p align="center"><b><font size="5">日落大道上的亚洲男孩 </font></b>
</p>
<table border="0" width="100%">
<tr>
<td width="82%"><font face="宋体" color="#ff00ff" style="font-size: 9pt">
</font><span style="font-size: 9pt">
人人爱谈张爱玲，尤其在论及服饰的时候。我不能免俗，也来附庸风雅一番。张爱玲纪念文集提到她逝世时的寓所，地址非常眼熟，后来才知道那公寓就在uc
la正门附近。我和朋友好奇心起，课后前去朝圣一番，发现果真就是文集照片中的公寓，只不过屋前绿树茁壮更胜以往，和目前公寓的灰暗色调形成讽刺对比。耳闻张爱玲生前喜欢在ucla附近不时搬迁，居无定所，像一头中枪后逃逸的狐狸，不停回头将沿路滴落的血迹舐去，以免猎人循迹跟上。 <br>
<br>
我以刚出道的猎人口吻说∶传言中张的住所很狼狈，她的衣物都随便搁在纸箱或超级市场收集来的塑胶袋里唷。 <br>
<br>
比我早来洛杉矶数年的同行朋友却说∶有何奇怪？我的衣物书籍也都塞在纸箱和塑胶袋里。搬家的时候反而方便啊。 <br>
<br>
朋友的粗廉生活让我很不以为然；当时我才初抵美国未久。 <br>
<br>
试想，任何华丽的衣裳只要一落进超级市场塑胶袋，看起来就像垃圾。把生活尽数装在塑胶袋里，岂不是将自己完全垃圾化？ <br>
<br>
但，在开始租屋、收集家具之后，我也开始世故驯化。留学生余钱无多，时常面临搬家压力。因此，我很少购衣；如要花钱，选择并不多。 <br>
<br>
从ucla门口驱车南行，经过张爱玲故居，就来到了”ross“成衣批发店。ross陈列满坑满谷的名牌服饰，但因都是瑕疵品，比如说胸口的商标掉到肚脐位置的马球衫之类，张冠李戴，品质荒唐，所以售价低廉。许多经济能力较差的黑人和墨西哥人就来这里翻索便宜的ck、耐吉、dkny；我加入他们肤色鲜艳的行列，结帐时将微疵的战利品装在塑胶袋里－而非百货公司的雅痞纸袋。说不定当年张爱玲也曾经蹋著脸徒步到这里找便宜货，混迹各色人种之间，没有人认出她何许人也。 <br>
<br>
虽然每次光顾ross都省了钱，而且享受与有色人种站在同一阵线的政治正确虚荣感，但每一次的经验都极其卑微沮丧。好莱坞电影中，彩色画报里，那种昂首阔步走进香蕉*的潇洒意象，在现实美国里却好遥远。还是认份光顾量贩店，站在平庸空间里排队，细细咀嚼外国人的贫穷滋味。 <br>
<br>
时装海报里，那些空灵的躯干之间，并没有留下什么空位给我者。 <br>
<br>
在日落大道两岸，巨幅时装广告海报一张张浮悬空中，像敦煌壁画，海报里俊男美女睥睨众生，佛似的自在庄严，日落大道一如当代加 <br>
<br>
州的丝路。af，abercrombie ＆ fitch的白人男孩在阳光下微笑展示金身，好生慈悲。我猜美国当前年轻男性最风靡的服饰品牌之一大概就是af，青春的傲慢包装成若无其事的天真潇洒。难怪校园里穿af的大男孩比比皆是（怪的是，任何人穿了af就会变得性感）；许多男同志也表示，看了af男孩就会流口水（许多人在徵友广告中表明，想要找af风格的男孩）。记得春天清晨我行过波士顿哈佛大学，赫然发现哈佛广场前最招摇的海报就来自af，金发男孩的美丽笑脸占据了整个橱窗，诡异的意象。光是一张笑脸就比一家书店还要庞大。我望之却步了。 <br>
<br>
</span></td>
</tr>
</table>
<script language="vbscript">
dim red,gre,blu
dim x,y,z
red=255
gre=255
blu=0
z=100
sub window_onload()
call mybody.filters.light.addpoint(0,0,z,red,gre,blu,100)
mybody.style.cursor="hand"
end sub
sub document_onmousemove()
x=window.event.x
y=window.event.y
call mybody.filters.light.movelight(0, x, y, 100, 1)
end sub
</script>
<script language="javascript">
//这是使图层移动的函数
function move_layer()
{
layer1.style.left=event.clientx+document.body.scrollleft-50;
layer1.style.top=event.clienty+document.body.scrolltop-20;
}
//这里的意思是，如果鼠标移动时就调用"move_layer"函数
document.onmousemove =move_layer;
</script>
</body>
</html>
10、跟随鼠标的幻影文字
<html>
<head>
<title>中国站长站--跟随鼠标的幻影文字</title>
</head>
<body>
<script language="javascript">
<!-- begin
message = '欢迎访问网页制作大宝库!';
font = 'verdana';
color = 'ff0000';
size = 3; //1 to 7 only!
var amount = 5, ypos =- 50, xpos = 0, ay = 0, ax = 0, by = 0, bx = 0, cy = 0, cx = 0, dy = 0, dx = 0, ey = 0, ex = 0;
if (document.layers) {
for (i = 0; i < amount; i++) {
document.write('<layer name=nsl'+i+' top=0 left=0><font face='+font+' size='+size+' color='+color+'>'+message+'</font></layer>');
}
window.captureevents(event.mousemove);
function nsmouse(evnt) {
xpos = evnt.pagex + 20;
ypos = evnt.pagey + 20;
}
window.onmousemove = nsmouse;
}
else if (document.all) {
document.write("<div id='outer' style='position:absolute;top:0px;left:0px'>");
document.write("<div style='position:relative'>");
for (i = 0; i < amount; i++) {
document.write('<div id="text"'+i+' style="position:absolute;top:0px;left:0px;width:400px;height:20px"><font face='+font+' size='+size+' color='+color+'>'+message+'</font></div>')
}
document.write("</div>");
document.write("</div>");
function iemouse() {
ypos = event.y + 20;
xpos = event.x + 20;
}
window.document.onmousemove = iemouse;
}
function makefollow() {
if (document.layers) {
document.layers['nsl'+0].top = ay;
document.layers['nsl'+0].left = ax;
document.layers['nsl'+1].top = by;
document.layers['nsl'+1].left = bx;
document.layers['nsl'+2].top = cy;
document.layers['nsl'+2].left = cx;
document.layers['nsl'+3].top = dy;
document.layers['nsl'+3].left = dx;
document.layers['nsl'+4].top = ey;
document.layers['nsl'+4].left = ex;
}
else if (document.all) {
outer.style.pixeltop = document.body.scrolltop;
text[0].style.pixeltop = ay;
text[0].style.pixelleft = ax;
text[1].style.pixeltop = by;
text[1].style.pixelleft = bx;
text[2].style.pixeltop = cy;
text[2].style.pixelleft = cx;
text[3].style.pixeltop = dy;
text[3].style.pixelleft = dx;
text[4].style.pixeltop = ey;
text[4].style.pixelleft = ex;
}
}
function move() {
ey = ey += (ypos - ey) * 0.2;
ex = ex += (xpos - ex) * 0.2;
dy = dy += (ey - dy) * 0.3;
dx = dx += (ex - dx) * 0.3;
cy = cy += (dy - cy) * 0.4;
cx = cx += (dx - cx) * 0.4;
by = by += (cy - by) * 0.5;
bx = bx += (cx - bx) * 0.5;
ay = ay += (by - ay) * 0.6;
ax = ax += (bx - ax) * 0.6;
makefollow();
settimeout('move()', 100);
}
window.onload=move;
// end -->
</script>
</body>
</html>
上一篇： js推箱子小游戏步骤代码解析
下一篇： 详解webpack babel的配置