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 获取所有id中包含某关键字的控件的实现代码
Nov 25 Javascript
jQuery数组处理方法汇总
Jun 20 Javascript
javascript学习笔记(二) js一些基本概念
Jun 18 Javascript
点击显示指定元素隐藏其他同辈元素的方法
Feb 19 Javascript
js+html5实现canvas绘制简单矩形的方法
Jun 05 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
理解javascript中Map代替循环
Feb 26 Javascript
javascript中获取class的简单实现
Jul 12 Javascript
基于jQuery实现表格的查看修改删除
Aug 01 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
May 18 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
Aug 10 Javascript
vue中动态添加class类名的方法
Sep 05 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
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
解决json日期格式问题的3种方法
2014/02/02 Javascript
用Jquery实现滚动新闻
2014/02/12 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
jquery+css3实现会动的小圆圈效果
2016/01/27 Javascript
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
js检查是否关闭浏览器的方法
2016/08/02 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
2016/11/25 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
浅谈Vue 数据响应式原理
2018/05/07 Javascript
详解elementui之el-image-viewer(图片查看器)
2019/08/30 Javascript
js get和post请求实现代码解析
2020/02/06 Javascript
用JS实现选项卡
2020/03/23 Javascript
JS的时间格式化和时间戳转换函数示例详解
2020/07/27 Javascript
Vue 组件的挂载与父子组件的传值实例
2020/09/02 Javascript
Array.filter中如何正确使用Async
2020/11/04 Javascript
python实现批量改文件名称的方法
2015/05/25 Python
TensorFlow中权重的随机初始化的方法
2018/02/11 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
Python3.5 Json与pickle实现数据序列化与反序列化操作示例
2019/04/29 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
Python字符串格式化输出代码实例
2019/11/22 Python
python 遍历pd.Series的index和value
2019/11/26 Python
Python中的Cookie模块如何使用
2020/06/04 Python
Python接口自动化测试框架运行原理及流程
2020/11/30 Python
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
印度首个本地在线平台:nearbuy
2019/03/28 全球购物
Java基础面试题
2014/07/19 面试题
读书活动总结
2014/04/28 职场文书
单位授权委托书范本
2014/09/26 职场文书
家庭经济困难证明
2015/06/23 职场文书
2016年社区综治宣传月活动总结
2016/03/16 职场文书
Python进行区间取值案例讲解
2021/08/02 Python
Java实现贪吃蛇游戏的示例代码
2022/09/23 Java/Android