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

Source: Internet
Author: User

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;
}
}

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.