仿360浏览器右上角推广广告效果

看着效果不错，就自己写写记下，代码如下：

<!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>

小效果挺好玩的，没仔细研究人家的实现方案，自己按这个效果就写了写，如果你有更好的方案不要吝啬拿出来一起讨论（需要的图片自己去下载哈..）

posted @ 2018-03-21 16:37  孙大阳  阅读(678)  评论(0)  编辑  收藏  举报