您的位置:知识库 » Web前端

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

作者: Mr.Think  发布时间: 2010-09-07 11:23  阅读: 892 次  推荐: 0   原文链接   [收藏]  
摘要:文中作者提供了一个简单的鼠标划过切换效果,并且提供了一个Demo方便大家学习使用。

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

核心JavaScript代码:点此查看DEMO

1 //@Mr.Think获取对象属性兼容方法
2  function $(objectId) {
3 if(document.getElementById && document.getElementById(objectId)) {
4 return document.getElementById(objectId);// W3C DOM
5 } else if (document.all && document.all(objectId)) {
6 return document.all(objectId);// MSIE 4 DOM
7 } else if (document.layers && document.layers[objectId]) {
8 return document.layers[objectId];// NN 4 DOM..this won't find nested layers
9 } else {
10 return false;
11 }
12 }
13 //@Mr.Think切换显示文字和背景图位置
14 function iLeftNav(type) {
15 var inum,i_navinfo=$("i_navinfo");
16 if(type=="writeblog"){
17 inum="-300px";
18 }else if(type=="sharepic"){
19 inum="-600px";
20 }else if(type=="writemsg"){
21 inum="-900px";
22 }else{
23 inum="-300px";
24 }
25 i_navinfo.innerHTML=$(type).innerHTML;
26 i_navinfo.style.backgroundPosition=inum+" 0";
27 }
28 //@Mr.Think加载鼠标莫过事件
29 window.onload=function(){
30 var liitem=$("i_blognav").getElementsByTagName("li");
31 for(var i=0; i<liitem.length; i++){
32 liitem[0].onmouseover=function(){iLeftNav("writeblog")}
33 liitem[1].onmouseover=function(){iLeftNav("sharepic")}
34 liitem[2].onmouseover=function(){iLeftNav("writemsg")}
35 }
36 }

本文是一个简易的鼠标莫过效果,如果需要更酷更炫一点的效果,可点此查看cssrain写的基于jQuery的气泡提示效果.

0
0

Web前端热门文章

    Web前端最新文章

      最新新闻

        热门新闻