jQuery控制图片的hover效果（smartRollover.js）
更新时间：2012年03月18日 13:43:49 作者：
图片的hover效果可以用css来实现也可以用js来实现。典型的就是smartRollover.js
用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的图片
其它的可以根据你的需求来。但必须保证图片的命名有规律
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的图片
其它的可以根据你的需求来。但必须保证图片的命名有规律
相关文章
有时候我们在前端开发工作中为了获取图片的信息，需要在图片加载完成后才可以正确的获取到图片的大小尺寸，并且执行相应的回调函数使图片产生某种显示效果。本文主要整理了几种常见的jquery判断图片加载完成时的方法2015-08-08
用jQuery实现的模仿a的title属性的例子，在测试的时候ie6,7上出现了层次混乱，不过最终解决了,代码书写很详细，感兴趣的朋友可以了解下哦2013-01-01
jQuery中$.each的用法，学习jquery的朋友可以参考下。2010-03-03
这篇文章主要为大家详细介绍了基于jquery实现日历效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
这篇文章主要为大家详细介绍了jQuery内存泄露解决办法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
IE中jquery.form中ajax提交没反应解决方法分享
用jquery form插件，进行ajax提交，本来可以用，好好地，突然发现，firefox，opera等可以提交，ie的success函数运行了2012-09-09
这篇文章主要介绍了使用jquery如何实现的网页自动播放声音,需要的朋友可以参考下2014-04-04
这篇文章主要介绍了jQuery 选择器详解,图文并茂，十分不错，需要的朋友可以参考下2015-01-01
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
这篇文章主要详细介绍了jQuery操纵DOM元素属性 attr()和removeAtrr()方法，非常的全面细致，在这里推荐给小伙伴们。2015-01-01
div拖动效果想必大家都有见到过吧，实现的方法也是有很多的，下面为大家将介绍使用jquery是如何实现的，感兴趣的朋友不要错过2013-12-12
最新评论