最近更新
阅读排行
关注本站

CSS实现JS鼠标经过替换图片效果

阅读:4107 次   编辑日期:2013-12-06

目录:

概述:

在工作中,我们经常会用到一个效果,就是鼠标经过之后图片替换的效果,如果要是让大家写这个效果首先想到的方法是什么? 我觉得80%的人会说JS或者CSS的背景定位,没错~用jQuery的hover效果很简单就能实现,用背景定位也不难。

JS方法:

JS的方法也很多,就说一个,用hover;
    $("#uw3c").hover(function(){
        $(this).attr("src","http://www.uw3c.com/img1.jpg");
        },funciton(){
        $(this).attr("src","http://www.uw3c.com/img2.jpg");
    })
鼠标经过时图片为img1,离开时为img2。

背景定位的方法:

先说一下,北京定位是将背景图片左上角的原点,放置在规定的位置
   a{ padding:5px;background:url("http://www.uw3c.com/img1.jpg") 0 0};
   a:hover{ background:url("http://www.uw3c.com/img1.jpg") 10px 0};
当hover事件的时候改变北京定位的位置。

margin的负值的方法:

以上是我们比较常用的两种方法了,但是我们今天着重介绍的是下面这种方法,使用margin的负值:
CSS://
    a:hover{
        background: none;
    }
    a{
        text-indent:0px;width: 125px;
        float:left; display: block;
        overflow:hidden;
    }
    a:hover img{
        margin-left: -125px;
    }
HTML://
    

3种方法的比较:

首先是JS的方法:JS是脚本,能不写尽量不要写,所以3中方法里面JS的方法是最差的。
其次是hover的方法:图片数量少的时候还可以,但是一旦图片数量多起来,URL请求数过于庞大,对页面的优化相当不利。
最后是margin负值的方法:既不写脚本,也可以减少一半的图片请求数,关键是用img标签可以使用LazyLoad,对页面优化相当有利,所以推荐这种方法。
查看实例
将本篇文章分享到:
top