右下面弹出框实现代码

最新推荐文章于 2021-05-31 09:12:53 发布

weixin_34288121

最新推荐文章于 2021-05-31 09:12:53 发布

阅读量90

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/u/2612473/blog/652802

版权

2019独角兽企业重金招聘Python工程师标准>>>

html 如下

<div id="rightNoticeSlide">
        <div class="rightNoticeSlide-title">
            <a href="javaScript:void(0)" id="close" target="_self">×</a>
            <div class="rightNoticeSlide-title-content" style="">biaoti</div>
            <div style="clear:both;"></div>
        </div>
        <div class="out_message_content " style="">
            <div id="message_content" style="">
                <ul style="">
                    <li><a href="index2.html">内容1</a></li>
                    <li>内容2</li>
                    <li>内容1</li>
                    <li>内容2</li>
                    <li>内容1</li>
                    <li>内容2</li>
                </ul>
            </div>
        </div>
    </div>

js 如下

        function Jihua_Cnblogs_Com() { $("#rightNoticeSlide").slideDown("slow");  }
        function KeleyiAutoHide() { $("#rightNoticeSlide").slideUp("slow");  }
        $(document).ready(function () {
            var a  =setTimeout(function () { KeleyiAutoHide(); },5000);
            setTimeout(function () {
                Jihua_Cnblogs_Com();
            }, 1);
           a;
            $("#close").click(function () {
                KeleyiAutoHide();
            });
       $("#rightNoticeSlide").hover(function(){
    clearTimeout(a);
   
  },function(){
   a=setTimeout(function () { KeleyiAutoHide(); },5000)
  });
           
        })

slidedown 一般是隐藏的div 向下慢慢滑动，全部显示，此例子刚开始向上滑动慢慢全部显示，原因是样式定义了position:fixed;left 及 right,相当于把下面与右边的位置固定了，slidedown应理解为展开，slideup理解为收缩，不能理解为向上滑动或者向下滑动

css 如下

#rightNoticeSlide{border:#ccc 1px solid;z-index:100;width:300px;position:fixed; display:none;background:#fcfcfc; bottom:5px; right:10px; overflow:hidden;}
.rightNoticeSlide-title{border:1px solid #fff;border-bottom:none;width:100%;height:35px;border-bottom:1px solid #ccc;font-size:12px;overflow:hidden;color:#fff;background:#069dd5}
#close{float:right;padding:6px 8px 5px 0;width:16px;line-height:auto;color:#a1e4fd;font-size:14px;font-weight:bold;text-align:center;cursor:pointer;overflow:hidden;}
#close:hover{color:#fff;}
.rightNoticeSlide-title-content{padding:8px 0 5px 10px;width:100px;line-height:18px;text-align:left;overflow:hidden;}
.out_message_content{padding-bottom:5px;border:1px solid #fff;border-top:none;width:100%;height:auto;font-size:12px;}
#message_content{margin:0 5px 0 5px;padding:10px 0 10px 5px;font-size:12px;color:#333;text-align:left;overflow:hidden;}
#message_content ul{color:red;list-style:none;line-height:20px;padding-left:0;}

转载于:https://my.oschina.net/u/2612473/blog/652802