您当前的位置:首页 > 网站建设笔记 >

网页右下角消息新闻提示框

0

效果见网页右下角,点击下载:网页右下角消息新闻提示框代码.rar,我们来看看HTML+CSS+JS的代码。

<div class="message-box">
    <div class="conbtn">
        <!--
        使用CSS背景图片制作的三个按钮
        <span class="popBtn popClose"></span>
        <span class="popBtn popShow"></span>
        <span class="popBtn popHide"></span>
        -->

        <!--使用CSS3字符图标制作的三个按钮-->
        <span class="icon-window-minimize popHide"></span>
        <span class="icon-window-maximize popShow"></span>
        <span class="icon-window-close popClose"></span>
    </div>
    <div class="tit"><a href="/index.php?m=content&c=tag&a=lists&tag=js%E7%89%B9%E6%95%88">js特效</a></div>
    <div class="txtScroll-top">
        <div class="bd">
            <ul class="infoList">
                <li><a href="/wangzhanbj/171.html">图片列表自动滚动+CSS3遮罩动画效果代码</a></li>
                <li><a href="/wangzhanbj/170.html">基于jquery的图片自动切换效果代码</a></li>
                <li><a href="/wangzhanbj/169.html">帝国cms 首页列表页实现顶一下点赞功能</a></li>
                <li><a href="/wangzhanbj/168.html">帝国cms 来顶一下(点赞功能)优化提高用户体验</a></li>
                <li><a href="/wangzhanbj/167.html">dedecms 顶一下点赞功能美化</a></li>
                <li><a href="/wangzhanbj/166.html">jquery+css3点赞功能效果代码</a></li>
                <li><a href="/wangzhanbj/162.html">响应式滑动展开收缩手风琴列表代码</a></li>
                <li><a href="/wangzhanbj/161.html">滑动展开收缩时间轴发展历程大事件记录JS网页特效</a></li>
            </ul>
        </div>
    </div>
</div>

<style type="text/css">
/*载入字符字体文件,使用字符图标替换背景图片来制作三个按钮*/
@font-face {
    font-family:'fontello';
    src:url('font/fontello.eot?96777373');
    src:url('font/fontello.eot?96777373#iefix') format('embedded-opentype'),
        url('font/fontello.woff2?96777373') format('woff2'),
        url('font/fontello.woff?96777373') format('woff'),
        url('font/fontello.ttf?96777373') format('truetype'),
        url('font/fontello.svg?96777373#fontello') format('svg');
    font-weight:normal;
    font-style:normal;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
    font-family:"fontello";
    font-style:normal;
    font-weight:normal;
    speak:none;
    display:inline-block;
    text-decoration:inherit;
    width:1em;
    height:36px;
    margin-left:0;
    margin-right:5px;
    line-height:36px;
    text-align:center;
    font-variant:normal;
    text-transform:none;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
.icon-window-maximize:before {content:'\f2d0';}
.icon-window-minimize:before {content:'\f2d1';}
.icon-window-close:before {content:'\f2d3';}

.message-box {
    position:fixed;z-index:10;right:10px;bottom:-5px;
    width:340px;overflow:hidden;visibility:hidden;
    border:1px solid #999;border-radius:5px;
    background:#f5f5f5;
    background-image:-webkit-linear-gradient(to bottom, rgba(251,251,251,1), rgba(231,231,231,1));
    background-image:-moz-linear-gradient(to bottom, rgba(251,251,251,1), rgba(231,231,231,1));
    background-image:-o-linear-gradient(to bottom, rgba(251,251,251,1), rgba(231,231,231,1));
    background-image:linear-gradient(to bottom, rgba(251,251,251,1), rgba(231,231,231,1));
    box-shadow:0 1px rgba(255,255,255,1) inset,
                1px 0 rgba(250,250,250,1) inset,
                0 0 1px rgba(244,244,244,1) inset,
                0 0 5px rgba(0,0,0,0.5);
}

.message-box .conbtn {position:absolute;right:0;height:36px;overflow:hidden}
/*
使用CSS背景图片制作的三个按钮样式
.popBtn {float:right;width:18px;height:18px;cursor:pointer;margin:9px 0 0 1px;background:url(buttons.png) no-repeat;}
.popClose {margin-right:10px;background-position:-38px 0;}
.popClose:hover {background-position:-38px -20px;}
.popHide {background-position:-19px 0;}
.popHide:hover {background-position:-19px -20px;}
.popShow {display:none;background-position:0 0;}
.popShow:hover {background-position:0 -20px;}
*/
.message-box span {display:inline-block;font-size:12px;cursor:pointer;color:#adadad;}
.message-box span:hover {color:#cc0033;}
.message-box span.icon-window-maximize {display:none;}

.message-box .tit {height:36px;line-height:36px;padding:0 0 5px 15px}
.message-box .tit a {text-decoration:none;font-size:16px}
.txtScroll-top{}
.txtScroll-top .bd{}
.txtScroll-top ul.infoList {
    margin:0;padding:0 0 0 20px;
    list-style-position:outside;list-style-type:disc;list-style-image:none;}
.txtScroll-top ul.infoList li {
    height:25px;line-height:25px;font-size:12px;margin:0;padding:0;
    display:list-item;list-style-position:outside;
    list-style-type:disc;list-style-image:none;}
.txtScroll-top ul.infoList a{
    display:block;color:#555;text-decoration:none;
    overflow:hidden;text-overflow:ellipsis;-o-text-overflow:ellipsis;white-space:nowrap;}
.txtScroll-top ul.infoList a:hover{color:blue;text-decoration:underline;}
</style>

<script type="text/javascript" src="/statics/ljs/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var messBoxHeight = $(".message-box").get(0).offsetHeight+10;
    $(".message-box").css({height:"41px",visibility:"visible"});
    $(".popHide").bind("click",function(){$(".message-box").animate({height:"41px"},500);$(this).hide();$(".popShow").show();});
    $(".popShow").bind("click",function(){$(".message-box").animate({height:messBoxHeight+"px"},500);$(this).hide();$(".popHide").show();});
    $(".popClose").bind("click",function(){$(".message-box").hide(700);});
    $(".message-box").animate({height:messBoxHeight+"px"},1200);
    $("#floatPanel").hide();
});
</script>
顶部中部底部