文档章节

类似QQ对话框上下部分可拖动的代码

lgscofield
 lgscofield
发布于 2015/06/26 13:58
字数 683
阅读 7
收藏 0
点赞 0
评论 0
一款JS特效:类似QQ对话框上下部分可拖动的代码,全兼容的,在IE或火狐以及Chrome等浏览器都能正常运行。操作方法:上下拖动红条改变显示区域高度,往上则全部显示下部的内容,往下拖则全部显示上部的内容,推荐给大家。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS+CSS上下两部分可拖动改变div层高度的代码丨芯晴网页特效丨CsrCode.Cn</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="/html/txdm/cddh/" title="">菜单导航特效</a></li>
<li><a href="/html/txdm/tcys/" title="">图层样式特效</a></li>
<li><a href="/html/txdm/ljwb/" title="">链接文本特效</a></li>
<li><a href="/html/txdm/txtx/" title="">图形图像特效</a></li>
<li><a href="/html/txdm/sbtx/" title="">鼠标特效代码</a></li>
<li><a href="/html/txdm/ymck/" title="">页面窗口特效</a></li>
<li><a href="/html/txdm/wybj/" title="">网页背景特效</a></li>
<li><a href="/html/txdm/rqsj/" title="">日期时间特效</a></li>
<li><a href="/html/txdm/ymss/" title="">页面搜索特效</a></li>
<li><a href="/html/txdm/bgtx/" title="">表格表单特效</a></li>
<li><a href="/html/txdm/qtdm/" title="">其他网页特效</a></li>
        </ul>
    </div>
    <div id="bottom">
        <ul>
            生活常识
<li><a href="http://changshi.csrcode.cn/html_cs/shenghuochangshi/">生活常识</a></li>
<li><a href="http://changshi.csrcode.cn/html_cs/jiankangzhishi/">健康知识</a></li>
<li><a href="http://changshi.csrcode.cn/html_cs/meirongshoushen/">美容瘦身</a></li>
<li><a href="http://changshi.csrcode.cn/html_cs/meirongshoushen/jianfeishoushen/">减肥瘦身</a></li>
<li><a href="http://changshi.csrcode.cn/html_cs/meirongshoushen/meironghufu/">美容护肤</a></li>
<li><a href="http://changshi.csrcode.cn/html_cs/yinshichangshi/">饮食常识</a></li>
<li><a href="http://changshi.csrcode.cn/html_cs/yangshengzhidao/">养生之道</a></li>
<li><a href="http://changshi.csrcode.cn/html_cs/diannaozhishi/">电脑知识</a></li>
<li><a href="http://changshi.csrcode.cn/html_cs/touzilicai/">投资理财</a></li>
<li><a href="http://changshi.csrcode.cn/html_cs/fushichangshi/">服饰常识</a></li>
<li><a href="http://changshi.csrcode.cn/html_cs/shejiaoliyi/">社交礼仪</a></li>
        </ul>
    </div>
    <div id="line"></div>
</div>
</body>
</html>

<br><br><hr><p align="center"><font color=black>本特效收集于互联网,只为兴趣与学习交流,不作商业用途。</font></p>

本文转载自:http://lgscofield.iteye.com/blog/1629948

共有 人打赏支持
lgscofield

lgscofield

粉丝 20
博文 140
码字总数 63036
作品 0
南京
架构师
基于图像处理操作 QQ 的工具 - foolqq

基于图像处理操作QQ的工具foolqq 目前读写QQ的机器人都是基于爬虫分析smartqq报文来实现的,然而smartqq腾讯已经不再维护,其HTTP服务端经常不可用,且经常需要不定时的重启,foolqq应运而生...

mohuan
2017/10/15
312
2
深度文件管理器 V1.6 正式发布

深度文件管理器是深度科技开发的一款功能强大、简单易用的文件管理工具。 它沿用了经典文件管理器的功能和布局,并在此基础上简化了用户操作,增加了很多特色功能。一目了然的导航栏、智能识...

王练
2017/10/26
2.6K
16
RecyclerView进阶

上篇文章我们讲解了RecyclerView的基本使用,本篇就让我们承接上篇文章讲下RecyclerView的进阶使用。 没看过上篇的朋友可以点击右边的传送门:《RecyclerView基本使用》 背景 RecyclerView有...

安卓小哥
2017/12/26
0
0
基于 HTML5 的工业互联网云平台监控机房 U 位

前言 机柜 U 位管理是一项突破性创新技术--继承了 RFID 标签(电子标签)的优点的同时,完全解决了 RFID 技术(非接触式的自动识别技术)在机房 U 位资产监控场应用景中的四大缺陷,采用工业...

xhload3d
07/09
0
0
WPF/Silverlight深度解决方案:(十三)完美自定义之ChildWindow

ChildWindow在所有应用领域中都是必不可缺的好工具,小到一个弹出的确认对话框;大到包含众多复杂参数、选项及数据列表的资源窗口,都可以通过它来分类实现。ChildWindow的好处是可以实现拖动...

晨曦之光
2012/03/09
0
0
Android常用对话框大全——Dialog

