<!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. linux mysql无故无法启动了,centos 7

    转自: http://support.moonpoint.com/software/database/mysql/not-running-centos7.php 下面简单翻译一下. 详细内容可以阅读英 ...

  2. plsql远程连接虚拟机上的oracle

    下载oracle instantclient_11_2和plsql 将oracle instantclient_11_2解压到任意目录 在此目录下新建network,在network目录下新建admi ...

  3. tomcat相关实验

    tomcat相关实验 1.实现LNT 同主机实现 1.安装并启动tomcat 1)OpenJDK的安装 yum install java-1.8.0-openjdk-devel.x86_64 确定JD ...

  4. Input类型是checkbox时checked属性获取

    记录一下checkbox 的 checked 属性的获取办法,以备忘记: 假如你的一个HTML页中有这么一段代码: <input name="chbRem" id=" ...

  5. JS中!=、==、!==、===的用法和区别

    1.对于string,number等基础类型,==和===是有区别的 1)不同类型间比较,==之比较"转化成同一类型后的值"看"值"是否相等,===如果类型不同 ...

  6. Python中文

    在python中有两种默认的字符串:str和unicode.在Python中一定要注意区分"Unicode字符串"和"Unicode对象"的区别. 后面所有的& ...

  7. redis数据类型及常用命令介绍（图文实例）

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAhgAAAFLCAYAAACUdvXUAAAgAElEQVR4nO3da1da58L2fT5KfPvc96 ...

  8. Java提高十七：TreeSet 深入分析

    前一篇我们分析了TreeMap,接下来我们分析TreeSet,比较有意思的地方是,似乎有Map和Set的地方,Set几乎都成了Map的一个马甲.此话怎讲呢?在前面一篇讨论HashMap和HashSet ...

  9. java虚拟机概述

    java 虚拟机是什么?       java虚拟机是一个将字节码指令映射为对应物理操作系统指令的程序.       java程序的运行需要事先安装 jdk,而在jdk内部的jre中其核心就是 jvm ...

  10. 极光推送_总结_01_Java实现极光推送

    一.代码实现 1.配置类—Env.java package com.ray.jpush.config; /**@desc : 极光推送接入配置 * * @author: shirayner * @da ...