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 相关文章推荐
newxtree.js代码
Mar 13 Javascript
JQuery 选择和过滤方法代码总结
Nov 19 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
Feb 10 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
Aug 02 Javascript
实例讲解jquery与json的结合
Jan 07 Javascript
js基于cookie方式记住返回页面用法示例
May 27 Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 Javascript
vue中的数据绑定原理的实现
Jul 02 Javascript
Angular异步变同步处理方法
Aug 13 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
Aug 24 Javascript
配置一个vue3.0项目的完整步骤
Apr 26 Javascript
vuex实现数据状态持久化
Nov 11 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
PHP实现递归复制整个文件夹的类实例
2015/08/03 PHP
使用PHP+MySql实现微信投票功能实例代码
2017/09/29 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
PHP基于递归算法解决兔子生兔子问题
2018/05/11 PHP
关于laravel模板中生成URL的几种模式总结
2019/10/18 PHP
js 加载并解析XML字符串的代码
2009/12/13 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
jquery 无限级下拉菜单的简单实现代码
2014/02/21 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
2015/10/22 Javascript
全面解析Bootstrap表单使用方法(表单控件)
2015/11/24 Javascript
关于function类中定义变量this的简单说明
2016/05/28 Javascript
JavaScript知识点总结(十)之this关键字
2016/05/31 Javascript
javascript js 操作数组 增删改查的简单实现
2016/06/20 Javascript
Bootstrap源码解读下拉菜单(4)
2016/12/23 Javascript
NodeJS实现客户端js加密
2017/01/09 NodeJs
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
2017/05/25 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
vue项目中微信登录的实现操作
2020/09/08 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
2020/09/21 Javascript
vue中路由跳转不计入history的操作
2020/09/21 Javascript
Python 给屏幕打印信息加上颜色的实现方法
2019/04/24 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
Rowdy Gentleman服装和配饰:美好时光
2019/09/24 全球购物
学校采购员岗位职责
2014/01/02 职场文书
工作表扬信的范文
2014/01/10 职场文书
小学音乐教学反思
2014/02/05 职场文书
精彩广告词大全
2014/03/19 职场文书
继承公证书样本
2014/04/04 职场文书
社会工作专业求职信
2014/07/15 职场文书
三方协议书
2015/01/27 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书