<!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. spring boot hello and docker

    主要是想试下spring boot运行在docker里的感觉, 小试牛刀   :) 这是原文,参考一下:  https://spring.io/guides/gs/spring-boot-docker ...

  2. iOS隐藏导航栏底部灰线

    首先创建 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #de38a5 } span.s1 { } span.s ...

  3. C语言 第三章 关系、逻辑运算与分支流程控制

    目录 一.关系运算 二.逻辑运算 三.运算优先级 四.if语句 4.0.代码块 4.1.单if语句 4.2.if else 4.3.多重if 4.4.?号:号表达式 五.switch语句 一.关系运算 ...

  4. python3基础视频教程

    随着目前Python行业的薪资水平越来越高,很多人想加入该行业拿高薪.有没有想通过视频教程入门的同学们?这份Python教程全集等你来学习啦! python3基础视频教程:http://pan.bai ...

  5. javascript第七章--DOM

    ① 节点层次 ② DOM操作技术

  6. bootstrap --> reset css

    /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, ...

  7. linux服务器上Apache配置多域名

    一, 打开httpd.conf 二 找到如下三个位置配置如下 DocumentRoot "/data" #以下这个配置是紧挨着的,有两个 <Directory "/ ...

  8. svg-写一个简单的进度条

    html <div class="container"> <div class="line-wrap"> <svg version ...

  9. 自定义控件，上图下字的Button，图片任意指定大小

    最近处在安卓培训期,把自己的所学写成博客和大家分享一下,今天学的是这个自定义控件,上图下字的Button安卓自带,但是苦于无法设置图片大小(可以在代码修改),今天自己做了一个,首先看一下效果图,比较实 ...

  10. 2778:Ride to School-poj

    2778:Ride to School 总时间限制:  1000ms 内存限制:  65536kB 描述 Many graduate students of Peking University are ...