素材牛VIP会员

纯JS实现右下角可关闭最小化的通知窗口

 所属分类:网页特效-悬浮层/弹出层

 浏览:1975次  评论:1次  更新时间:2016-12-23
牛币素材VIP可免积分下载
纯JS实现右下角可关闭最小化的通知窗口兼容IE6
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:网页常用的悬浮通知特效,纯JS实现右下角可关闭最小化的通知窗口

详细介绍

使用方法:

引入核心CSS样式

#downmsg_emessage{POSITION: fixed;_position:absolute; z-index:100; bottom:0;right:0; background:url(down_msg_bg.gif) no-repeat left top;width:225px;DISPLAY: block}
#donwmsg_head{float:left; display:inline; font-size:12px;color:#FFFFFF;margin-left: 26px;margin-top: 6px;}
#downmsgBar .close{float:right;width:11px;height:11px;margin-top:6px;display:block;margin-right:5px;}
#downmsgBar{height:25px;}
#donwmsg_content{height:162px;overflow:hidden;DISPLAY: block; HEIGHT: 162px}
#donwmsg_content ul{font-size:12px;color:#007cc1;	top: 0px;padding:0px 2px 0 6px;left: 6px;line-height:180%; height:110px; overflow:hidden;}
#donwmsg_content ul li{background:url(down_msg_bg.gif) no-repeat -100px -245px;text-indent:13px; float:left; margin:0px 8px;list-style: none;}
#donwmsg_content ul li a{color:#007cc1;}
#donwmsg_content ul .ll a{color:#a10000;font-weight:bold;}
#donwmsg_content p{position:absolute;top: 145px; text-align:center; right:20px;}
#donwmsg_content .lb{padding:0px; text-align:center;}
#donwmsg_content .lb a{font-size:12px;color:Blue}
a.msg-hidden-btn-2{width:11px; height:11px;overflow:hidden;float:right;display:block;margin-right:5px;margin-top:6px;background:url(down_msg_bg.gif) no-repeat -0px -250px;}
a.msg-hidden-btn-1{ width:11px; height:11px;overflow:hidden;float:right;display:block;margin-right:5px;margin-top:6px;background:url(down_msg_bg.gif) no-repeat -50px -250px;}

引入JS文件

<script src="msg.js" type="text/javascript"></script>

HTML结构

<div id="downmsg_emessage">
  <div id="downmsgBar">
    <div id="donwmsg_head">通知/提醒</div><a class="close" href="javascript:closeDiv()"></a><a class="msg-hidden-btn-1" id="msg_hidden_btn" href="javascript:showHideDiv()">&nbsp;</a></div>
    <div id="donwmsg_content">
       <ul>
            <li><a href="http://www.sucainiu.com/" target="_blank">首页</a></li>
            <li><a href="http://www.sucainiu.com/jquery.html" target="_blank">jQuery特效</a></li>
            <li><a href="http://www.sucainiu.com/source.html" target="_blank">源码分享</a></li>
            <li><a href="http://www.sucainiu.com/php.html" target="_blank">PHP/MySql</a></li>
            <li><a href="http://www.sucainiu.com/templates.html" target="_blank">前端模版</a></li>
            <li><a href="http://www.sucainiu.com/tools.html" target="_blank">在线工具箱</a></li>
       </ul>
       <p><span class="lb"><a href="http://www.sucainiu.com/">查看更多</a></span></p>
    </div>
</div>

相关素材 - 悬浮层/弹出层

讨论这个素材(1)回答他人问题或分享使用心得会奖励牛币

兰***乡  
2019年09月09日

不错,要是。。

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:1 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)