一群群的蚂蚁爬向鼠标 (新)

作者：佚名来源：不详发布时间：2006-10-29 0:44:43 发布人：admin

要完成此效果需要三个步骤

第一步：把如下代码加入到<head>区域中

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[_LBbase];
  _LBlowLayer  = _LBbaseLayer.document.layers[_LBlow];
  _LBhighLayer =

_LBbaseLayer.document.layers[_LBhigh];
  }
  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[i] = new

Image();
  _LBimgList[i].onabort = _LBupdate;
  _LBimgList[i].onerror = _LBupdate;

_LBimgList[i].onload  = _LBupdate;
  }
  for (i = 0; i < srcList.length; i++)
  _LBimgList[i].src

= srcList[i];
  }
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[i] = document.layers["ant" + (i + 1)];
ants[i].image =

ants[i].document.images["antimg" + (i + 1)];
}
if (isMinIE4) {
ants[i] = eval('document.all.ant'

+ (i + 1));
ants[i].image = document.images["antimg" + (i + 1)];
}
initAnt(i);
s

howLayer(ants[i]);
}
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[n]);
if (s == 1)
x =

getWindowWidth();
if (s == 2)
y = -getHeight(ants[n]);
if (s == 3)
y = getWindowHeight();
x +=

getPageScrollX();
y += getPageScrollY();
moveLayerTo(ants[n], x, y);
}
function updateAnts() {
v

ar i, dx, dy, theta, d;
d = 3;
for (i = 0; i < ants.length; i++) {
dx = mouseX -

getLeft(ants[i]);
dy = mouseY - getTop(ants[i]);
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[i], d, -d);
ants[i].image.src =

dir+"antur.gif";
}
else if (theta > 67.5 && theta <= 112.5) {
moveLayerBy(ants[i], 0, -d);
a

nts[i].image.src = dir+"antup.gif";
}
else if (theta > 112.5 && theta <= 157.5) {
m

oveLayerBy(ants[i], -d, -d);
ants[i].image.src = dir+"antul.gif";
}
else if (theta > 157.5 &&

theta <= 202.5) {
moveLayerBy(ants[i], -d, 0);
ants[i].image.src = dir+"antlt.gif";
}
else if

(theta > 202.5 && theta <= 247.5) {
moveLayerBy(ants[i], -d, d);
ants[i].image.src =

dir+"antdl.gif";
}
else if (theta > 247.5 && theta <= 292.5) {
moveLayerBy(ants[i], 0, d);
a

nts[i].image.src = dir+"antdn.gif";
}
else if (theta > 292.5 && theta <= 337.5) {
m

oveLayerBy(ants[i], d, d);
ants[i].image.src = dir+"antdr.gif";
}
else {
moveLayerBy(ants[i], d,

0);
ants[i].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 src="http://www.netton.cn/js/ants/transparent.gif" width=13

height=13 onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)"></div>
<div id="ant2" class="ant"><img src="http://www.netton.cn/js/ants/transparent.gif"

width=13 height=13 onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)"></div>
<div id="ant3" class="ant"><img src="http://www.netton.cn/js/ants/transparent.gif" width=13 height=13 onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)"></div>
<div id="ant4" class="ant"><img src="http://www.netton.cn/js/ants/transparent.gif" width=13 height=13 onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)"></div>
<div id="ant5"

class="ant"><img src="http://www.netton.cn/js/ants/transparent.gif" width=13 height=13 onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)"></div>
<div

id="ant6" class="ant"><img src="http://www.netton.cn/js/ants/transparent.gif" width=13 height=13 onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)"></div>
<

div id="ant7" class="ant"><img src="http://www.netton.cn/js/ants/transparent.gif" width=13

height=13 onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)"></div>
<div id="ant8" class="ant"><img src="http://www.netton.cn/js/ants/transparent.gif"

width=13 height=13 onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)"></div>

第三步：把“OnLoad="init()"”加在<body>标记里
例如：<body OnLoad="init()">

特别说明：如网页特效代码中有引用图片文件等，请自己下载到本地调试！

[] [返回] [打印] [收藏] [评论]

上一篇代码：萤火虫儿似的

下一篇代码：鼠标点击效果 (爽)

一群群的蚂蚁爬向鼠标 (新)

精品推荐

代码分类

阅读排行

相关代码