右下面弹出框实现代码 原

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;}

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏java一日一条

关于HTTP协议,一篇就够了

1.HTTP协议,即超文本传输协议(Hypertext transfer protocol)。是一种详细规定了浏览器和万维网(WWW = World Wide ...

17350
来自专栏python教程

基于python的种子搜索网站(二)开发过程

该项目是基于python的web类库django开发的一套web网站,做为本人的毕业设计。

12720
来自专栏运维经验分享

Nginx正则表达式之匹配操作符详解 原

nginx可以在配置文件中对某些内置变量进行判断,从而实现某些功能。例如:防止rewrite、盗链、对静态资源设置缓存以及浏览器限制等等。由于nginx配置中有...

32420
来自专栏运维经验分享

理解NGINX的重写break和last,以及location匹配规

        location / {             index  index.html index.htm index.php l.php; ...

12140
来自专栏量子位

最新手机芯片AI跑分出炉:高通、联发科力压华为

手机AI哪家强?这不能仅仅听厂商的宣传。到底有没有一个AI的“安兔兔”来给手机跑个分,客观评价一下手机的AI性能呢?

8930
来自专栏运维经验分享

nginx+tomcat实现动静分离 原

在本文中,我们将静态资源放在 A 主机的一个目录上,将动态程序放在 B 主机上,同时在 A 上安装 Nginx 并且在 B 上安装 Tomcat。配置 Ngin...

10630
来自专栏编程坑太多

『互联网架构』软件架构-spring源码之spring MVC(上)(12)

PS:先了解总体的流程,然后在细细的品味源码的味道,重点是DispatcherServlet 是HTTP请求处理程序/控制器的中央调度程序。

11020
来自专栏数据派THU

独家 |如何创造性地应用深度学习视觉模型于非视觉任务(附代码)

众所周知,目前深度学习在计算机视觉领域已经有很好的应用落地,再加上迁移学习,可以很容易的训练出一个用于视觉任务的模型。但是现实中还有很多任务的原始数据是非视觉类...

16220
来自专栏深度学习之tensorflow实战篇

Pattern matching: The gestalt approach一种序列的文本相似度方法

0.6153846153846154 通过上面的案例可以看出本算法侧重的,是序列的相似性。会忽视主体的词义、语义。

22630
来自专栏运维经验分享

nginx https反向代理tomcat的2种实现方法

这篇文章主要给大家介绍了关于nginx https反向代理tomcat的2种实现方法,第一种方法是nginx配置https,tomcat也配置https,第二种...

30560

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励