看着效果不错，就自己写写记下，代码如下：
<!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=\'width: 100px;height: 100px;\' /> <div id="floatRight_div" style=\'position: absolute;width: 100px;height: 100px;top: 0;right: 0;\'> <div id="div1" style="width: 50px;height:50px;overflow: hidden;position: absolute;top: 0;right: 0;"> <img src="images/背景.png" style="width: 85px;height: 85px;position: absolute;top: 0;right: 0;" /> </div> <div id="div2" style=\'position: absolute;top: 0;right: 0;width: 50px;height:50px;\'> <a href="https://www.baidu.com"> <img src="images/hoverImg.png" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;" /> </a> <img id=\'clearThis\' src="images/clearPng.png" style="position:absolute;bottom: 6px;left: 6px;width: 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>
小效果挺好玩的，没仔细研究人家的实现方案，自己按这个效果就写了写，如果你有更好的方案不要吝啬拿出来一起讨论（需要的图片自己去下载哈..）