上次帮朋友写过的一个简单切换效果,超级简单,但也比较适用.因为用到了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/

　　推荐阅读

　　Jquery ui css framework

Jquery ui中两大核心的css文件是ui.core.css和ui.theme.css.这两个css样式贯穿整个基于jquery ui的界面上，并且可以通过jquery ui ThemeRoller来生成自己的样式。 .ui-helper-hidden :为元素应用display:none .ui->>>详细阅读

本文标题：一个简单的js鼠标划过切换效果

地址：http://www.17bianji.com/kaifa2/JS/26114.html

 1/2    1