版权声明:本文出自阿钟的博客,转载请注明出处:http://blog.csdn.net/a_zhon 唉!最近一直忙碌着写项目以至于都没有空出点时间来总结近期的学习,记录学习到的东西…现在正好有时间了就该好...

jdfkldjlkjdl
2017/11/29
0
0
Parallax TableView Controller

实现类似Path 2.0应用的列表效果。在列表的第一行加上图片,当手指往下拉动列表时,第一行的图片下面的部分会显示出来,即所谓的parallax effect。从整体来看,列表上半部分显示图片,图片可...

匿名
2012/07/06
570
0
Android实现类似QQ的滑动删除效果

观察QQ的滑动删除效果,可以猜测可以滑动删除的部分主要包含两个部分,一个是内容区域(用于放置正常显示的view),另一个是操作区域(用于放置删除 按钮)。默认情况下,操作区域是不显示的...

i_love_lu
2016/03/04
68
0
让不懂编程的人爱上iPhone开发(2017iOS11+Swift4+Xcode9版)-第5篇

好了,继续我们上次的课程。 提醒下大家,本系列教程的每一个章节都有对应的项目源代码,如果大家在看教程的过程中遇到任何问题,可以参考项目源代码。 源代码地址: https://github.com/ese...

王寒
2017/10/29
0
0
Android实用视图动画及工具系列之五:底部回复对话框,仿QQ空间微信朋友圈回复对话框

实现效果 功能说明 这就是一个底部弹出对话框,仿QQ空间微信朋友圈底部弹出对话框,用了一些普通的UI优化,以及添加了表情框等,需要用到类似功能的自行下载源码集成。 适用于新手及新学习A...

jaikydota163
2016/08/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

微信小程序Java登录流程(ssm实现具体功能和加解密隐私信息问题解决方案)

文章有不当之处,欢迎指正,如果喜欢微信阅读,你也可以关注我的微信公众号:好好学java,获取优质学习资源。 一、登录流程图 二、小程序客户端 doLogin:function(callback = () =>{}){let ...

公众号_好好学java
29分钟前
0
0
流利阅读笔记28-20180717待学习

“我不干了!” 英国脱欧大臣递交辞呈 雪梨 2018-07-17 1.今日导读 7 月 6 日,英国政府高官齐聚英国首相的官方乡间别墅——契克斯庄园,讨论起草了一份关于英国政府脱欧立场的白皮书。可是没...

aibinxiao
59分钟前
6
0
OSChina 周二乱弹 —— 理解超算排名这个事,竟然超出了很多人的智商

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @-冰冰棒- :分享Ed Sheeran/Beyoncé的单曲《Perfect Duet (with Beyoncé)》 《Perfect Duet (with Beyoncé)》- Ed Sheeran/Beyoncé 手机...

小小编辑
今天
93
7
Android 获取各大音乐平台的真实下载地址

废话 电脑使用谷歌浏览器或者QQ浏览器的时候。。。。。。。说不清楚,还是看图吧 大概意思就是,只要网页上需要播放,只要能播放并且开始播放,这个过程就肯定会请求到相关的音乐资源,然后就...

她叫我小渝
今天
0
0
shell中的函数、shell中的数组、告警系统需求分析

shell中的函数 格式: 格式: function f_name() { command } 函数必须要放在最前面 示例1(用来打印参数) 示例2(用于定义加法) 示例3(用于显示IP) shell中的数组 shell中的数组1 定义数...

Zhouliang6
今天
2
0
用 Scikit-Learn 和 Pandas 学习线性回归

      对于想深入了解线性回归的童鞋,这里给出一个完整的例子,详细学完这个例子,对用scikit-learn来运行线性回归,评估模型不会有什么问题了。 1. 获取数据,定义问题     没有...

wangxuwei
今天
1
0
MAC安装MAVEN

一:下载maven压缩包(Zip或tar可选),解压压缩包 二:打开终端输入:vim ~/.bash_profile(如果找不到该文件新建一个:touch ./bash_profile) 三:输入i 四:输入maven环境变量配置 MAVEN_HO...

WALK_MAN
今天
0
0
33.iptables备份与恢复 firewalld的9个zone以及操作 service的操作

10.19 iptables规则备份和恢复 10.20 firewalld的9个zone 10.21 firewalld关于zone的操作 10.22 firewalld关于service的操作 10.19 iptables规则备份和恢复: ~1. 保存和备份iptables规则 ~2...

王鑫linux
今天
2
0
大数据教程(2.11):keeperalived+nginx高可用集群搭建教程

上一章节博主为大家介绍了目前大型互联网项目的系统架构体系,相信大家应该注意到其中很重要的一块知识nginx技术,在本节博主将为大家分享nginx的相关技术以及配置过程。 一、nginx相关概念 ...

em_aaron
今天
1
1
Apache Directory Studio连接Weblogic内置LDAP

OBIEE默认使用Weblogic内置LDAP管理用户及组。 要整理已存在的用户及组,此前办法是导出安全数据,文本编辑器打开认证文件,使用正则表达式获取用户及组的信息。 后来想到直接用Apache Dire...

wffger
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部