看着效果不错，就自己写写记下，代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>仿360右上角推广广告</title> <style type="text/css"> *{ margin: 0; padding:0 ; } #div2{ background: -webkit-linear-gradient(45deg, #fff 50%, rgba( 0,0,0,0.1 )50%); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(45deg, #fff 50%, rgba( 0,0,0,0.1 )50%); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(45deg, #fff 50%, rgba( 0,0,0,0.1 )50%); /* Firefox 3.6 - 15 */ background: linear-gradient(45deg, #fff 50%, rgba( 0,0,0,0 )50%); /* 标准的语法（必须放在最后） */ } </style> </head> <body> <img src="images/fdaf.png" style=' 100px;height: 100px;' /> <div id="floatRight_div" style='position: absolute; 100px;height: 100px;top: 0;right: 0;'> <div id="div1" style=" 50px;height:50px;overflow: hidden;position: absolute;top: 0;right: 0;"> <img src="images/背景.png" style=" 85px;height: 85px;position: absolute;top: 0;right: 0;" /> </div> <div id="div2" style='position: absolute;top: 0;right: 0; 50px;height:50px;'> <a href="https://www.baidu.com"> <img src="images/hoverImg.png" style="position: absolute;top: 0;left: 0; 100%;height: 100%;" /> </a> <img id='clearThis' src="images/clearPng.png" style="position:absolute;bottom: 6px;left: 6px; 9px;height: 9px;" title='关闭'/> </div> </div> <script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $('#floatRight_div').hover(function(){ $('#div1').css({'width':'83px','height':'82px','transition':'.5s'}); $('#div2').css({'width':'83px','height':'82px','transition':'.5s'}); $('#clearThis').css({'bottom':'12px',"left":'12px','transition':'.5s'}); },function(){ $('#div1').css({'width':'50px','height':'50px','transition':'.5s'}); $('#div2').css({'width':'50px','height':'50px','transition':'.5s'}); $('#clearThis').css({'bottom':'6px',"left":'6px','transition':'.5s'}); }); //关闭 $('#clearThis').on('click',function(){ $('#floatRight_div').hide('1'); }) </script> </body> </html>
小效果挺好玩的，没仔细研究人家的实现方案，自己按这个效果就写了写，如果你有更好的方案不要吝啬拿出来一起讨论（需要的图片自己去下载哈..）