Use JavaScript to implement the agent (web page genie) (1)

I have always thought that agent is a good choice for website navigation and help. Unfortunately, Ms agent only supports IE, and it seems that the loading speed is not very fast. After analysis, I think javascript can definitely be used, I used to copy Javascript in the past, so I took this opportunity to thoroughly learn it. OK, let's begin

Since Javascript is an object-based language, we can also design our own agent based on the OO idea.

We hope that the client will be okay after a simple call, which should be in the following form.

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

<Script language = "JavaScript">
<! --
VaR agent = new agent ();
Agent. Run ();
// -->
</SCRIPT>

First, we will create an agent. js. It is easy to create an object by providing a constructor.

Function agent ()
{
This. imgagent = "images/agent.gif ";
}

The next task is to let this object have a run method. This method should only output the final piece of HTML. Let's simply implement it first.

Agent. Prototype. Run = function ()
{
VaR agenthtml = "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 );
}

From aboveCodeWe can see that the first sprite effect we implemented is that we can drag the genie to any place on the interface. We only need to implement onmousedown, onmousemove, and onmousemove events.

VaR currentmoveobj = NULL; // The current dragged object.

This. setimage = function (IMG)
{
Imgagent = IMG;
}
Function dblclick (OBJ)
{
OBJ. src = "images/chaosai.gif ";
}
Function mousedown (OBJ)
{
Currentmoveobj = OBJ; // This object is recorded when the object is pressed.
// Check the information. setcapture indicates:
// Capture the focus object when an event is triggered and keep the mouse focus bound to this object.
// It is critical. Otherwise, the sensitivity will be low.
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;
}
}