鼠标移入/移出改变图片透明度_jQuery效果 -

ldl_xz

浏览: 68883 次
性别:
来自: 南京

最近访客更多访客>>

rocex

another123

3505899448

ZTR

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

鼠标移入/移出改变图片透明度_jQuery效果

博客分类：

web技术

enter image description here

浏览聚美优品的时候看到的这个效果，鼠标移入图片后，当前图为高亮，*图片为灰色显示，移出图片区域后，图片重新变为高亮。挺绕口的，直接上代码，大家预览看下就晓得了，这种效果貌似电商网站用的还比较多。代码图片直接用的聚美优品的，在此说明一下。本来想用javascript写的，有思路，但是掌握不熟练，无从下手，遂改用jQuery写，代码很简单，一看即可明白。

小知识点：

1.jQuery中鼠标经过为mouseover，鼠标离开为mouseout。

2.透明度设置的css代码：opacity:0.5; filter:alpha(opacity=50); 代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0; padding:0;}
li{ list-style:none;}

#top_banner{ width:400px;}
#top_banner li{  }
#top_banner li a{ position:relative; display:block; width:190px; height:150px;float: left;margin-right:10px; margin-bottom:10px;}
.mask_Layout{ width:190px; height:150px; position:absolute; left:0; top:0;}
.cur .mask_Layout{
     background:#000;
    opacity:0.5;
    filter:alpha(opacity=50);
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $oLi=$('#top_banner ul li');
    $oA=$('#top_banner ul li a');

    $oLi.mouseover(function(){
        $oLi.addClass('cur');
        $(this).removeClass('cur');
        }).mouseout(function(){
            $oLi.removeClass('cur');
            })

    })
</script>

</head>

<body>
<div id="top_banner">
    <ul>
        <li>
            <a href="#">
                <img width="190" height="150" src="http://images.jumei.com/banner/63/new_mall_show/484_0.jpg" alt="欧莱雅">
                <div class="mask_Layout"></div>
            </a>
         <li>
             <a target="_blank" href="#">
                <img width="190" height="150" src="http://images.jumei.com/banner/63/new_mall_show/484_1.jpg" alt="丝塔芙">
                <div class="mask_Layout"></div>
             </a>
         </li>
         <li>
            <a target="_blank" href="#">
                <img width="190" height="150" src="http://images.jumei.com/banner/63/new_mall_show/863_13.jpg" alt="曼秀雷敦">
                <div class="mask_Layout"></div>
            </a>
         </li>
         <li>
            <a target="_blank" href="#">
                <img width="190" height="150" src="http://images.jumei.com/banner/63/new_mall_show/484_2.jpg" alt="佰草集">
                <div class="mask_Layout"></div>
            </a>
        </li>
    </ul>
</div>
</body>
</html>

转载自:http://www.9958.pw/post/html_img_mouseout

分享到：

面包屑 CSS(合并小图标，减少链接请求数量 ... | 电脑眼睛保护色

2016-05-01 13:39
浏览 628
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

鼠标移入/移出改变图片透明度_jQuery效果

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

鼠标移入/移出改变图片透明度_jQuery效果

评论

发表评论

相关推荐

项目管理之如何控制项目进度和质量

15 个非常棒的 CSS3 效果教程

前20名的不安全密码（需要避免）

js实现图片放大缩小后进行的复杂排序

史上最全ajax（原生JS,javascript版，非jquery）详细注释！

php千万级pv架构经验分享

ecshop 时间问题请注意 /data/config.php

目前比较流行的二维码的生成

如何阻止移动设备(手机,pad)浏览器双击放大网页？

PHP解决Xss跨域攻击以及sql注入等危险字符串方案类库

网站敏感骂人词库及算法（附6仟个敏感词）

jQuery制作元素在屏幕中水平垂直居中效果

纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）

分享一个JQuery写的点击上下滚动的小例子

精美的国外扁平化网页设计作品

提交您的博客到各大网站

推荐7个 CSS3 制作的创意下拉菜单效果

Dev Http Client（Chrome的HTTP插件）

好的用户界面-界面设计的一些技巧

项目组制定的一份页面优化指南

最近访客更多访客>>