版权声明
·
网站留言
·
联系我们
·
加入收藏
热门关键词:
焦点图
png图标
背景
按钮
首页
PNG图标
广告代码
网页模板
字体下载
JS代码
CSS样式
技术文档
网站常用
gif图片
JPG图片
JavaScript用户手册
flash动画
jsp编程
.net编程
网站配色
网站优化
Oracle教程
JS技术
数据库编程
网络维护
html基础
安全相关
测试相关
知识扩展
CSS技术
DIV+CSS实例
DIV+CSS教程
鼠标特效
网站常用
文字特效
时间日期
图片特效
表格图层
导航菜单
网页特效
详细内容
首页
>>
JS
>>
鼠标特效
>> 正文
[
关闭窗口
]
爬向鼠标的好多蚂蚁
发布日期:2010-03-26
点击:3713
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>网页特效|站点基地【zdbase.com】|---爬向鼠标的好多蚂蚁</title> </head> <body> <style type="text/css"> .ant { height: 16px; position: absolute; visibility: hidden; width: 16px; } </style> <SCRIPT LANGUAGE="JavaScript"> var dir = "http://d.zdbase.com/srm/srm/work/Editor/UploadFile/"; var images = new Array( dir+"2010326234025949.gif", dir+"2010326234031137.gif", dir+"2010326234037280.gif", dir+"2010326234043766.gif", dir+"2010326234048761.gif", dir+"2010326234055264.gif", dir+"201032623412162.gif", dir+"201032623417805.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>
提示:您可以先修改部分代码再运行,复制代码和保存代码功能在Firefox下无效。
附件:
相关文章
关于我们
-
版权声明
-
联系我们
-
网站留言
-
网站地图
Copyright © 2010 zdbase.com All Rights Reserved.
苏ICP备15039389号
可人软件设计