<!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. Python入门学习（二）

    1 字典 1.1 字典的创建和访问 字典不同于前述的序列类型,它是一种映射类型.它的引入是为了简化定义索引值和元素值存在特定关系的定义和访问问题. 字典的定义形式为:字典变量名 = {key1:val ...

  2. elasticsearch 基础语句

    1.  doucument id 的两种生成方式 自动生成document id自动生成的id,长度为20个字符,URL安全,base64编码,GUID,分布式系统并行生成时不可能会发生冲突 POST ...

  3. Java设计模式相关面试

    1．接口是什么?为什么要使用接口而不是直接使用具体类? 接口用于定义 API.它定义了类必须得遵循的规则.同时,它提供了一种抽象,因为客户端只使用接口,这样可以有多重实现,如 List 接口,你可以使 ...

  4. Maven的pom.xml文件详解------Build Settings

    根据POM 4.0.0 XSD,build元素概念性的划分为两个部分:BaseBuild(包含poject build和profile build的公共部分,见下)和poject buil   < ...

  5. Attribute在.NET编程中的应用（三）

    用于参数的Attribute 在编写多层应用程序的时候,你是否为每次要写大量类似的数据访问代码而感到枯燥无味?比如我们需要编写调用存储过程的代码,或者编写T_SQL代码,这些代码往往需要传递各种参数, ...

  6. C#2.0中使用yield关键字简化枚举器的实现

    我们知道要使用foreach语句从客户端代码中调用迭代器,必需实现IEnumerable接口来公开枚举器,IEnumerable是用来公开枚举器的,它并不实现枚举器,要实现枚举器必需实现IEnumer ...

  7. Python之文件与目录

    file 通常建议使用open()打开文件,file用于类型判断 如果要把数据写到磁盘上,除调用flush()外,还得用sync(),以确保数据从系统缓冲区同步到磁盘.close()总是会调用这两个方 ...

  8. StackExchange.Redis学习笔记(四) 事务控制和Batch批量操作

    Redis事物 Redis命令实现事务 Redis的事物包含在multi和exec(执行)或者discard(回滚)命令中 和sql事务不同的是,Redis调用Exec只是将所有的命令变成一个单元一起 ...

  9. 在PHP中，将一个汉字数组按照拼音首字母进行排序

    (之前发的这篇博文因为含有敏感关键字,只好重发一遍了) <?php $str = "我们可以在浏览器中看到,当鼠标移到元素上时,元素开始向右移动,开始比较慢,之后则比较快,移开时按原曲 ...

  10. 《用Java写一个通用的服务器程序》03 处理新socket

    在讲监听器时说过处理的新的socket要尽快返回,监听器调用的是ClientFactory的createPhysicalConnection方法,那么就来看这个方法: public boolean c ...