简单收展、覆盖的广告效果

　　一、效果1

　　　　　　

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./jquery.min.js"></script>
<style type="text/css">
    img{display:block;border:none 0;}
       .bg{width:400px;padding:20px 10px;background-color:skyblue;}
       .banner{width:400px;height:300px;border:1px solid orange;margin:0 auto;position:relative;}
       .closeBtn{width:24px;height:24px;background:url("http://offlintab.firefoxchina.cn/static/img/icon/controls-431.png") no-repeat -60px -2px;cursor:pointer;position:absolute;top:5px;right:5px;}
</style>
</head>
<body>
    <div class="bg">
        <div class="banner">
            <img src="https://www.baidu.com/img/bd_logo1.png" width="400px" height="300px">
            <div class="closeBtn"></div>
        </div>
    </div>

    <script type="text/javascript">
        $(function(){
            $(".closeBtn").click(function(){
                $(".banner").slideUp(100);
            });
        });
    </script>
</body>
</html>

二、效果2

　　　　　　

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./jquery.min.js"></script>
<style type="text/css">
    img{display:block;border:none 0;}
       .banner{width:270px;height:129px;border:1px solid orange;overflow:hidden;position:relative;}
       .underCont{width:270px;height:129px;}
       .coverObj{width:270px;height:129px;background-color:rgba(0,0,0,0.5);position:absolute;left:0;top:129px;}
       /*透明背景图：1.直接使用透明背景的图片 2.opacity:0~1;filter:alpha(opacity=0~1);*/
</style>
</head>
<body>
    <div class="banner">
        <div class="underCont">
            <img src="https://www.baidu.com/img/bd_logo1.png" width="270px" height="129px">
        </div>
        <div class="coverObj"></div>
    </div>

    <script type="text/javascript">
        $(function(){
            $(".banner").hover(function(){
                $(".coverObj").animate({top:"0"},1000);
            },function(){
                $(".coverObj").animate({top:"129px"},1000);
            });
        });
    </script>
</body>
</html>

 

posted @ 2018-04-25 23:00  Autumn_n  阅读(120)  评论(0)  编辑  收藏  举报
TOP