一个简单的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 相关文章推荐
javascript 处理事件绑定的一些兼容写法
Dec 24 Javascript
JS input文本框禁用右键和复制粘贴功能的代码
Apr 15 Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
Oct 20 Javascript
浅谈Javascript实现继承的方法
Jul 06 Javascript
javascript事件委托的用法及其好处简析
Apr 04 Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 Javascript
关于ES6的六个小特性(二)
Feb 20 Javascript
Vue项目添加动态浏览器头部title的方法
Jul 11 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
Nov 30 Javascript
记录一次开发微信网页分享的步骤
May 07 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 Javascript
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 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
php email邮箱正则
2008/10/08 PHP
php 流程控制switch的简单实例
2016/06/07 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
老生常谈文本文件和二进制文件的区别
2017/02/27 PHP
PHP defined()函数的使用图文详解
2019/07/20 PHP
在IE下:float属性会影响offsetTop的取值
2006/12/22 Javascript
javaScript 判断字符串是否为数字的简单方法
2009/07/25 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
2014/05/27 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
2017/01/10 Javascript
微信小程序报错:this.setData is not a function的解决办法
2017/09/27 Javascript
初探js和简单隐藏效果的实例
2017/11/23 Javascript
微信小程序仿朋友圈发布动态功能
2018/07/15 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
详解搭建一个vue-cli的移动端H5开发模板
2020/01/17 Javascript
Python制作简易注册登录系统
2016/12/15 Python
Python Django中间件,中间件函数,全局异常处理操作示例
2019/11/08 Python
JupyterNotebook设置Python环境的方法步骤
2019/12/03 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
通过Turtle库在Python中绘制一个鼠年福鼠
2020/02/03 Python
python 根据列表批量下载网易云音乐的免费音乐
2020/12/03 Python
KLOOK客路:发现更好玩的世界,预订独一无二的旅行体验
2016/12/16 全球购物
C#笔试题
2015/07/14 面试题
网友共享的几个面试题关于Java和Unix等方面的
2016/09/08 面试题
出国留学自荐信
2013/10/25 职场文书
大学毕业寄语大全
2014/04/10 职场文书
感恩节活动策划方案
2014/05/16 职场文书
安全横幅标语
2014/06/09 职场文书
单位授权委托书范文
2014/08/02 职场文书
小学生运动会报道稿
2014/09/12 职场文书
大学新生军训自我鉴定范文
2014/09/13 职场文书
Python编解码问题及文本文件处理方法详解
2021/06/20 Python
基于JavaScript实现省市联动效果
2021/06/22 Javascript