文档章节

右下面弹出框实现代码

tianyawhl
 tianyawhl
发布于 2016/04/05 16:20
字数 365
阅读 30
收藏 0

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

 

© 著作权归作者所有

tianyawhl
粉丝 8
博文 258
码字总数 136550
作品 0
常州
前端工程师
私信 提问
在任意位置弹出PopupWindow

在任意位置弹出PopupWindow Harries Blog™2017-11-066 阅读 GitHubcatAPIbuildgitAndroid 前言 在日常的 开发 中,经常会有弹框的操作。实现弹框有两种选,PopupWindow或者Dialog,这里就先...

Harries Blog™
2017/11/06
0
0
web前端:div 弹出窗口实现——支持拖动、缩放、最大化

最近在项目中用到弹出窗口的功能,花了一些时间,就想做一个通用点的弹出窗口,这样大家就可以拿去直接用。如果正好你也需要做一个弹出框的功能,这个代码正适合你。 一、弹窗效果 这个弹出窗...

海藏青羽
2018/04/27
0
0
idea 使用git更新代码后之前写的代码全部丢失问题解决

比较吓人的操作,不过后来通过下面方法恢复了 最近在idea使用git提交代码的时候,更新之后发现自己的代码还没提交就已经没了 不知道是不是自己git命令使用有问题,反正做个记录吧 右击项目,...

writeademo
04/12
125
0
StarUML使用说明-指导手册

1.综述 StarUML是一种生成类图和其他类型的统一建模语言(UML)图表的工具。这是一个用Java语言描述的创建类图的简明手册。 StarUML(简称SU),是一种创建UML类图,并能够自动生成Java的“stub ...

楠木楠
2016/08/22
399
0
【开放平台】各平台相关API搜集&调用遇到问题一览表(Javascript版本)

下面列出的问题均为在开发中所遇到的,如果有更优解决方案或者觉得本人对问题理解错误,欢迎拍砖,轻重自便。(^^) …… 一、百度地图API及其他 1、相关资料文档列表 地图API示例:看文档哪有...

呢喃的猫咪
2014/02/13
102
0

没有更多内容

加载失败,请刷新页面

加载更多

作为一个(IT)程序员!聊天没有话题?试试这十二种技巧

首先呢?我是一名程序员,经常性和同事没话题。 因为每天都会有自己的任务要做,程序员对于其他行业来说;是相对来说比较忙的。你会经常看到程序员在发呆、调试密密麻麻代码、红色报错发呆;...

小英子wep
58分钟前
11
0
【SpringBoot】产生背景及简介

一、SpringBoot介绍 Spring Boot 是由 Pivotal 团队提供的全新框架,其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程,该框架使用了特定的方式来进行配置,从而使开发人员不再需要...

zw965
今天
4
0
简述并发编程分为三个核心问题:分工、同步、互斥。

总的来说,并发编程可以总结为三个核心问题:分工、同步、互斥。 所谓分工指的是如何高效地拆解任务并分配给线程,而同步指的是线程之间如何协作,互斥则是保证同一时刻只允许一个线程访问共...

dust8080
今天
6
0
OSChina 周四乱弹 —— 当你简历注水但还是找到了工作

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @花间小酌 :#今日歌曲推荐# 分享成龙的单曲《男儿当自强》。 《男儿当自强》- 成龙 手机党少年们想听歌,请使劲儿戳(这里) @hxg2016 :刚在...

小小编辑
今天
3.2K
22
靠写代码赚钱的一些门路

作者 @mezod 译者 @josephchang10 如今,通过自己的代码去赚钱变得越来越简单,不过对很多人来说依然还是很难,因为他们不知道有哪些门路。 今天给大家分享一个精彩的 GitHub 库,这个库整理...

高级农民工
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部