前端开发窗口固定通知插件

x前端开发框架
.net 前端开发框架
前端开发有什么框架

html 代码

<!DOCTYPE html>
<head>
    <meta charset=”utf-8″>
    <title></title>
    <link rel=”stylesheet” href=”css/index.css” />
    <style>
        body{
/*height: 1888px;*/
}
.tool-box p{
margin:0;
padding:0;
}
.tool-box{
font-family:”微软雅黑”;
width:49px;
height:49px;
background-color:#F7F7F7;
border-radius:50px ;
position:fixed;
top:70%;
right:2%;
}
.tool-button{
display:block;
width:38px;
height:38px;
border-radius:50px ;
margin:0pxauto;
position:relative;
top:5.5px;
z-index:900;
cursor:pointer;
}
.tool-button .zr_message-number{
display:block;
width:16px;
height:16px;
border-radius:50px ;
background-color:#ED4744;
position:relative;
z-index:1000;
color:white;
font-size:12px;
font-weight:bold;
line-height:16px;
text-align:center;
top:6px;
left:19px;
}
.close-style{
background-image:url(http://cdn.attach.w3cfuns.com/notes/pics/201608/26/114527ii8d2eiee7ezroho.png);
}
.button-style{
background-image:url(http://cdn.attach.w3cfuns.com/notes/pics/201608/26/114527kohkkgbn9nd95n08.png);
}
.tool-alert{
width:330px;
/*height: 200px;*/
border-radius:8px;
position:relative;
/*top: -210px;*/
left:-308px;
z-index:800;
background-color:rgba(249,249,249,0.8);
box-shadow:-2px2px10pxrgba(5,0,1,0.2);
overflow:hidden;
display:none;
}
.zr_box-content{
width:290px;
padding:20px;
padding-bottom:5px;
}
.tool-box .tool-alert .zr_title{
font-size:15px;
color:rgb(43,44,44);
line-height:1.1;
margin-bottom:10px;
}
.tool-box .tool-alert .zr_text{
font-size:14px;
color:rgb(101,101,101);
line-height:1.233;
word-break:break-all;
}
.tool-box .tool-alert .zr_link{
text-decoration:underline;
margin-left:10px;
cursor:pointer;
}
.tool-box .tool-alert .zr_more{
font-size:14px;
color:rgb(43,44,44);
line-height:1.233;
padding:5px0px5px0px;
border-top:1pxsolid#D0D0D0;
margin-top:50px;
}
</style>
    <script type=”text/javascript” src=”//cdn.bootcss.com/jquery/1.11.1/jquery.min.js”></script>
    <script>
        $(function () {
            $(“.tool-button”).click(function () {
                if ($(“.tool-alert”).is(‘:hidden’)) {
                    $(this).css(“background-image”, “url(http://cdn.attach.w3cfuns.com/notes/pics/201608/26/114527ii8d2eiee7ezroho.png)”)
                } else {
                    $(this).css(“background-image”, “url(http://cdn.attach.w3cfuns.com/notes/pics/201608/26/114527kohkkgbn9nd95n08.png)”)
                }
                $(“.tool-alert”).fadeToggle(200);
                $(“.zr_message-number”).hide();
            });
            var ht = $(“.tool-alert”).height();
            var tp = -ht – 15
            $(“.tool-alert”).css(“top”, tp)
        })
    </script>
</head>
<body>
    <div class=”tool-box”>
        <a class=”tool-button button-style”>
            <span class=”zr_message-number”>1</span>
        </a>
        <div class=”tool-alert”>
            <div class=”zr_box-content”>
                <p class=”zr_title”>通知标题</p>
                <p class=”zr_text”>通知文本通知文本通知文本通知文本通通知文本知文本通知文本通知文本通知文本通知通知文本文本通 <a class=”zr_link”>www.w3c.cn</a><a class=”zr_link”>了解详情</a></p>
                <p class=”zr_more”>更多信息请联系QQ:123456789 123456789</p>
            </div>
        </div>
    </div>
</body>
</html>
适合表单开发的前端框架
现在前端开发用什么框架
微信前端开发框架
» 本文来自:前端开发者 » 《前端开发窗口固定通知插件》
» 本文链接地址:https://www.rokub.com/6256.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!