模板
教程
环境
性能
功能
管理
有趣的javascript程序：抓不到我！
发表于：2007-06-30来源：作者：点击数：
标签：
你只消把这段程序代码剪贴到你自己页面的head区段里面: script language=JavaScript !-- /* Elusive image script by Paul Anderson, copyright 2001 CNET Builder.com. May be freely used with attribution. Not for resale. 你可以用以下的原始碼在同一個
你只消把这段程序代码剪贴到你自己页面的<head>区段里面:<script language="JavaScript">
<!--
/* Elusive image script by Paul Anderson, copyright 2001 CNET Builder.com.
May be freely used with attribution. Not for resale.
你可以用以下的原始碼在同一個頁面裡頭放入多張不同的圖片。將這裡的三個 unique_id 替換成
某個你自己取的唯一的名字（不過可別用 swtLoc 這個名字，它在這個程式裡面是個保留字），
然後把四組寬度與高度作適當的調整。
<layer name="unique_id" width=100 height=200>
<div id="unique_id" style="position:relative;width:100;height:200;top:0;left:0;">
<a href="#" onmouseOver="swtRun(@#unique_id@#)" onmouseout="swtDiv=null">
<img src="img.gif" width=100 height=200 border=0></a>
</div></layer><ilayer name="swtLoc" width=100 height=200></ilayer>
*/
var oldX=0,oldY=0,newX,newY,xDir,yDir,swtDiv
function swtFlee(arg) {
ev=arg?arg:event;
newX=ev.pageX?(isNaN(ev.pageX)?0:ev.pageX):ev.clientX;
newY=ev.pageY?(isNaN(ev.pageY)?0:ev.pageY):ev.clientY;
xDir=5*(newX-oldX);
yDir=5*(newY-oldY);
oldX=newX;
oldY=newY;
maxW=document.width?document.width:document.body.clientWidth;
maxH=document.height?document.height:document.body.clientHeight;
if (swtDiv) {
if (document.layers) swtDiv.style=swtDiv;
divW=swtDiv.clip?swtDiv.clip.width:parseInt(swtDiv.style.width);
divH=swtDiv.clip?swtDiv.clip.height:parseInt(swtDiv.style.height);
swtDiv.style.left=parseInt(swtDiv.style.left)+xDir;
swtDiv.style.top=parseInt(swtDiv.style.top)+yDir;
if (newX <= divW) swtDiv.style.left=parseInt(swtDiv.style.left)+divW;
if (newX >= maxW-divW) swtDiv.style.left=parseInt(swtDiv.style.left)-divW;
if (newY <= divH) swtDiv.style.top=parseInt(swtDiv.style.top)+divH;
if (newY >= maxH-divH) swtDiv.style.top=parseInt(swtDiv.style.top)-divH;
}
}
function swtRun(divID) {
swtDiv=document.getElementById?document.getElementById(divID):document.all?document.all[divID]:document.layers?document.layers[divID]:null;
}
function initFlee() {
if (document.layers) {
document.captureEvents(Event.MOUSEMOVE);
for (i=0;i<document.layers.length-1;i++) {
if (document.layers[i+1].name.substr(0,6)=="swtLoc") {
document.layers[i].moveTo(document.layers[i+1].pageX,document.layers[i+1].pageY);
}
}
}
document.onmousemove=swtFlee;
}
window.onload=initFlee;
//-->
</script>
然后把你想要拿来跟客人玩躲猫猫的图片用下面这段 HTML 打点一下就成了：
<layer name="unique_id" width=100 height=200>
<div id="unique_id" style="position:relative;width:100;height:200;top:0;left:0;">
<a href="#" onmouseOver="swtRun(@#unique_id@#)" onmouseout="swtDiv=null">
<img src="img.gif" width=100 height=200 border=0></a>
</div></layer><ilayer name="swtLoc" width=100 height=200></ilayer>
把上面出现的三个unique_id替换成某个你自己取的唯一的名字（不过可别用swtLoc这个名字，它在这个程序里面是个保留字），然后把四组宽度与高度作适当的调整。你可以用上面的原始码在同一个页面里头放入多张不同的图片。感谢这段程序！这些图片全都会立刻变得超级害羞，看到鼠标光标靠近就立刻躲到旁边去。而且就像 Java 版本那样，还真有些白痴家伙会乐此不疲地连续几个钟头追着这些图片跑哩！
