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 相关文章推荐
node.js中的fs.link方法使用说明
Dec 15 Javascript
JavaScript实现99乘法表及隔行变色实例代码
Feb 24 Javascript
详解jQuery简单的表单应用
Dec 16 Javascript
JS实现旋转木马式图片轮播效果
Jan 18 Javascript
js获取浏览器和屏幕的各种宽度高度
Feb 22 Javascript
angularjs实现多张图片上传并预览功能
Feb 24 Javascript
JavaScript装饰器函数(Decorator)实例详解
Mar 30 Javascript
Vue.js进行查询操作的实例详解
Aug 25 Javascript
JavaScript中Require调用js的实例分享
Oct 27 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
Sep 04 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
Sep 18 Javascript
JavaScript中工厂函数与构造函数示例详解
May 06 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中的HashTable结构详解
2013/06/13 PHP
析构函数与php的垃圾回收机制详解
2013/10/28 PHP
php生成txt文件标题及内容的方法
2014/01/16 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
laravel中Redis队列监听中断的分析
2020/09/14 PHP
js 纯数字不重复排列的另类方法
2010/07/17 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
2011/07/26 Javascript
node.js中的http.createClient方法使用说明
2014/12/15 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
2015/08/04 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
2015/12/24 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
2016/04/06 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
2016/10/31 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
2017/06/26 jQuery
javascript实现小型区块链功能
2019/04/03 Javascript
JavaScript实现拖拽盒子效果
2020/02/06 Javascript
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
JS call()及apply()方法使用实例汇总
2020/07/11 Javascript
vue-router懒加载的3种方式汇总
2021/02/28 Vue.js
举例详解Python中的split()函数的使用方法
2015/04/07 Python
Python文件夹与文件的相关操作(推荐)
2016/07/25 Python
解决python中无法自动补全代码的问题
2018/12/04 Python
Python3.6.2调用ffmpeg的方法
2019/01/10 Python
numpy创建单位矩阵和对角矩阵的实例
2019/11/29 Python
Python基础之函数原理与应用实例详解
2020/01/03 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
如果NULL定义成#define NULL((char *)0)难道不就可以向函数传入不加转换的NULL了吗
2012/02/15 面试题
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
《将心比心》教学反思
2014/04/08 职场文书
2014年教师业务学习材料
2014/05/12 职场文书
中层干部竞聘演讲稿
2014/05/15 职场文书
2016年中学植树节活动总结
2016/03/16 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers
Spring整合Mybatis的全过程
2021/06/28 Java/Android
vue选项卡切换的实现案例
2022/04/11 Vue.js
Redis实现主从复制方式(Master&Slave)
2022/06/21 Redis