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系列(10) JavaScript核心(晋级高手必读篇)
Jan 15 Javascript
js触发onchange事件的方法说明
Mar 08 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 Javascript
jQuery超简单选项卡完整实例
Sep 26 Javascript
jQuery+ajax实现实用的点赞插件代码
Jul 06 Javascript
AngularJS 依赖注入详解和简单实例
Jul 28 Javascript
深入理解Node.js中的进程管理
Mar 13 Javascript
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
详解vue2 $watch要注意的问题
Sep 08 Javascript
Vue中在新窗口打开页面及Vue-router的使用
Jun 13 Javascript
js实现轮播图的完整代码
Oct 26 Javascript
Vue动态创建注册component的实例代码
Jun 14 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
饭制《星际争霸》Mod:优化游戏机制 增加新单位
2017/07/02 星际争霸
阿里云PHP SMS短信服务验证码发送方法
2017/07/11 PHP
PHP实现的文件浏览器功能简单示例
2019/09/12 PHP
Jquery + Ajax调用webService实例代码(asp.net)
2010/08/27 Javascript
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
2013/01/23 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
2013/07/02 Javascript
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
javascript计时器详解
2015/02/28 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
JavaScript编程中布尔对象的基本使用
2015/10/25 Javascript
使用nodejs爬取前程无忧前端技能排行
2017/05/06 NodeJs
webpack实现一个行内样式px转vw的loader示例
2018/09/13 Javascript
layui点击弹框页面 表单请求的方法
2019/09/21 Javascript
手把手带你搭建一个node cli的方法示例
2020/08/07 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
python列表去重的二种方法
2014/02/14 Python
Python实现抓取城市的PM2.5浓度和排名
2015/03/19 Python
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
Python 专题三 字符串的基础知识
2017/03/19 Python
Python 将RGB图像转换为Pytho灰度图像的实例
2017/11/14 Python
Python从函数参数类型引出元组实例分析
2019/05/28 Python
Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError
2019/12/20 Python
python实现与redis交互操作详解
2020/04/21 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
Pycharm创建文件时自动生成文件头注释(自定义设置作者日期)
2020/11/24 Python
墨西哥运动服饰和鞋网上商店:Netshoes墨西哥
2016/07/28 全球购物
欧舒丹英国官网:购买欧舒丹护手霜等明星产品
2017/01/17 全球购物
Brydge英国:适用于Apple iPad和Microsoft Surface Pro的蓝牙键盘
2019/05/16 全球购物
Cynthia Rowley官网:全球领先的生活方式品牌
2020/10/27 全球购物
2014年内部审计工作总结
2014/12/09 职场文书
驳回起诉裁定书
2015/05/19 职场文书
学校运动会通讯稿
2015/07/18 职场文书
学习nginx基础知识
2021/09/04 Servers
Java数据结构之堆(优先队列)
2022/05/20 Java/Android