<!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. vue初级学习--路由router的编写（resolve的使用）

    一.导语 最近在用vue仿写淘宝的商品详情页面以及加入购物车页面,若是成功了,分享给大家~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 二.正文 我先用控制台创建了vue项目demo(如 ...

  2. ⑩bootstrap组件 导航 使用基础案例

        <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  3. ⑦bootstrap按钮 图片 辅助使用基础案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Three.js 保存camera（视角）设置到数据库，包括场景的缩放、旋转、移动等

    最近在做的项目中遇到需要保存当前的3d管道视角设置的问题,用户希望在对3d场景内的管道进行了缩放.旋转.移动之后可以将场景当前的视角状态保存在数据库中,并在下次加载时读取. 经过不断的尝试和研究,在同 ...

  5. Magicodes.Admin.Core开源框架总体介绍

    框架说明 Magicodes.Admin.Core框架在ABP以及ASP.NET ZERO的基础上进行了封装和完善,目前基于.NET Core 2.0+(Framework版本),由于部分组件在.NE ...

  6. riot.js教程【四】Mixins、HTML内嵌表达式

    前文回顾 riot.js教程[三]访问DOM元素.使用jquery.mount输入参数.riotjs标签的生命周期: riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法: riot.j ...

  7. Logstash&Redis&Elasticsearch&Kibana

    [搭建] 一个很好的提示,强调版本的一致性 http://www.cnblogs.com/yjf512/p/4194012.html http://michael.bouvy.net/blog/en/ ...

  8. List实现

    1.元素添加 #include <stdio.h> #include <stdlib.h> struct ListNode{ struct ListNode* next; in ...

  9. 从零一起学Spring Boot之LayIM项目长成记（五）websocket

    前言 距离上一篇已经比较久的时间了,项目也是开了个头.并且,由于网上的关于Spring Boot的websocket讲解也比较多.于是我采用了另外的一个通讯框架 t-io 来实现LayIM中的通讯功能 ...

  10. springmvc之单元测试（MockMvc）-独立测试

    spring mvc测试框架提供了两种方式,独立安装和集成Web环境测试(此种方式并不会集成真正的web环境,而是通过相应的Mock API进行模拟测试,无须启动服务器) 1.mockMvc.perf ...