用Javascript实现Agent(网页精灵)(1)
来源:互联网 发布:软件架构设计师认证 编辑:程序博客网 时间:2024/05/21 18:46
一直觉得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;
}
}
- 用Javascript实现Agent(网页精灵)(1)
- 用Javascript实现Agent(网页精灵)
- 用Javascript实现Agent(实现右键菜单)(2)
- agent 小精灵
- 用JavaScript实现网页时钟
- 用Javascript实现鼠标拖拽网页表单(1)
- 用Javascript 实现网页的消息循环?
- 用javascript实现强制网页全屏
- javascript实现网页后退
- Microsoft Agent动画精灵人物解析
- 网页精灵图制作
- HotSpot Serviceability Agent 实现浅析#1
- 网页软键盘 (javascript实现)
- javascript实现网页的跳转
- Javascript实现网页标题滚动
- javascript实现在线聊天网页
- 纯javascript 实现网页copy
- [原创]用JavaScript在网页中实现掩码文本框
- HANDY ONE-LINERS FOR SED
- 关于blog起名的随感
- 在linux下设置开机自动启动程序的方法(一)
- 使用Ant打包Ear配置步骤说明
- plug-in for eclipse 3X
- 用Javascript实现Agent(网页精灵)(1)
- at blogcn :http://www.blogcn.com/User8/tojava/index.html
- Context-Free Languages
- The Church-Turing Thesis
- 谈软件的价值--读国内软件业陷入“三输”怪圈 正走向慢性自杀
- 理解XForm——学习IBM DW的资料 (3)
- Decidability
- 论家居、卧室(转自javaeye)
- 理解XForm——学习IBM DW的资料 (4)