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

原创 2004年09月15日 13:34:00

一直觉得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(网页精灵)

一直觉得Agent是用来做网站导航和帮助的不错选择,可惜MS Agent只有IE支持,而且好像加载速度不是很快,分析了一下觉得用Javascript绝对可以做到,以前对Javascript都是抄来抄去...
  • johnsonzhouws
  • johnsonzhouws
  • 2005年12月13日 22:46
  • 629

JSAgent2.0发布,加入说话功能

JSAgent2.0发布:加入了说话功能,简单调用say函数,精灵就会把你想说的话绘制在屏幕截图:下载:https://gro.clinux.org/frs/?group_id=643...
  • changzheng
  • changzheng
  • 2004年12月01日 18:54
  • 720

JavaScript实现水印

html> html lang="en"> head> meta charset="UTF-8"> title>JavaScript实现网页动态水印title> script ...
  • qq_16557323
  • qq_16557323
  • 2017年08月22日 10:30
  • 134

一个基于JavaScript的简单网页计算器

一个基于JavaScript的简单网页计算器,真的很简单。 效果如下: A simple Calculator .number{ ...
  • Youyou_0826
  • Youyou_0826
  • 2017年04月20日 14:26
  • 1296

浅析桌面精灵的实现

1.    软件的开发目的想必大家对桌面精灵很熟悉吧,想不想自己编一个?笔者非常想编一个,其目的居然是为了取得美眉的喜欢,由此引出了我开发本软件的目的。如果读者有我同样的需求,那么请继续看下去,我将和...
  • formated
  • formated
  • 2002年01月02日 15:06
  • 1132

用Javascript实现Agent(实现右键菜单)(2)

用Javascript实现Agent(实现右键菜单)既然是显示右键菜单,那么我们就要截获对精灵按右键时的事件oncontextmenu然后将右键菜单的html封装到一个函数,一上来这个菜单层是隐藏的f...
  • changzheng
  • changzheng
  • 2004年09月16日 10:32
  • 1166

compass 制作精灵图

用compass快速制作精灵图 1.现在images文件夹新建一个文件夹装各种小图标,命名为Icon; 2.然后再sass文件加上这几句命令: @import "compass/utilitie...
  • maoguiyou
  • maoguiyou
  • 2015年04月24日 23:06
  • 1273

Javascript在一个页面实现图片库

思路: 1、通过增加一个“占位符”图片的办法在主页上为图片预留一个浏览区域。 2、在点击导航链接时,拦截这个网页的默认行为。不让其转到另一个窗口。 3、在点击导航俩解释...
  • liuyingshuai_blog
  • liuyingshuai_blog
  • 2017年01月15日 16:36
  • 268

javascript实现页面跳转的几种方式

转自: http://www.cnblogs.com/ylch222/archive/2010/06/07/1752975.html 第一种:跳转  window.loca...
  • caixiexin
  • caixiexin
  • 2011年09月01日 16:20
  • 2642

网页精灵图制作

CSS sprite在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢...
  • qq_36456952
  • qq_36456952
  • 2017年03月13日 10:50
  • 2056
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用Javascript实现Agent(网页精灵)(1)
举报原因:
原因补充:

(最多只允许输入30个字)