一个简单的鼠标划过切换效果

上次帮朋友写过的一个简单切换效果,超级简单,但也比较适用.因为用到了CSS Sprite技术,DEMO中附带了IE6兼容png的JS.

核心JavaScript代码:点此查看DEMO

//@Mr.Think获取对象属性兼容方法
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切换显示文字和背景图位置
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加载鼠标莫过事件
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 " )}
     }
}

本文是一个简易的鼠标莫过效果,用CSS亦可以实现,但相对烦琐. 如果需要更酷更炫一点的效果,可点此查看cssrain写的基于jQuery的气泡提示效果.

 

原文发布于Mr.Think的个人博客: http://mrthink.net/script-mousechange-simple/ 转载请注明.