首页
 导航
语文
作文
 手机
客服中心
投稿赚钱
免费注册
首页
当前位置：查字典教程网 >网页设计 >交互设计教程 >一个简单的鼠标划过切换效果
一个简单的鼠标划过切换效果
摘要：上次帮朋友写过的一个简单切换效果,超级简单,但也比较适用.因为用到了CSSSprite技术,DEMO中附带了IE6兼容png的JS.核心Ja...

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

一个简单的鼠标划过切换效果1
核心JavaScript代码:

//@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")}
    }
}

【一个简单的鼠标划过切换效果】相关文章：

★ 专为设计师而写的GITHUB快速入门教程

★ 一组优秀的着陆页网站欣赏

★ 游戏常用的岩石字体效果制作

★ 一个优秀的交互设计师是怎样练成的？

★ 6个实用技巧帮你提升SKETCH使用效率

★ 10个提高网站可用性的经验指南

★ 15个优秀的音乐人网站设计赏析

★ 中小型企业如何应对高额的传播和营销成本

★ 7个创意惊人的文本展示特效页面

★ 如何进行简单的网站设计

上一篇： 一个基于jQuery的图片翻转效果
相关阅读
更多>>
网友关注
更多>>
网友最新关注视频
更多>>
精品推荐
分类导航
网页设计子分类
最新交互设计教程学习
热门交互设计教程学习