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 相关文章推荐
javascript 兼容FF的onmouseenter和onmouseleave的代码
Jul 19 Javascript
JS去除字符串的空格增强版(可以去除中间的空格)
Aug 26 Javascript
JS获取页面窗口大小的代码解读
Dec 01 Javascript
用js来刷新当前页面保留参数的具体实现
Dec 23 Javascript
JSON格式的键盘编码对照表
Jan 29 Javascript
整理Javascript流程控制语句学习笔记
Nov 29 Javascript
JS 实现 ajax 异步浏览器兼容问题
Jan 21 Javascript
jqgrid实现简单的单行编辑功能
Sep 30 Javascript
这应该是最详细的响应式系统讲解了
Jul 22 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
Aug 27 Javascript
JS Ajax请求会话过期处理问题解决方法分析
Nov 16 Javascript
jQuery实现简单QQ聊天框
Aug 27 jQuery
基于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伪造referer实例代码
2008/09/20 PHP
PHP将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
PHP删除非空目录的函数代码小结
2013/02/28 PHP
php生成图形(Libchart)实例
2013/11/06 PHP
php写入数据到CSV文件的方法
2015/03/14 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
学习php设计模式 php实现装饰器模式(decorator)
2015/12/07 PHP
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
AngularJS初始化过程分析(引导程序)
2014/12/06 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
跟我学习javascript的循环
2015/11/18 Javascript
JS实现字符串转驼峰格式的方法
2016/12/16 Javascript
JSON与JS对象的区别与对比
2017/03/01 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
2020/06/29 Javascript
在vscode里使用.vue代码模板的方法
2018/04/28 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
2018/06/11 Javascript
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
2018/09/16 Javascript
微信小程序:数据存储、传值、取值详解
2019/05/07 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
2019/05/31 Javascript
原生JS 实现的input输入时表格过滤操作示例
2019/08/03 Javascript
小程序使用分包的示例代码
2020/03/23 Javascript
JavaScript实现猜数字游戏
2020/05/20 Javascript
Python 最大概率法进行汉语切分的方法
2018/12/14 Python
对PyQt5中树结构的实现方法详解
2019/06/17 Python
意大利专业化妆品品牌:KIKO MILANO
2017/02/01 全球购物
财务管理职业生涯规划范文
2013/12/27 职场文书
党员思想汇报范文
2013/12/30 职场文书
交通安全演讲稿
2014/01/07 职场文书
中文师范生自荐信
2014/01/30 职场文书
中学教师培训制度
2014/01/31 职场文书
绿色环保家庭事迹材料
2014/08/31 职场文书
教师工作表现自我评价
2015/03/05 职场文书
承兑汇票延期证明
2015/06/23 职场文书