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


Posted in Javascript onJune 30, 2010

上次帮朋友写过的一个简单切换效果,超级简单,但也比较适用.因为用到了CSS Sprite技术,DEMO中附带了IE6兼容png的JS.
一个简单的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/
Javascript 相关文章推荐
js url传值中文乱码之解决之道
Nov 20 Javascript
js显示时间 js显示最后修改时间
Jan 02 Javascript
深入理解JavaScript是如何实现继承的
Dec 12 Javascript
javascript设计模式--策略模式之输入验证
Nov 27 Javascript
JS异步文件上传(兼容IE8+)
Apr 02 Javascript
AngularJS基于factory创建自定义服务的方法详解
May 25 Javascript
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
JS实现点击发送验证码 xx秒后重新发送功能
Jul 30 Javascript
JS中==、===你分清楚了吗
Mar 04 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
js判断鼠标移入移出方向的方法
Jun 24 Javascript
JavaScript组合继承详解
Nov 07 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
Jun 30 #Javascript
Jquery AJAX 用于计算点击率(统计)
Jun 30 #Javascript
基于jquery的图片懒加载js
Jun 30 #Javascript
CSS和Javascript简单复习资料
Jun 29 #Javascript
javascript与CSS复习(三)
Jun 29 #Javascript
javascript与CSS复习(二)
Jun 29 #Javascript
javascript与CSS复习(《精通javascript》)
Jun 29 #Javascript
You might like
一个简单的MySQL数据浏览器
2006/10/09 PHP
php的chr和ord函数实现字符加减乘除运算实现代码
2011/12/05 PHP
php实现仿写CodeIgniter的购物车类
2015/07/29 PHP
表单提交错误后返回内容消失问题的解决方法(PHP网站)
2015/10/20 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
JavaScript 学习点滴记录
2009/04/24 Javascript
JS 自定义带默认值的函数
2011/07/21 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2011/09/13 Javascript
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
AngularJS中的指令全面解析(必看)
2016/05/20 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
2017/06/13 Javascript
React Native之TextInput组件解析示例
2017/08/22 Javascript
js排序与重组的实例讲解
2017/08/28 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
给Python中的MySQLdb模块添加超时功能的教程
2015/05/05 Python
python比较两个列表是否相等的方法
2015/07/28 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
Python的Tkinter点击按钮触发事件的例子
2019/07/19 Python
django使用django-apscheduler 实现定时任务的例子
2019/07/20 Python
Python socket 套接字实现通信详解
2019/08/27 Python
python传到前端的数据,双引号被转义的问题
2020/04/03 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
Python内置函数locals和globals对比
2020/04/28 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
2012/10/20 HTML / CSS
预订全球最佳旅行体验:Viator
2018/03/30 全球购物
加拿大城市本地限时优惠:Buytopia.ca
2018/09/19 全球购物
JD Sports比利时官网:英国领先的运动鞋和运动服饰零售商
2018/10/10 全球购物
聚美优品励志广告词
2014/03/14 职场文书
《每逢佳节倍思亲》教后反思
2014/04/19 职场文书
无毒社区工作方案
2014/05/23 职场文书
捐款仪式主持词
2015/07/04 职场文书
聘用合同范本
2015/09/21 职场文书
python迷宫问题深度优先遍历实例
2021/06/20 Python