• 使用jQuery控制图片的hover效果
    时间:2012-03-16   作者:佚名   出处:互联网

    本文介绍如何网站中应用添加超酷的hover效果

    图片的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的图片
    其它的可以根据你的需求来。但必须保证图片的命名有规律

    网友留言/评论

    我要留言/评论

    相关文章

    极其实用 10 款 jQuery 日历插件:以下日历插件都非常棒,非常实用,下面分享给开发者们。
    6个强大的JavaScript日期操作插件:我们必须承认,JavaScript内建的Date方法实在是太基础了,远不够我们来处理日期。总有人会开发自己的JavaScript日期操作库,为何在能够使用已经开发并测试好的日期插件时还要再自己造个轮子呢。我已经碰到过很多次需要操作日期格式的情形,这些插件将节约大把的时间。
    Memcached 真的过时了吗?(Redis和Memcached比较):这两年Redis火得可以,Redis也常常被当作Memcached的挑战者被提到桌面上来。关于Redis与Memcached的比较更是比比皆是。然而,Redis真的在功能、性能以及内存使用效率上都超越了Memcached吗?
    UI端编程的22个问题 - 经验之谈:以下是结合了我这些年来从事UI端编程的经验,我将用一系列文章来搭建用户界面(UI)的底层框架,这里我使用的技术实现是Silverlight,但是,你将会发现,我所介绍的都是UI端的设计思想,所以是超越于语言,是不局限于技术实现的,所以,它将适用于Windows Form, WPF, FLEX, HTML5,以及所有手机编程领域Phone7, IOS, Android。
    vim 中替换命令的技巧汇总:VIM无疑是非常强大的,学会其中的命令会使你事半功倍,下面本文列举一下替换命令的一些技巧。
    Social Game (SNS) 连载之流程设计:本文转自果伦的BLOG,作者整理出一个SNS game(social game)的设计流程,给团队留下一个可参考的方案。主要谈及的是策划流程设计,文章写的不错。
    手动安装MyEclipse 9.0 SVN插件解决方案:最近下载MyEclipse9.0 R2版本来做开发尝试。我们要求必须使用SVN来管理整个项目的源代码,这样就要求掌握如何在MyEclipse9.0 R2版本下手动安装SVN插件。下面通过网上的一些相关资料,我们将其汇总为两个方法.
    如何在面试时写出高质量的代码:程序员在职业生涯中难免要接受编程面试。有些程序员由于平时没有养成良好的编程习惯,在面试时写出的代码质量不高,最终遗憾地与心仪的公司和职位失之交臂。因此,如何在面试时能写出高质量的代码,是很多程序员关心的问题。