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 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 Javascript
jQuery 插件开发指南
Nov 14 Javascript
AngularJS基础 ng-csp 指令详解
Aug 01 Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 Javascript
总结js中的一些兼容性易错的问题
Dec 18 Javascript
vue、react等单页面项目应该这样子部署到服务器
Jan 03 Javascript
VUE2.0中Jsonp的使用方法
May 22 Javascript
js for终止循环 跳出多层循环
Oct 04 Javascript
vue3实现v-model原理详解
Oct 09 Javascript
javascript利用键盘控制小方块的移动
Apr 20 Javascript
微信小程序实现翻牌抽奖动画
Sep 21 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
Nov 02 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 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
linux下为php添加curl扩展的方法
2011/07/29 PHP
php中filter_input函数用法分析
2014/11/15 PHP
javascript 常用关键字列表集合
2007/12/04 Javascript
asp.net 30分钟掌握无刷新 Repeater
2011/09/16 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
2016/05/25 Javascript
浅析JavaScript函数的调用模式
2016/08/10 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
js实现图片放大展示效果
2017/08/30 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
elementUI select组件默认选中效果实现的方法
2019/03/25 Javascript
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
2021/01/13 Vue.js
关于better-scroll插件的无法滑动bug(2021通过插件解决)
2021/03/01 Javascript
python3实现基于用户的协同过滤
2018/05/31 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
python科学计算之numpy——ufunc函数用法
2019/11/25 Python
Python如何将字符串转换为日期
2020/07/31 Python
移动端html5判断是否滚动到底部并且下拉加载
2019/11/19 HTML / CSS
Vans(范斯)新西兰官方网站:美国原创极限运动品牌
2020/09/19 全球购物
企业后勤岗位职责
2014/02/28 职场文书
餐饮业员工工作决心书
2014/03/11 职场文书
商务英语专业求职信
2014/06/26 职场文书
意外死亡赔偿协议书
2014/10/14 职场文书
技术员岗位职责
2015/02/04 职场文书
3.15消费者权益日活动总结
2015/02/09 职场文书
房地产销售主管岗位职责
2015/02/13 职场文书
毕业生对母校寄语
2015/02/26 职场文书
银行自荐信怎么写
2015/03/05 职场文书
总经理岗位职责范本
2015/04/01 职场文书
工作表现证明
2015/06/15 职场文书
《最后一头战象》教学反思
2016/02/16 职场文书
HR在给员工开具离职证明时,需要注意哪些问题?
2019/07/03 职场文书
提取视频中的音频 Python只需要三行代码!
2021/05/10 Python
vue+element ui实现锚点定位
2021/06/29 Vue.js