JS实现左右拖动改变内容显示区域大小的方法

首页

web前端

js教程

JS实现左右拖动改变内容显示区域大小的方法_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:36 PM

js 改变

本文实例讲述了JS实现左右拖动改变内容显示区域大小的方法。分享给大家供大家参考。具体如下：

这里演示左右可拖动的内容显示区效果，左右拖动红条改变显示区域宽度大小，往左拖则全部显示右侧内容，往右拖则全部显示左则内容，类似QQ的聊天窗口一样，可以向上或向下拖动大小，以适合使用者的要求。本代码完全JavaScript与CSS代码结合实现，在各主流浏览器内运行的兼容性也不错，左右拖动改变大小的JS代码推荐给大家。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-drug-cha-area-show-demo/

具体代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>左右可拖动的内容显示区</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;}
#top,#bottom{color:#FFF;width:300px;height:400px;overflow:hidden;}
#top{background:green; float:left}
#bottom{background:skyblue;float:right}
#line{position:absolute;top:0;left:50%;height:100%;width:4px;overflow:hidden;background:red;cursor:w-resize;}
</style>
<script>
function $(id) {
 return document.getElementById(id) 
}
window.onload = function() {
 var oBox = $("box"), oTop = $("top"), oBottom = $("bottom"), oLine = $("line");
 oLine.onmousedown = function(e) {
 var disX = (e || event).clientX;
 oLine.left = oLine.offsetLeft;
 document.onmousemove = function(e) { 
  var iT = oLine.left + ((e || event).clientX - disX);
 var e=e||window.event,tarnameb=e.target||e.srcElement;
  var maxT = oBox.clientWight - oLine.offsetWidth;
  oLine.style.margin = 0;
  iT < 0 && (iT = 0);
  iT > maxT && (iT = maxT);
  oLine.style.left = oTop.style.width = iT + "px";
  oBottom.style.width = oBox.clientWidth - iT + "px";
 $("msg").innerText='top.width:'+oLine.style.width+'---bottom.width:'+oBottom.style.width+'---oLine.offsetLeft:'+oLine.offsetLeft+'---disX:'+disX+'---tarnameb:'+tarnameb.tagName;
  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>左右拖动红条改变显示区域宽度<span id="msg"></span></center>
<div id="box">
 <div id="top">
 <ul>
 <li><a href="#" target="_blank">jQuery初学实例代码集</a></li><li><a href="#" target="_blank">100多个ExtJS应用初学实例集</a></li>
  <li><a href="#" target="_blank">基于jQuery的省、市、县三级级联菜单</a></li>
  <li><a href="#" target="_blank">一个类似QQ网的JS相册展示特效</a></li>
  <li><a href="#" target="_blank">eWebEditor v4.60 最新通用精简版</a></li>
  <li><a href="#" target="_blank">FCKeditor 2.6.4.1 网页编辑器</a></li>
  <li><a href="#" target="_blank">jQuery平滑图片滚动</a></li>
  <li><a href="#" target="_blank">Xml+JS省市县三级联动菜单</a></li>
  <li><a href="#" target="_blank">jQuery 鼠标滑过链接文字弹出层提示的效果</a></li>
  <li><a href="#" target="_blank">JS可控制的图片左右滚动特效（走马灯）</a></li>
 </ul>
 </div>
 <div id="bottom">
 <ul>
 <li><a href="#" target="_blank">网页上部大Banner广告特效及图片横向滚动代码</a></li>
  <li><a href="#" target="_blank">FlexSlider网页广告、图片焦点图切换插件</a></li>
  <li><a href="#" target="_blank">兼容IE，火狐的JavaScript图片切换</a></li>
  <li><a href="#" target="_blank">jQuery仿ios无线局域网WIFI提示效果（折叠面板）</a></li>
  <li><a href="#" target="_blank">TopUp js图片展示及弹出层特效代码</a></li>
  <li><a href="#" target="_blank">jQuery仿Apple苹果手机放大镜阅读效果</a></li>
  <li><a href="#" target="_blank">Colortip 文字title多样式提示插件</a></li>
  <li><a href="#" target="_blank">网页换肤，Ajax网页风格切换代码集</a></li>
  <li><a href="#" target="_blank">超强大、漂亮的蓝色网页弹出层效果</a></li>
  <li><a href="#" target="_blank">jQuery 图像预览功能的代码实现</a></li>
 </ul>
 </div>
 <div id="line"></div>
</div>
</body>
</html>

登录后复制

希望本文所述对大家的JavaScript程序设计有所帮助。

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7612

CakePHP 教程

1387

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

136

显示更多

Related knowledge

如何使用JS和百度地图实现地图平移功能 Nov 21, 2023 am 10:00 AM

如何使用JS和百度地图实现地图平移功能百度地图是一款广泛使用的地图服务平台，在Web开发中经常用于展示地理信息、定位等功能。本文将介绍如何使用JS和百度地图API实现地图平移功能，并提供具体的代码示例。一、准备工作使用百度地图API前，首先需要在百度地图开放平台（http://lbsyun.baidu.com/）上申请一个开发者账号，并创建一个应用。创建完成

推荐：优秀JS开源人脸检测识别项目 Apr 03, 2024 am 11:55 AM

人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计

美团外卖商家版起送价怎么改 Mar 27, 2024 pm 07:20 PM

在美团外卖商家版的运营过程中，起送价的设置是一个至关重要的环节。合理的起送价不仅能够帮助商家控制成本，还能在一定程度上提升订单金额，从而增加整体收益。然而，很多商家对于如何修改起送价并不十分了解。那么在下文中本站小编就将为各位商家们带来详细的起送价设置攻略，想要了解的话就快来下文中一探究竟吧！在美团外卖商家中心，通过登录后进入店铺设置，然后选择门店管理，在门店管理页面顶部的切换导航中，选中配送信息，接着点击新增配送区域即可完成操作。在您添加地点后，系统将自动显示相应的配送费用。完成订单后，您将获

如何使用PHP和JS创建股票蜡烛图 Dec 17, 2023 am 08:08 AM

如何使用PHP和JS创建股票蜡烛图股票蜡烛图是股票市场中常见的一种技术分析图形，通过绘制股票的开盘价、收盘价、最高价和最低价等数据，帮助投资者更直观地了解股票的价格波动情况。本文将教你如何使用PHP和JS创建股票蜡烛图，并附上具体的代码示例。一、准备工作在开始之前，我们需要准备以下环境：1.一台运行PHP的服务器2.一个支持HTML5和Canvas的浏览器3

股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤 Dec 17, 2023 pm 06:55 PM

股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤，需要具体代码示例随着互联网和科技的快速发展，股票交易已经成为许多投资者的重要途径之一。而股票分析是投资者决策的重要一环，其中蜡烛图被广泛应用于技术分析中。学习如何使用PHP和JS绘制蜡烛图将为投资者提供更多直观的信息，帮助他们更好地做出决策。蜡烛图是一种以蜡烛形状来展示股票价格的技术图表。它展示了股票价格的

如何使用JS和百度地图实现地图点击事件处理功能 Nov 21, 2023 am 11:11 AM

如何使用JS和百度地图实现地图点击事件处理功能概述：在Web开发中，经常需要使用地图功能来展示地理位置和地理信息。而地图上的点击事件处理是地图功能中常用且重要的一部分。本文将介绍如何使用JS和百度地图API来实现地图的点击事件处理功能，并给出具体的代码示例。步骤：导入百度地图的API文件首先，要在HTML文件中导入百度地图API的文件，可以通过以下代码实现：

如何使用JS和百度地图实现地图热力图功能 Nov 21, 2023 am 09:33 AM

如何使用JS和百度地图实现地图热力图功能简介：随着互联网和移动设备的迅速发展，地图成为了一种普遍的应用场景。而热力图作为一种可视化的展示方式，能够帮助我们更直观地了解数据的分布情况。本文将介绍如何使用JS和百度地图API来实现地图热力图的功能，并提供具体的代码示例。准备工作：在开始之前，你需要准备以下事项：一个百度开发者账号，并创建一个应用，获取到相应的AP

PHP与JS开发技巧：掌握绘制股票蜡烛图的方法 Dec 18, 2023 pm 03:39 PM

随着互联网金融的迅速发展，股票投资已经成为了越来越多人的选择。而在股票交易中，蜡烛图是一种常用的技术分析方法，它能够显示股票价格的变化趋势，帮助投资者做出更加精准的决策。本文将通过介绍PHP和JS的开发技巧，带领读者了解如何绘制股票蜡烛图，并提供具体的代码示例。一、了解股票蜡烛图在介绍如何绘制股票蜡烛图之前，我们首先需要了解一下什么是蜡烛图。蜡烛图是由日本人

See all articles

JS实现左右拖动改变内容显示区域大小的方法_javascript技巧

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题