用Javascript实现Agent(网页精灵)(1)

一直觉得Agent是用来做网站导航和帮助的不错选择，可惜MS Agent只有IE支持，而且好像加载速度不是很快，分析了一下觉得用Javascript绝对可以做到，以前对Javascript都是抄来抄去，趁此机会也彻底学一学。OK,Let's Begin

Javascript既然是基于对象的语言，那么大体上我们也可以按照OO的思路来设计自己的Agent

我们希望客户端简单调用一下就OK了，应当是如下的形式。

<script src="agent.js"></script>

<script language="JavaScript">
<!--
var agent = new Agent();
agent.run();
//-->
</script>

那么首先我们就来创建一个agent.js，js创建一个对象很简单只需要提供一个构造函数就OK了

function Agent()
{
 this.imgAgent = "images/agent.gif";
}

那么，接下来的任务就是让这个对象拥有一个run方法，这个方法应当仅仅就是输出最后拼凑好的html，我们先简单实现一下。

Agent.prototype.run=function()
{
 var agentHtml = "<img src="+this.imgAgent;
 agentHtml += " id=/"agent1/"";
 agentHtml += " style=/"position:absolute;left:50;top:50;cursor:move/"";
 agentHtml += " onselectstart=/"return false/"";
 agentHtml += " οnmοusedοwn=/"mousedown(this)/"";
 agentHtml += " οnmοuseup=/"mouseup()/"";
 agentHtml += " οnmοusemοve=/"mousemove()/"";
 agentHtml += ">";
 return document.write(agentHtml);
}

从上面代码可以看出，我们实现的第一个精灵效果就是可以拖动精灵到界面任意一个地方，只需实现一下onmousedown,onmousemove,onmousemove三个事件即可

var currentMoveObj = null;        //当前拖动对象

this.setImage=function(img)
{
 imgAgent = img;
}
function dblclick(obj)
{
 obj.src= "images/chaosai.gif";
}
function mousedown(obj)
{
 currentMoveObj = obj;               //当对象被按下时，记录该对象
 //查了一下资料setCapture的意思是：
 //捕捉触发事件时的焦点对象并使鼠标焦点始终绑定该对象。
 //很关键不然灵敏度会很低
 currentMoveObj.setCapture()
 relLeft = event.x - currentMoveObj.style.pixelLeft;
 relTop = event.y - currentMoveObj.style.pixelTop;
}
function mouseup()
{
 if(currentMoveObj!=null)
 {
  currentMoveObj.releaseCapture();
  currentMoveObj=null;
 }
}
function mousemove()
{
 if(currentMoveObj != null)
 {
  currentMoveObj.style.pixelLeft=event.x-relLeft;
  currentMoveObj.style.pixelTop=event.y-relTop;
 }
}