jQuery控制图片的hover效果(smartRollover.js)


Posted in Javascript onMarch 18, 2012

用js实现的好处是:如果一个网站中图片的hover效果比较多,可能每一个都要有css控制,那样代码有的冗余。但是有了js控制,不管有多少图片,hover效果都可以用同样的js,但是必须保证图片的out/off效果和over/on效果命名有规律性,比如:
navi01_out.jpg/navi01_off.jpg
navi01_over.jpg/nvai02_on.jpg
这样js控制起来非常方便。找到匹配的名称,hover时替换成另一个名称。

今天我想用jQuery控制一下效果:
代码如下:

<script type="text/javascript"> 
$(function() { 
var $img = $("img"); 
$img.hover(function() { 
$(this).attr("src",$(this).attr("src").replace("_out","_over")); 
},function() { 
$(this).attr("src",$(this).attr("src").replace("_over","_out")); 
}); 
}); 
</script>

$img可以由你指定,你可以指定成其它的
比如: var $img = $("img.imgover"); 表示所有img的class为imgover的图片
其它的可以根据你的需求来。但必须保证图片的命名有规律
Javascript 相关文章推荐
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
Sep 25 Javascript
可以用来调试JavaScript错误的解决方案
Aug 07 Javascript
javascript实现页面内关键词高亮显示代码
Apr 03 Javascript
iframe里使用JavaScript控制主页转向的方法
Apr 03 Javascript
js利用正则表达式检验输入内容是否为网址
Jul 05 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
Jul 18 Javascript
浅析JS中对函数function的理解(基础篇)
Oct 14 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
Dec 30 Javascript
JS实现的RC4加密算法示例
Aug 16 Javascript
JS动态图片的实现方法完整示例
Jan 13 Javascript
js+css实现扇形导航效果
Aug 18 Javascript
JavaScript逻辑运算符相关总结
Sep 04 Javascript
基于jQuery的弹出框插件
Mar 18 #Javascript
js性能优化 如何更快速加载你的JavaScript页面
Mar 17 #Javascript
Jquery命名冲突解决的五种方案分享
Mar 16 #Javascript
让人期待的2011年度最佳 jQuery 插件分享
Mar 16 #Javascript
JavaScript异步调用定时方法并停止该方法实现代码
Mar 16 #Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
Mar 16 #Javascript
jquery $.ajax相关用法分享
Mar 16 #Javascript
You might like
用PHP实现的随机广告显示代码
2007/06/14 PHP
PHP数组相关函数汇总
2015/03/24 PHP
php四种定界符详解
2017/02/16 PHP
javascript最常用与实用的创建类的代码
2010/08/12 Javascript
JQuery与JSon实现的无刷新分页代码
2011/09/13 Javascript
用jquery方法操作radio使其默认选项是否
2013/09/10 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
2013/09/29 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
2013/11/20 Javascript
JS清除选择内容的方法
2015/01/29 Javascript
浅谈jQuery构造函数分析
2015/05/11 Javascript
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
理解JavaScript表单的基础知识
2016/01/25 Javascript
js实现异步循环实现代码
2016/02/16 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
JavaScript的字符串方法汇总
2016/07/31 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
2016/10/14 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
2017/01/04 Javascript
vue component组件使用方法详解
2017/07/14 Javascript
vue生成随机验证码的示例代码
2017/09/29 Javascript
vue keep-alive请求数据的方法示例
2018/05/16 Javascript
浅谈Fetch 数据交互方式
2018/12/20 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
2019/01/29 Javascript
[40:06]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第一场
2018/04/04 DOTA
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
Python Unittest根据不同测试环境跳过用例的方法
2018/12/16 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
python读取excel数据绘制简单曲线图的完整步骤记录
2020/10/30 Python
利用Python pandas对Excel进行合并的方法示例
2020/11/04 Python
HTML5的结构和语义(5):交互
2008/10/17 HTML / CSS
美国最受欢迎的度假租赁网站:VRBO
2016/08/02 全球购物
给校长的一封建议书
2014/03/12 职场文书
实习协议书范本
2014/04/22 职场文书
幼儿园个人师德总结
2015/02/06 职场文书
Go 通过结构struct实现接口interface的问题
2021/10/05 Golang
flex布局中使用flex-wrap实现换行的项目实践
2022/06/21 HTML / CSS