A simple switch effect that I wrote to my friends last time is super simple, but it is also quite suitable. Because CSS sprite technology is used, the demo includes JS that IE6 is compatible with PNG.
Core JavaScript code:Click here to view the demo
// @ Mr. Think: How to Get Object Property compatibility
Function $ ( Objectid ) {
If ( Document . Getelementbyid && Document . Getelementbyid ( Objectid )) {
Return Document . Getelementbyid ( Objectid ) ; // W3C dom
} Else If ( Document . All && Document . All ( Objectid )) {
Return Document . All ( Objectid ) ; // MSIE 4 dom
} Else If ( Document . Layers && Document . Layers [ Objectid ]) {
Return Document . Layers [ Objectid ] ; // NN 4 Dom .. This won't find nested Layers
} Else {
Return False ;
}
}
// @ Mr. Think switch between the position of the displayed text and background image
Function Ileftnav ( Type ) {
VaR Inum , I _navinfo = $ ( " I _navinfo " ) ;
If ( Type = " Writeblog " ){
Inum = " -300px " ;
} Else If ( Type = " Sharepic " ){
Inum = " -600px " ;
} Else If ( Type = " Writemsg " ){
Inum = " -900px " ;
} Else {
Inum = " -300px " ;
}
I _navinfo . Innerhtml = $ ( Type ) . Innerhtml ;
I _navinfo . Style . Backgroundposition = Inum + " 0 " ;
}
// @ Mr. Think load the mouse over the event
Window . Onload = Function (){
VaR Liitem = $ ( " I _blognav " ) . Getelementsbytagname ( " Li " ) ;
For ( VaR I = 0 ; I < Liitem . Length ; I ++ ){
Liitem [ 0 ] . Onmouseover = Function (){ Ileftnav ( " Writeblog " )}
Liitem [ 1 ] . Onmouseover = Function (){ Ileftnav ( " Sharepic " )}
Liitem [ 2 ] . Onmouseover = Function (){ Ileftnav ( " Writemsg " )}
}
}
This article is a simple way to use CSS, but it is cumbersome. if you need a cool and cool effect, click here to view the jquery-based Bubble tip written by cssrain.
Published in mr. Think personal blog: http://mrthink.net/script-mousechange-simple/ reprint please note.
