效果见网页右下角，点击下载：网页右下角消息新闻提示框代码.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:'mbfontello';
  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;
}
.message-box [class^="icon-"]:before,
.message-box [class*=" icon-"]:before {
  font-family:"mbfontello";
  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:97px;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;letter-spacing:0;}
.txtScroll-top ul.infoList a{
  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>