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 相关文章推荐
初学prototype,发个JS接受URL参数的代码
Sep 25 Javascript
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
Nov 24 Javascript
取得窗口大小 兼容所有浏览器的js代码
Aug 09 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
Jan 15 Javascript
JQuery.get提交页面不跳转的解决方法
Jan 13 Javascript
JQuery实现鼠标移动图片显示描述层的方法
Jun 25 Javascript
require.js配合插件text.js实现最简单的单页应用程序
Jul 12 Javascript
使用JavaScript开发跨平台的桌面应用详解
Jul 27 Javascript
vue多页面开发和打包正确处理方法
Apr 20 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 03 Javascript
纯JS实现五子棋游戏
May 28 Javascript
微信小程序input抖动问题的修复方法
Mar 03 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
德生S2000南麂列岛台湾FM收听记录
2021/03/02 无线电
html静态页面调用php文件的方法
2014/11/13 PHP
基于php的微信公众平台开发入门实例
2015/04/15 PHP
php简单日历函数
2015/10/28 PHP
Netbeans 8.2将支持PHP7 更精彩
2016/06/13 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
javascript 传统事件模型构造的事件监听器实现代码
2010/05/31 Javascript
js 删除数组的几种方法小结
2014/02/21 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
简介JavaScript中fixed()方法的使用
2015/06/08 Javascript
基于JavaScript实现瀑布流布局(二)
2016/01/26 Javascript
Mongoose经常返回e11000 error的原因分析
2017/03/29 Javascript
微信小程序教程系列之新建页面(4)
2017/04/17 Javascript
vue项目关闭eslint校验
2018/03/21 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
2018/08/23 jQuery
基于游标的分页接口实现代码示例
2018/11/12 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
2019/07/17 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
2019/10/15 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
详解Python中的文本处理
2015/04/11 Python
Python运算符重载用法实例
2015/05/28 Python
初学python的操作难点总结(新手必看篇)
2017/08/03 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
python Matplotlib底图中鼠标滑过显示隐藏内容的实例代码
2019/07/31 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
Python3 requests模块如何模仿浏览器及代理
2020/06/15 Python
Python如何对齐字符串
2020/07/30 Python
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
Perfume’s Club英国官网:购买香水和护肤品
2019/11/02 全球购物
公立医院改革实施方案
2014/03/14 职场文书
活动总结模板
2014/05/09 职场文书
2014年乡镇安全生产工作总结
2014/12/02 职场文书
人事局接收函
2015/01/30 职场文书
结婚老公保证书
2015/02/26 职场文书
创业计划书之校园超市
2019/09/12 职场文书