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

王朝html/css/js·作者佚名  2006-01-09
窄屏简体版  字體: |||超大  

一直觉得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 += " onmousedown=\"mousedown(this)\"";

agentHtml += " onmouseup=\"mouseup()\"";

agentHtml += " onmousemove=\"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;

}

}

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航