Eight, simple introduction of CSS combined with JS application (for event action)
The use of CSS with JavaScript can do a lot of cool dynamic page effect, at the end of this tutorial to give you a brief introduction of CSS with JS application. First, we need to understand the concept of events and actions. In client script, JavaScript obtains interaction with the user by responding to the event. For example, when a user clicks a button or moves the mouse over a paragraph of text, a click event or mouse move event is triggered, and by responding to these events, a specific function can be completed (for example, clicking a button popup dialog, moving the mouse over the text, and then changing the color of the text). Here are a few common events (please refer to the relevant information for more events):
OnClick: Mouse click event. (refers to the mouse press, and then release the resulting.) ）
OnDblClick: Mouse Double-click event. (refers to the mouse that quickly presses, releases, and presses again when it is created.) ）
OnMouseDown: Mouse down event. (Generated when the mouse is pressed.) ）
OnMouseUp: Mouse Release event. (refers to the mouse from the pressed state to the pop up.) ）
OnMouseMove: Mouse Move event. (refers to moving the mouse over a specific element.) ) OnMouseOver: Mouse over event. (refers to when the pointer moves from the outside to the element.) ）
onMouseOut: Mouse left event. (refers to when the mouse leaves from a particular element.) ）
OnLoad: Load event. (occurs when an image or page ends loading.) ）
OnUnload: Unload event. (generated when a visitor leaves the page.) ）
Onscroll: Scroll bar scrolling event. (Generated when the visitor uses the scroll to move up or down.) ）
After the event, we add action to the event. Here only to change the current element of the custom style of action, we can use this method to set two custom CSS style, the object originally called the first style, when the mouse event generated when the object is applied to the second CSS style, and the resulting mouse effect, see the following example.
Insert an image into the Web page, customize an ". Out" style, and use the gray filter to make the picture black and white:
Apply this custom style to the picture, preview the picture in the browser into black and white, we define a style ". Over", this style has no content, is empty style, style sheet code is as follows:
<style type= "Text/css" >
<!--
. OVER {}
. Out {Filter:gray}
-
</style>
Then add "onmouseover=" this.classname= ' over ' "onmouseout=" to This.classname= ' out ' "in the picture Tag (IMG), meaning that when the mouse passes, the picture is over style, color normal image; When the mouse leaves, the picture is an out style, that is, black and white images. Omouseover and onmouseout are mouse events, this.classname= "..." means that the current object's class name is ..., note that capitalization is not wrong, JS is very sensitive to case.
This effect is completed, after saving in the browser open, the image is black and white, when the mouse moves up, the image becomes color, the mouse left, the image changed back to black and white. As long as your imagination, through the This.classname method can also make a lot of good mouse effects.
