<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>类似QQ对话框上下部分可拖动代码-样例代码</title>

<style>

ul,li{margin:0;padding:0;}

body{font:14px/1.5 Arial;color:#666;}

#box{position:relative;width:600px;height:400px;border:2px solid #000;margin:10px auto;overflow:hidden;}

#box ul{list-style-position:inside;margin:10px;}

#box div{position:absolute;width:100%;}

#top,#bottom{color:#FFF;height:100%;overflow:hidden;}

#top{background:green;}

#bottom{background:skyblue;top:50%}

#line{top:50%;height:4px;overflow:hidden;margin-top:-2px;background:red;cursor:n-resize;}

</style>

<script>

function $(id) {

return document.getElementById(id)


}

window.onload = function() {

var oBox = $("box"), oBottom = $("bottom"), oLine = $("line");

oLine.onmousedown = function(e) {

var disY = (e || event).clientY;

oLine.top = oLine.offsetTop;

document.onmousemove = function(e) {

var iT = oLine.top + ((e || event).clientY - disY);

var maxT = oBox.clientHeight - oLine.offsetHeight;

oLine.style.margin = 0;

iT < 0 && (iT = 0);

iT > maxT && (iT = maxT);

oLine.style.top = oBottom.style.top = iT + "px";

return false

};

document.onmouseup = function() {

document.onmousemove = null;

document.onmouseup = null;


oLine.releaseCapture && oLine.releaseCapture()

};

oLine.setCapture && oLine.setCapture();

return false

};

};

</script>

</head>

<body>

<center>上下拖动红条改变显示区域高度</center>

<div id="box">

    <div id="top">

        <ul>

            <li><a href="/soft/3183.shtml" target="_blank">上面显示的内容</a></li><li><a href="/soft/3279.shtml" target="_blank">上面显示的内容</a></li><li><a 





href="/soft/2967.shtml" target="_blank">上面显示的内容</a></li><li><a href="/soft/5047.shtml" target="_blank">上面显示的内容</a></li><li><a href="/soft/1789.shtml" 





target="_blank">上面显示的内容</a></li><li><a href="/soft/1786.shtml" target="_blank">上面显示的内容</a></li><li><a href="/soft/3580.shtml" target="_blank">上面显示的内容





</a></li><li><a href="/soft/3450.shtml" target="_blank">上面显示的内容</a></li><li><a href="/soft/3454.shtml" target="_blank">上面显示的内容</a></li><li><a 





href="/soft/2434.shtml" target="_blank">上面显示的内容</a></li>

        </ul>

    </div>

    <div id="bottom">

        <ul>

            <li><a href="/soft/16003.shtml" target="_blank">以下显示的内容</a></li><li><a href="/soft/16002.shtml" target="_blank">以下显示的内容</a></li><li><a 





href="/soft/16001.shtml" target="_blank">以下显示的内容</a></li><li><a href="/soft/16000.shtml" target="_blank">以下显示的内容</a></li><li><a href="/soft/15999.shtml" 





target="_blank">以下显示的内容</a></li><li><a href="/soft/15921.shtml" target="_blank">以下显示的内容</a></li><li><a href="/soft/15867.shtml" target="_blank">以下显示的内





容</a></li><li><a href="/soft/15866.shtml" target="_blank">以下显示的内容</a></li><li><a href="/soft/15781.shtml" target="_blank">以下显示的内容</a></li><li><a 





href="/soft/15780.shtml" target="_blank">以下显示的内容</a></li>

        </ul>

    </div>

    <div id="line"></div>

</div>

<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>

</body>

</html>

相似QQ对话框上下部分可拖动代码的更多相关文章

  1. 打开网页自动弹出QQ对话框的实现办法

    Ian今天偶然进入一个公司的企业网站,然后QQ聊天窗口这里马上就弹出与那个公司客服聊天的窗口.怀着好奇的心态,Ian分析了该公司的网站源码,发现了实现网页弹出qq对话框的原理与实现方法,相信此时此刻你 ...

  2. QQ,MSN,Skype在线客服代码

    QQ,MSN,Skype在线客服代码 在网站建设时,为了更好的实施网站的营销型,会用到QQ,MSN等在线交流,以便客户能够快捷方便的联系我们.在这里,提供QQ,MSN的在线客服代码给大家分享: 1.Q ...

  3. php网页，想弹出对话框， 消息框 简单代码

    php网页,想弹出对话框, 消息框 简单代码 <?php echo "<script language=\"JavaScript\">alert(\&q ...

  4. 基于jQuery仿QQ音乐播放器网页版代码

    基于jQuery仿QQ音乐播放器网页版代码是一款黑色样式风格的网页QQ音乐播放器样式代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="m ...

  5. 一键分享到QQ空间、QQ好友、新浪微博、微信代码

    通过qq空间.qq聊天.新浪微博和微信二维码分享平台提供的接口,实现把网页中对应的图片.标题.描述的信息参数用javascript获取后传进接口中,实现一键分享. 使用到的接口(测试时需要登录,网址和 ...

  6. 简易qq对话框

    //本程序由QT5 creator编译可运行 //dialog.h 1 #ifndef DIALOG_H #define DIALOG_H #include <QDialog> class ...

  7. (转)android底部弹出iOS7风格对话选项框(QQ对话框)--第三方开源--IOS_Dialog_Library

    本文转载于:http://blog.csdn.net/zhangphil/article/details/44940339 完成这个效果的是使用了 IOS_Dialog_Library 下载地址:ht ...

  8. Android----基于多触控的图片缩放和拖动代码实现

    引自:http://www.codefans.net/articles/584.shtml 一个android中自定义的ImageView控制,可对图片进行多点触控缩放和拖动类,包括了对图片放大和图片 ...

  9. Python爬虫爬取qq视频等动态网页全代码

    环境:py3.4.4 32位 需要插件:selenium BeautifulSoup xlwt # coding = utf-8 from selenium import webdriverfrom ...

随机推荐

  1. HBase流量限制和表负载均衡剖析

    1.概述 在HBase-1.1.0之前,HBase集群中资源都是全量的.用户.表这些都是没有限制的,看似完美实则隐患较大.今天,笔者就给大家剖析一下HBase的流量限制和表的负载均衡. 2.内容 也许 ...

  2. PyCharm汉化、破解教程

    汉化 1.将 C:\Program Files (x86)\JetBrains\PyCharm 2017\lib(路径是你的安装路径)目录下的resources_en.jar文件复制出来之后删除,以备 ...

  3. 【3】测试搭建成功的单机hadoop环境

    1.关闭防火墙service iptables stop,(已经设置开机关闭的忽略) 2.进入hadoop目录,修改hadoop配置文件(4个) core-site.xml(核心配置,fs.defau ...

  4. 二、VueJs 填坑日记之基础项目构建

    在上一篇文章中,大致介绍了一下本系列博文以及学习vuejs我们需要了解的一些概念,希望大家认真阅读,所谓知己知彼,百战百胜,学习也一样,工欲善其事,必先利其器,要想学好vuejs,那前提的概念一定要熟 ...

  5. C#自定义运行时窗体设计器Runtime FormDesigner

    写在前面:因为业务的需要,有时会使用到自定义运行时窗体设计器Runtime FormDesigner,实现的功能,就是IDE设计器的简化.设想一下,如果可以在程序运行时,再设计一个Form,然后编译代 ...

  6. CentOS7.x系统根目录分区扩容

    说明:系统版本为 Linux version 3.10.0-327.el7.x86_64 step1. 查看现有磁盘信息,可以看出根分区有45G [root@DEV-CMDB-DB02 ~]# df ...

  7. Docker Register安装与基本认证

    准备 基本事项 Docker环境 登录授权方式 镜像存放地址 HTTPS外网访问 启动Docker Registry 1. 基本事项 本篇涉及到的数据文件都放在/data目录下, 其中会有三个子目录 ...

  8. 登山（Climb）

    题目: Rocky山脉有n个山峰,一字排开,从西向东依次编号为1, 2, 3, --, n.每个山峰的高度都是不一样的.编号为i的山峰高度为hi.  小修从西往东登山.每到一座山峰,她就回头观望自己走 ...

  9. Bin、App_Data等文件夹详述(转自http://blog.csdn.net/zzjiadw/article/details/6801506)

    ASP.NET应用程序和ASP.Net网站所共有的文件: App_Browsers 包含 ASP.NET 用于标识个别浏览器并确定其功能的浏览器定义 (.browser) 文件.有关更多信息,请参见浏 ...

  10. python中函数的参数解析

    python中函数的各种参数梳理: 1.形参:函数定义时传入的参数 2.实参:函数调用时传入的参数 (有形参必传实参,形参里自身特点可不传的,可传可不传) 3.缺省参数:不传为默认值,传了会覆盖(下面 ...