查看: 2307|回复: 4

鼠标经过地方图片变亮,其他图片变暗效果

[复制链接]
回帖奖励 1 金钱 回复本帖可获得 1 金钱奖励! 每人限 1 次
发表于 2012-9-16 10:06:01 | 显示全部楼层 |阅读模式
这个效果,方法有很多种
我介绍一个简单的方法
效果的原理
原理其实很简单,首先给一个黑色的背景,通过降低图片的透明度,让黑色背景呈现出来,图片看起来就更暗。鼠标移到图片1,那么就让除了图片1的其他图片的透明度降低,让他们看起来更暗,让图片1看起来显得更亮
用两种方法来实现:
CSS方法和JS方法
JS方法
效果实例先看看HTML代码和CSS代码
HTML代码:
<div class="imglist">
    <a href="#"><img src="images/530_1.jpg"></a>
    <a href="#"><img src="images/530_2.jpg"></a>
    <a href="#"><img src="images/530_3.jpg"></a>
</div>
CSS代码,都很简单:
.imglist {float:left; width:580px;}
.imglist a{float:left; background-color:#000;}
$(function(){
    $(".imglist").find("a").each(function() {
        $(this).hover(function() { //当鼠标移上去时

            //它的兄弟图片透明度降到0.7
            $(this).siblings().find("img").stop().fadeTo("slow",0.7);
        },
        function() { //当鼠标移出的时候

                //它的兄弟图片透明度回到1
            $(this).siblings().find("img").stop().fadeTo("slow",1);
        });
    });
})
这里解释为什么要用stop()方法,是为了防止有人在区域内,快速移动,导致fadeTo动画效果频繁执行,造成CPU占用率过高。所以在下一个fadeTo动画执行开始的时候,把前面还没有执行完的fadeTo动画停止掉
CSS方法
CSS按照前面的原理实现起来也是非常简单的,只是为了兼容IE6实现起来麻烦一些,后面我会专门讲到。
HTML代码不变,CSS代码在原来的基础上进行修改

.imglist:hover img{
    opacity:0.7;
    filter:alpha(opacity=70);
}
.imglist:hover img:hover{
    opacity:1;
    filter:alpha(opacity=100);
}
到这其实效果已经出来了,但没有JQuery效果那么漂亮,没有过渡效果;呵呵,再来加几句代码
.imglist img{
    -moz-transition: opacity .7s cubic-bezier(0.2, 0.4, 0.7, 0.8);
    -webkit-transition: opacity .7s cubic-bezier(0.2, 0.4, 0.7, 0.8);
    transition: opacity .7s cubic-bezier(0.2, 0.4, 0.7, 0.8);
}
在IE10,火狐,谷歌等高级浏览器中可以看到过渡的效果了,IE10以下的IE没有过渡效果
效果实例
上面的代码其实已经兼容了大部分浏览器了,但坑爹的IE6还没效果,因为IE6不支持a标签以外的:hover元素。有兴趣的人可以利用IE条件注释自己写个兼容代码兼容IE6
代码下载

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

金灿互联专注为企业提供系统整体的网络营销外包服务,包括从营销型网站平台建设、阿里旺铺装修、网站SEO优化推广、B2B平台推广等一站式网络营销服务。已为近1000多家企业提供高品质的网站建设和营销推广服务,帮助客户通过互联网提升业绩、抢占市场、成就品牌。
© 2010-2016 Comsenz Inc. 粤ICP备12054404号-1 Powered by KingCan!X3.2   
快速回复 返回顶部 返回列表