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 相关文章推荐
js 日期转换成中文格式的函数
Jul 07 Javascript
页面只有一个text的时候,回车自动submit的解决方法
Aug 12 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
Jan 11 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
Apr 17 Javascript
javascript实现焦点滚动图效果 具体方法
Jun 24 Javascript
JQuery异步提交表单与文件上传功能示例
Jan 12 Javascript
React.Js添加与删除onScroll事件的方法详解
Nov 03 Javascript
vue-cli常用设置总结
Feb 24 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
Mar 09 Javascript
Element UI框架中巧用树选择器的实现
Dec 12 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
Oct 10 Javascript
vue.js+element 默认提示中英文操作
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中数字检测is_numeric与ctype_digit的区别介绍
2012/10/04 PHP
分享php分页的功能模块
2015/06/16 PHP
php使用str_replace替换多维数组的实现方法分析
2017/06/15 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
2019/03/01 PHP
2020最新版 PhpStudy V8.1版本下载安装使用详解
2020/10/30 PHP
初识javascript 文档碎片
2010/07/13 Javascript
JavaScript Scoping and Hoisting 翻译
2012/07/03 Javascript
javascript实现2048游戏示例
2014/05/04 Javascript
javascript中return,return true,return false三者的用法及区别
2015/11/17 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
angularjs实现多张图片上传并预览功能
2017/02/24 Javascript
Angular2生命周期钩子函数的详细介绍
2017/07/10 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
微信小程序tabBar用法实例详解
2017/12/04 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
2018/08/16 Javascript
JS中注入eval, Function等系统函数截获动态代码
2019/04/03 Javascript
python将字典内容存入mysql实例代码
2018/01/18 Python
对python的bytes类型数据split分割切片方法
2018/12/04 Python
详解Python:面向对象编程
2019/04/10 Python
python按修改时间顺序排列文件的实例代码
2019/07/25 Python
python ffmpeg任意提取视频帧的方法
2020/02/21 Python
印尼最大的在线购物网站:MatahariMall.com
2016/08/26 全球购物
法国最大电子商务平台:Cdiscount
2018/03/13 全球购物
阿迪达斯印尼官方网站:adidas印尼
2020/02/10 全球购物
好的自荐信的要求
2013/10/30 职场文书
青年创业培训欢迎词
2014/01/10 职场文书
服务员岗位责任制
2014/02/11 职场文书
感恩教育活动总结
2014/05/05 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
大学生助学金感谢信
2015/01/21 职场文书
简爱读书笔记
2015/06/26 职场文书
学校教学管理制度
2015/08/06 职场文书
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android