Home > Developer > JavaScript
Mouse event (up)
With the course going on, fewer and fewer people will be able to follow. I don't know if it's because there aren't many performances, but it's just something to remember, and everyone is not interested. In fact, on the webpage
A lot of special effects, most of the actions are implemented using javascript, without javascript web pages, just like a person without muscles. However, all actions are controlled by functions.
The control statement is the foundation of the Foundation. I hope you can learn it with patience. Today's course is easy to learn.
The main content is mouse-based events, which are as follows:
1. mouseover (move the mouse over)
2. mouseout (move the mouse out)
3. mousemove (move the mouse)
4. mousedown (press the mouse)
5. mouseup)
6. click (click)
7. dblclick (double-click)
Usually 1 and 2 are used together. When a user moves the mouse to a hyperlink or another element, the mouseover event will occur, and mouseout will always accompany it, because when the mouse
When you exit, the mouseout event will occur.
Example:
<Html>
<Head>
<Title> test </title>
<Script language = "javascript">
Function text_onmouseover (){
Mytext. style. fontSize = "30pt ";
Mytext. style. color = "red ";
Mytext. style. fontStyle = "italic ";
}
Function text_onmouseout (){
Mytext. style. fontSize = "20pt ";
Mytext. style. color = "blue ";
Mytext. style. fontStyle = "normal ";
}
</Script>
</Head>
<Body>
<P id = mytext onmouseover = "text_onmouseover ()" onmouseout = "text_onmouseout ()"> http://www.javascript.com.cn </p>
<P> check the font style changes. </p>
</Body>
</Html>
Two functions are defined here to change the font style. We will explain the functions in detail later.
(Note: ie supports mouseover and mouseout events for all elements on the page, but for netscape navigator, only hyperlinks and layers support these events .)
The following is an example of moving the mouse:
<Html>
<Body onMousemove = "micro $ oftMouseMove ()">
<Script language = "JavaScript">
If (navigator. appName = 'netscape ')
{
Document. captureEvents (Event. MOUSEMOVE );
Document. onmousemove = netscapeMouseMove;
}
Function netscapeMouseMove (e ){
If (e. screenX! = Document. test. x. value & e. screenY! = Document. test. y. value)
{
Document. test. x. value = e. screenX;
Document. test. y. value = e. screenY;
}
}
Function micro $ oftMouseMove (){
If (window. event. x! = Document. test. x. value & window. event. y! = Document. test. y. value)
{
Document. test. x. value = window. event. x;
Document. test. y. value = window. event. y;
}
}
</SCRIPT>
<Form name = "test">
X: <input type = "TEXT" NAME = "x" SIZE = "4"> Y: <INPUT
TYPUE = "TEXT" NAME = "y" SIZE = "4">
</FORM>
</Body>
</Html>
There are many mouse-moving events that use the mouse-following effect. You can see the mouse-following effect. More than n online.
(Note: There is a problem in the process of starting this event, that is, it may block other events. In addition, the page processing time is also added, and should be used as little as possible .)
Let's talk about the other four events of the mouse in the next section.
Today's job is:
1. Converting the image Link (when the mouse is placed, It is an image, and when the mouse is left, it is another image)
2. The image follows the mouse (when the mouse moves, an image moves with the mouse)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
