鼠标特效一群群的蚂蚁爬向鼠标 (新)
把下列代码加到网页的<body></body>标签之间 从google下载我的照片管理软件要完成此效果需要三个步骤
第一步：把如下代码加入到<head>区域中
<style type="text/css">
.ant {
height: 16px;
position: absolute;
visibility: hidden;
width: 16px;
}
.30pt{font-size:30pt;color:red;font-family:汉鼎繁淡古}
</style>
<script language="javascript">
<!--
var dir = "ants/";
var images = new array(
dir+"antdl.gif",
d
ir+"antdn.gif",
dir+"antdr.gif",
dir+"antlt.gif",
dir+"antrt.gif",
dir+"antul.gif",
d
ir+"antup.gif",
dir+"antur.gif"
);
var isminns4 = (document.layers) ? 1 : 0;
var isminie4 =
(document.all) ? 1 : 0;
var _lbimglist;
var _lbimgcount;
var _lbbase = "lbbase";
var _lblow
= "lblow";
var _lbhigh = "lbhigh";
var _lbwidth;
var _lbheight;
var _lbbaselayer;
var
_lblowlayer;
var _lbhighlayer;
function createloadbar(width, height, bdsize, bdcolor, bgcolor,
fgcolor, fontface, fontsize, text) {
var txtlow, txthigh, tblstart, tblend;
var str;
txtlow=
'<font color="' + fgcolor + '" face="' + fontface + '" size=' + fontsize + '>' + text +
'</font>';
txthigh = '<font color="' + bgcolor+ '" face="' + fontface + '" size=' + fontsize +
'>' + text + '</font>';
tblstart = '<table border=0 cellpadding=0 cellspacing=0 height=100%
width=100%><tr valign="center"><td align="center">';
tblend = '</td></tr></table>';
if
(isminns4)
str = '<layer name="' + _lbbase + '" bgcolor="' + bdcolor + '" width=' + width + '
height=' + height + ' visibility="hide">\n'
+ '<layer name="' + _lblow+ '" bgcolor="' +
bgcolor + '" left=' + bdsize + ' top=' + bdsize + ' width=' + (width - 2 * bdsize) + ' height=' +
(height - 2 * bdsize) + '>' + tblstart + txtlow + tblend + '</layer>\n'
+ '<layer name="' +
_lbhigh + '" bgcolor="' + fgcolor + '" left=' + bdsize + ' top=' + bdsize + ' width=' + (width -
2 * bdsize) + ' height=' + (height - 2 * bdsize) + '>' + tblstart + txthigh + tblend +
'</layer>\n'
+ '</layer>';
if (isminie4)
str = '<div id="' + _lbbase + '"
style="position:absolute; background-color:' + bdcolor + '; width:' + width + 'px; height:' +
height + 'px; visibility:hidden;">\n'
+ '<div id="' + _lblow+ '" style="position:absolute;
background-color=' + bgcolor + '; left:' + bdsize + 'px; top:' + bdsize + 'px; width:' + (width -
2 * bdsize) + 'px; height:' + (height - 2 * bdsize) + 'px;">' + tblstart + txtlow + tblend +
'</div>\n'
+ '<div id="' + _lbhigh+ '" style="position:absolute; background-color=' + fgcolor
+ '; left:' + bdsize + 'px; top:' + bdsize + 'px; width:' + (width - 2 * bdsize) + 'px; height:'
+ (height - 2 * bdsize) + 'px;">' + tblstart + txthigh + tblend + '</div>\n'
+ '</div>';
d
ocument.writeln(str);
_lbwidth = width - 2 * bdsize;
_lbheight = height - 2 * bdsize;
}
function
startloadbar(srclist, x, y) {
var i, w, h;
if (isminns4) {
_lbbaselayer =
document.layers;
_lblowlayer= _lbbaselayer.document.layers;
_lbhighlayer =
_lbbaselayer.document.layers;
}
if (isminie4) {
_lbbaselayer =
eval('document.all.' + _lbbase);
_lblowlayer= eval('document.all.' + _lblow);
_lbhighlayer
= eval('document.all.' + _lbhigh);
}
if (isminns4) {
w = window.innerwidth;
h =
window.innerheight;
}
if (isminie4) {
w = document.body.clientwidth;
h =
document.body.clientheight;
}
if (x == null)
x = math.round((w- _lbwidth)/ 2);
if (y
== null)
y = math.round((h - _lbheight) / 2);
movelayerto(_lbbaselayer, x, y);
cliplayer(_lbhighlayer, 0, 0, 0, _lbheight);
showlayer(_lbbaselayer);
_lbimgcount = 0;
_lbimglist = new array();
for (i = 0; i < srclist.length; i++) {
_lbimglist = new
image();
_lbimglist.onabort = _lbupdate;
_lbimglist.onerror = _lbupdate;
_lbimglist.onload= _lbupdate;
}
for (i = 0; i < srclist.length; i++)
_lbimglist.src
= srclist;
}
function endloadbar() { // empty (can be changed) function called when
finished
}
function _lbupdate() {
var pct;
_lbimgcount++;
pct = _lbimgcount /
_lbimglist.length;
cliplayer(_lbhighlayer, 0, 0, math.round(pct * _lbwidth), _lbheight);
if
(_lbimgcount == _lbimglist.length) {
settimeout('hidelayer(_lbbaselayer)', 500);
endloadbar();
}
}
function movelayerto(layer, x, y) {
if (isminns4)
layer.moveto(x, y);
if (isminie4) {
l
ayer.style.left = x;
layer.style.top= y;
}
}
function hidelayer(layer) {
if (isminns4)
l
ayer.visibility = "hide";
if (isminie4)
layer.style.visibility = "hidden";
}
function
getwindowwidth() {
if (isminns4)
return(window.innerwidth);
if (isminie4)
r
eturn(document.body.offsetwidth);
return(-1);
}
function getwindowheight() {
if (isminns4)
r
eturn(window.innerheight);
if (isminie4)
return(document.body.offsetheight);
return(-1);
}
f
unction getpagescrollx() {
if (isminns4)
return(window.pagexoffset);
if (isminie4)
r
eturn(document.body.scrollleft);
return(-1);
}
function getpagescrolly() {
if (isminns4)
r
eturn(window.pageyoffset);
if (isminie4)
return(document.body.scrolltop);
return(-1);
}
function
getheight(layer) {
if (isminns4) {
if (layer.document.height)
return(layer.document.height);
e
lse
return(layer.clip.bottom - layer.clip.top);
}
if (isminie4) {
if (false &&
layer.style.pixelheight)
return(layer.style.pixelheight);
else
return(layer.clientheight);
}
r
eturn(-1);
}
function getwidth(layer) {
if (isminns4) {
if (layer.document.width)
r
eturn(layer.document.width);
else
return(layer.clip.right - layer.clip.left);
}
if (isminie4) {
i
f (layer.style.pixelwidth)
return(layer.style.pixelwidth);
else
return(layer.clientwidth);
}
r
eturn(-1);
}
function getleft(layer) {
if (isminns4)
return(layer.left);
if (isminie4)
r
eturn(layer.style.pixelleft);
return(-1);
}
function gettop(layer) {
if (isminns4)
r
eturn(layer.top);
if (isminie4)
return(layer.style.pixeltop);
return(-1);
}
function
getright(layer) {
if (isminns4)
return(layer.left + getwidth(layer));
if (isminie4)
r
eturn(layer.style.pixelleft + getwidth(layer));
return(-1);
}
function getbottom(layer) {
if
(isminns4)
return(layer.top + getheight(layer));
else if (isminie4)
return(layer.style.pixeltop +
getheight(layer));
return(-1);
}
function movelayerby(layer, dx, dy) {
if (isminns4)
l
ayer.moveby(dx, dy);
if (isminie4) {
layer.style.pixelleft += dx;
layer.style.pixeltop+= dy;
}
}
f
unction showlayer(layer) {
if (isminns4)
layer.visibility = "show";
if (isminie4)
l
ayer.style.visibility = "visible";
}
function cliplayer(layer, clipleft, cliptop, clipright,
clipbottom) {
if (isminns4) {
layer.clip.left = clipleft;
layer.clip.top= cliptop;
l
ayer.clip.right= clipright;
layer.clip.bottom = clipbottom;
}
if (isminie4)
layer.style.clip =
'rect(' + cliptop + ' ' +clipright + ' ' + clipbottom + ' ' + clipleft +')';
}
var mousex = 0;
v
ar mousey = 0;
if (isminns4)
document.captureevents(event.mousemove);
document.onmousemove =
getmouseposition;
function init() {
startloadbar(images);
}
function getmouseposition(e) {
if
(isminns4) {
mousex = e.pagex;
mousey = e.pagey;
}
if (isminie4) {
mousex = event.clientx +
document.body.scrollleft;
mousey = event.clienty + document.body.scrolltop;
}
return true;
}
var
ants = new array(8);
function endloadbar() {
var i;
for (i = 0; i < ants.length; i++) {
if
(isminns4) {
ants = document.layers["ant" + (i + 1)];
ants.image =
ants.document.images["antimg" + (i + 1)];
}
if (isminie4) {
ants = eval('document.all.ant'
+ (i + 1));
ants.image = document.images["antimg" + (i + 1)];
}
initant(i);
s
howlayer(ants);
}
updateants();
}
function initant(n) {
var s, x, y;
x =
math.floor(math.random() * getwindowwidth());
y = math.floor(math.random() * getwindowheight());
s
= math.floor(math.random() * 4);
if (s == 0)
x = -getwidth(ants);
if (s == 1)
x =
getwindowwidth();
if (s == 2)
y = -getheight(ants);
if (s == 3)
y = getwindowheight();
x +=
getpagescrollx();
y += getpagescrolly();
movelayerto(ants, x, y);
}
function updateants() {
v
ar i, dx, dy, theta, d;
d = 3;
for (i = 0; i < ants.length; i++) {
dx = mousex -
getleft(ants);
dy = mousey - gettop(ants);
theta = math.round(math.atan2(-dy, dx) * 180 /
math.pi);
if (theta < 0)
theta += 360;
if (math.abs(dx) < d && math.abs(dy) < d)
initant(i);
else
if (theta > 22.5 && theta <= 67.5) {
movelayerby(ants, d, -d);
ants.image.src =
dir+"antur.gif";
}
else if (theta > 67.5 && theta <= 112.5) {
movelayerby(ants, 0, -d);
a
nts.image.src = dir+"antup.gif";
}
else if (theta > 112.5 && theta <= 157.5) {
m
ovelayerby(ants, -d, -d);
ants.image.src = dir+"antul.gif";
}
else if (theta > 157.5 &&
theta <= 202.5) {
movelayerby(ants, -d, 0);
ants.image.src = dir+"antlt.gif";
}
else if
(theta > 202.5 && theta <= 247.5) {
movelayerby(ants, -d, d);
ants.image.src =
dir+"antdl.gif";
}
else if (theta > 247.5 && theta <= 292.5) {
movelayerby(ants, 0, d);
a
nts.image.src = dir+"antdn.gif";
}
else if (theta > 292.5 && theta <= 337.5) {
m
ovelayerby(ants, d, d);
ants.image.src = dir+"antdr.gif";
}
else {
movelayerby(ants, d,
0);
ants.image.src = dir+"antrt.gif";
}
}
settimeout('updateants()', 50);
return;
}
-->
<
/script>
第二步：把如下代码加入到<body>区域中
<script language="javascript">
createloadbar(240, 20, 1, "#000000", "#cccccc",
"#999999", "ms sans serif,arial,helvetica", 1, "<b>loading ants, please wait...</b>");
</script>
<div id="ant1" class="ant"><img name="antimg1" src="ants\transparent.gif" width=13
height=13>http://code.ik8.com/html/ants\transparent.gif</div>
<div id="ant2" class="ant"><img name="antimg2" src="ants\transparent.gif"
width=13 height=13>http://code.ik8.com/html/ants\transparent.gif</div>
<div id="ant3" class="ant"><img name="antimg3"
src="ants\transparent.gif" width=13 height=13>http://code.ik8.com/html/ants\transparent.gif</div>
<div id="ant4" class="ant"><img
name="antimg4" src="ants\transparent.gif" width=13 height=13>http://code.ik8.com/html/ants\transparent.gif</div>
<div id="ant5"
class="ant"><img name="antimg5" src="ants\transparent.gif" width=13 height=13>http://code.ik8.com/html/ants\transparent.gif</div>
<div
id="ant6" class="ant"><img name="antimg6" src="ants\transparent.gif" width=13 height=13>http://code.ik8.com/html/ants\transparent.gif</div>
<
div id="ant7" class="ant"><img name="antimg7" src="ants\transparent.gif" width=13
height=13>http://code.ik8.com/html/ants\transparent.gif</div>
<div id="ant8" class="ant"><img name="antimg8" src="ants\transparent.gif"
width=13 height=13>http://code.ik8.com/html/ants\transparent.gif</div>
第三步：把“onload="init()"”加在<body>标记里
例如：<body onload="init()">
页:
[1]