Before the Microsoft IE 5.0 version of the browser release, the biggest challenge in web programming is the inability to easily create components to achieve code reuse and multiple page sharing purposes. This problem has been plagued by DHTML (dynamic HEML) Web programmers. They can only repeatedly write HTML, CSS, and JavaScript code to meet repetitive or similar features on multiple pages. Since the release of IE 5.0 browser, this situation has been improved, it brings us a new instruction combination method, can implement specific functions of the code encapsulated in a component, so as to achieve multiple pages of code reuse, so that web programming into a new world. This new technology is what we're going to talk about in the DHTML "behavior" (behaviors).
Here's a little example of what I do:
Font_effect.htc
Copy Code code as follows:
"Behavior" document starts////////////////////////////
Add four mouse events to "behavior"
<public:attach event= "onmouseover" onevent= "Glowit ()"/>
<public:attach event= "onmouseout" onevent= "Noglow ()"/>
<public:attach event= "onmousedown" onevent= "Font2yellow ()"/>
<public:attach event= "onmouseup" onevent= "Font2blue ()"/>
Define two methods for "behavior", note that the value of name cannot be parenthesized
<public:method name= "Move_down"/>
<public:method name= "Move_right"/>
<script language = "JScript" >
Define a variable that holds the font color
var Font_color;
Define a way to move text down
function Move_down ()
{
Element.style.posTop + 10;
}
Define how to move text to the right
function Move_right ()
{
Element.style.posLeft + 10;
}
To define the call function for the mouse onmouseup event
function Font2blue ()
{
if (event.srcelement = = Element)
{
Element.style.color = "Blue";
}
}
To define the call function for the mouse onmousedown event
function Font2yellow ()
{
if (event.srcelement = = Element)
{
Element.style.color = "Yellow";
}
}
To define the call function for the mouse onmouseover event
function Glowit ()
{
if (event.srcelement = = Element)
{
Font_color=style.color;
Element.style.color = "White";
Element.style.filter = "Glow (color=red, strength=2)";
}
}
To define the call function for the mouse onmouseout event
function Noglow ()
{
if (event.srcelement = = Element)
{
Element.style.filter = "";
Element.style.color = Font_color;
}
}
</script>
"Behavior" document end///////////////////////////////
Htcexample.htm
Copy Code code as follows:
<title> Behavior Effect Demo </title>
<style>
.myfilter{behavior:url (FONT_EFFECT.HTC);p osition:relative;width:880}
</style>
<body>
<button onclick= "Myspan.move_right ();" > Move text </button>
<button onclick= to the right Myspan.move_down (); > Move text </button>
<br /><br />
<span id= "MySpan" class= ' myfilter ' > mouse pointer produces a glow, at the same time the text to white; Press the mouse after the text becomes yellow; After lifting the mouse, the text becomes blue. ; text restored after mouse left </span>
</body>
