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面向对象之体会[总结]
Nov 13 Javascript
javascript字符串拼接的效率问题
Dec 25 Javascript
创建公共调用 jQuery Ajax 带返回值
Aug 01 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
JavaScript时间转换处理函数
Apr 14 Javascript
在AngularJS框架中处理数据建模的方式解析
Mar 05 Javascript
浅析JavaScript中break、continue和return的区别
Nov 30 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
Mar 30 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
Apr 13 Javascript
浅谈JavaScript find 方法不支持IE的问题
Sep 28 Javascript
解决webpack多页面内存溢出的方法示例
Oct 08 Javascript
基于Vue全局组件与局部组件的区别说明
Aug 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
德劲1102收音机的打理维修案例
2021/03/02 无线电
php选择排序法实现数组排序实例分析
2015/02/16 PHP
PHP获取网页所有连接的方法(附demo源码下载)
2016/03/30 PHP
php session的应用详细介绍
2017/03/22 PHP
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
JSON 数字排序多字段排序介绍
2013/09/18 Javascript
简化版手机端照片预览组件
2015/04/13 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
JavaScript模拟push
2016/03/06 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
Vue系列:通过vue-router如何传递参数示例
2017/01/16 Javascript
jq checkbox 的全选并ajax传参的实例
2017/04/01 Javascript
react native实现往服务器上传网络图片的实例
2017/08/07 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
ES6基础之 Promise 对象用法实例详解
2019/08/22 Javascript
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
Python中删除文件的程序代码
2011/03/13 Python
Python3搜索及替换文件中文本的方法
2015/05/22 Python
Python实例方法、类方法、静态方法区别详解
2020/09/05 Python
python实现模拟器爬取抖音评论数据的示例代码
2021/01/06 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
css3实现动画的三种方式
2020/08/24 HTML / CSS
绘儿乐产品官方在线商店:Crayola.com
2019/09/07 全球购物
汇智创新科技发展有限公司
2015/12/06 面试题
业务经理的岗位职责
2013/11/16 职场文书
平面设计师的工作职责
2013/11/21 职场文书
酒店营销策划方案
2014/02/07 职场文书
初中家长评语大全
2014/12/26 职场文书
收入证明申请书
2015/06/12 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS
VUE解决跨域问题Access to XMLHttpRequest at
2022/05/06 Vue.js
小程序实现侧滑删除功能
2022/06/25 Javascript