<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>网页特效---爬向鼠标的好多蚂蚁</title> </head> <body> <style type="text/css"> .ant { height: 16px; position: absolute; visibility: hidden; width: 16px; } </style> <SCRIPT LANGUAGE="JavaScript"> var dir = "images/"; var images = new Array( dir+"antdl.gif", dir+"antdn.gif", dir+"antdr.gif", dir+"antlt.gif", dir+"antrt.gif", dir+"antul.gif", dir+"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>'; document.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() { } 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) { layer.style.left = x; layer.style.top = y; } } function hideLayer(layer) { if (isMinNS4) layer.visibility = "hide"; if (isMinIE4) layer.style.visibility = "hidden"; } function getWindowWidth() { if (isMinNS4) return(window.innerWidth); if (isMinIE4) return(document.body.offsetWidth); return(-1); } function getWindowHeight() { if (isMinNS4) return(window.innerHeight); if (isMinIE4) return(document.body.offsetHeight); return(-1); } function getPageScrollX() { if (isMinNS4) return(window.pageXOffset); if (isMinIE4) return(document.body.scrollLeft); return(-1); } function getPageScrollY() { if (isMinNS4) return(window.pageYOffset); if (isMinIE4) return(document.body.scrollTop); return(-1); } function getHeight(layer) { if (isMinNS4) { if (layer.document.height) return(layer.document.height); else return(layer.clip.bottom - layer.clip.top); } if (isMinIE4) { if (false && layer.style.pixelHeight) return(layer.style.pixelHeight); else return(layer.clientHeight); } return(-1); } function getWidth(layer) { if (isMinNS4) { if (layer.document.width) return(layer.document.width); else return(layer.clip.right - layer.clip.left); } if (isMinIE4) { if (layer.style.pixelWidth) return(layer.style.pixelWidth); else return(layer.clientWidth); } return(-1); } function getLeft(layer) { if (isMinNS4) return(layer.left); if (isMinIE4) return(layer.style.pixelLeft); return(-1); } function getTop(layer) { if (isMinNS4) return(layer.top); if (isMinIE4) return(layer.style.pixelTop); return(-1); } function getRight(layer) { if (isMinNS4) return(layer.left + getWidth(layer)); if (isMinIE4) return(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) layer.moveBy(dx, dy); if (isMinIE4) { layer.style.pixelLeft += dx; layer.style.pixelTop+= dy; } } function showLayer(layer) { if (isMinNS4) layer.visibility = "show"; if (isMinIE4) layer.style.visibility = "visible"; } function clipLayer(layer, clipleft, cliptop, clipright, clipbottom) { if (isMinNS4) { layer.clip.left = clipleft; layer.clip.top= cliptop; layer.clip.right= clipright; layer.clip.bottom = clipbottom; } if (isMinIE4) layer.style.clip = 'rect(' + cliptop + ' ' +clipright + ' ' + clipbottom + ' ' + clipleft +')'; } var mouseX = 0; var 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); showLayer(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() { var 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); ants[i].image.src = dir+"antup.gif"; } else if (theta > 112.5 && theta <= 157.5) { moveLayerBy(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); ants[i].image.src = dir+"antdn.gif"; } else if (theta > 292.5 && theta <= 337.5) { moveLayerBy(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 OnLoad="init()"> <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="transparent.gif" width=13 height=13></div> <div id="ant2" class="ant"><img name="antimg2" src="transparent.gif" width=13 height=13></div> <div id="ant3" class="ant"><img name="antimg3" src="transparent.gif" width=13 height=13></div> <div id="ant4" class="ant"><img name="antimg4" src="transparent.gif" width=13 height=13></div> <div id="ant5" class="ant"><img name="antimg5" src="transparent.gif" width=13 height=13></div> <div id="ant6" class="ant"><img name="antimg6" src="transparent.gif" width=13 height=13></div> <div id="ant7" class="ant"><img name="antimg7" src="transparent.gif" width=13 height=13></div> <div id="ant8" class="ant"><img name="antimg8" src="transparent.gif" width=13 height=13></div> </body> </html>
