一、效果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>