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中的alert()函数使用技巧详解
Dec 29 Javascript
DOM操作一些常用的属性汇总
Mar 13 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
Nov 18 Javascript
详解JavaScript正则表达式之RegExp对象
Dec 13 Javascript
JS简单编号生成器实现方法(附demo源码下载)
Apr 05 Javascript
jquery中用jsonp实现搜索框功能
Oct 18 Javascript
使用clipboard.js实现复制功能的示例代码
Oct 16 Javascript
基于openlayers4实现点的扩散效果
Aug 17 Javascript
Vue.js添加组件操作示例
Jun 13 Javascript
微信小程序入门之广告条实现方法示例
Dec 05 Javascript
Electron-vue开发的客户端支付收款工具的实现
May 24 Javascript
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
基于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
深入探讨<br />和 \r\n两者有什么区别??
2013/06/05 PHP
探讨fckeditor在Php中的配置详解
2013/06/08 PHP
laravel 5.1下php artisan migrate的使用注意事项总结
2017/06/07 PHP
IE6-8中Date不支持toISOString的修复方法
2014/05/04 Javascript
js加入收藏夹代码(兼容ie/ff/op)
2014/05/16 Javascript
解决URL地址中的中文乱码问题的办法
2017/02/10 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
基于Two.js实现星球环绕动画效果的示例
2017/11/06 Javascript
angularJs在多个控制器中共享服务数据的方法
2018/09/30 Javascript
彻底弄懂 JavaScript 执行机制
2018/10/23 Javascript
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
Vue 前端实现登陆拦截及axios 拦截器的使用
2019/07/17 Javascript
VUE实现移动端列表筛选功能
2019/08/23 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
2019/09/03 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
2分钟实现一个Vue实时直播系统的示例代码
2020/06/05 Javascript
js实现自定义滚动条的示例
2020/10/27 Javascript
简单解决Python文件中文编码问题
2015/11/22 Python
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
Java实现的执行python脚本工具类示例【使用jython.jar】
2018/03/29 Python
Python实现计算文件MD5和SHA1的方法示例
2019/06/11 Python
为什么从Python 3.6开始字典有序并效率更高
2019/07/15 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
Python性能分析工具py-spy原理用法解析
2020/07/27 Python
python实现模拟器爬取抖音评论数据的示例代码
2021/01/06 Python
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
htmlentities() 和 htmlspecialchars()有什么区别
2015/07/01 面试题
师范应届生求职信
2013/11/15 职场文书
群众路线教育实践活动的心得体会
2014/09/03 职场文书
门面房租房协议书
2014/12/01 职场文书
2015年药房工作总结
2015/04/25 职场文书
高一语文教学反思
2016/02/16 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
python装饰器代码解析
2022/03/23 Python