一、第一种
<!DOCTYPE html>
<!--create by ydj on 2018-08-12-->
<html>
<head>
<meta charset="UTF-8">
<title>拖动的水平条</title>
<style>
*{
margin: 0;
padding: 0;
}
.scroll{
width: 400px;
height: 8px;
background-color: #ccc;
margin: 100px;
position: relative;
}
.bar{
width: 10px;
height: 22px;
background-color: #369;
position: absolute;
top: -7px;
left: 0;
cursor: pointer;
}
.mask{
width: 0;
height: 100%;
background-color: #336699;
/*position: absolute;
top: 0;
left: 0;*/
}
</style>
</head>
<body>
<div class="scroll" id="scrollBar">
<div class="bar"></div>
<div class="mask"></div>
</div>
<div class="demo" id="demo"></div>
</body>
</html>
<script>
// 获取元素
var scrollBar = document.getElementById("scrollBar");
var bar = scrollBar.children[0];
var mask = scrollBar.children[1];
var demo = document.getElementById("demo");
// 拖动原理
bar.onmousedown = function(event){
var event = event || window.event;
var leftVal = event.clientX - this.offsetLeft;
// 拖动放到down的里面
var that = this;
document.onmousemove = function(event){
var event = event || window.event;
that.style.left = event.clientX - leftVal + "px";
// 限制条件
var val = parseInt(that.style.left);
if(val < 0){
that.style.left = 0;
}else if(val > 390){
that.style.left = "390px";
}
// 移动的距离为遮罩的宽度
mask.style.width = that.style.left;
// 显示百分比
demo.innerHTML = "移动了:"+ parseInt(parseInt(that.style.left) / 390 * 100) + "%";
// 清除拖动 --- 防止鼠标已经弹起时还在拖动
window.getSelection ? window.getSelection().removeAllRanges():document.selection.empty();
}
// 鼠标抬起停止拖动
document.onmouseup = function(){
document.onmousemove = null;
}
}
</script>摘自文章：js实现拖动的水平条_敲出真谛的博客-CSDN博客_js 拖动条
二、第二种
和我这篇文章相类似，不过这个有所限制，在上下拖动中，上面的内容不能做到完全覆盖
可以参考我的这篇文章：已解决上面问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>resize</title>
<style>
*,
*:before,
*:after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
align-items: stretch;
width: 100vw;
height: 100vh;
overflow: hidden;
}
header,
footer {
flex: none;
width: 100%;
height: 60px;
background: lightgrey;
}
footer {
position: relative;
background: lightblue;
}
.main {
flex: auto;
display: flex;
align-items: stretch;
}
.sidebar {
flex: none;
width: 200px;
background: lightgoldenrodyellow;
}
.container {
position: relative;
flex: auto;
background: #e0bfc4;
}
.resize {
position: absolute;
z-index: 100;
touch-action: none;
}
.resize.horizontal {
top: 0;
bottom: 0;
left: 0;
width: 4px;
cursor: e-resize;
}
.resize.vertical {
left: 0;
right: 0;
top: 0;
height: 4px;
cursor: n-resize;
}
</style>
</head>
<body>
<header>头部</header>
<section class="main">
<acticle class="sidebar">侧边栏</acticle>
<acticle class="container">内容区域
<div class="resize horizontal" onmousedown="mousedown('horizontal')"></div>
</acticle>
</section>
<footer>底部
<div class="resize vertical" onmousedown="mousedown('vertical')"></div>
</footer>
</body>
<script>
function mousedown(flag) {
document.onmousemove = function () {
// console.log("flag",event,flag)
if (flag === "horizontal") {
if (event.x < 200 || event.x > 800) return
var sidebar = document.querySelector(".sidebar")
sidebar.style.width = event.x + "px"
} else if (flag === "vertical") {
if (event.y < 500 || event.y > 877) return
var foot = document.querySelector("footer")
var top = Number(foot.getBoundingClientRect().top)
var height = Number(foot.getBoundingClientRect().height)
foot.style.height = height + top - event.y + "px"
}
}
}
document.onmouseup = function () {
document.onmousemove = null
}
</script>
</html>摘自文章：index.html · wg18/resize_layout - Gitee.com
三、第三种
上面提到的我写的文章所引用的左右拖拽的方法的原文章
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
font: 14px/1.5 Arial;
color: #666;
}
#box {
position: relative;
width: 600px;
height: 400px;
border: 2px solid #000;
margin: 10px auto;
overflow: hidden;
display: flex;
}
#left {
height: 100%;
flex: 1;
overflow: hidden;
}
#right {
width: 300px;
overflow: hidden;
}
#line {
width: 8px;
background: lightblue;
cursor: col-resize;
}
#line a {
cursor: pointer;
text-align: center;
}
</style>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<script>
function $(id) {
return document.getElementById(id)
}
window.onload = function () {
var oBox = $("box"),
oLeft = $("left"),
oRight = $("right"),
oLine = $("line"),
oLine1 = $("line1");
var flag = true;
var wid = 0;
oLine.onmousedown = function (e) {
var disX = (e || event).clientX;
var owidth = oBox.clientWidth - oLine.offsetLeft;
document.onmousemove = function (e) {
var iT = owidth - ((e || event).clientX - disX);
var e = e || window.event;
var maxT = oBox.clientWidth - oLine.offsetWidth;
oLine.style.margin = 0;
iT < 30 && (iT = 30);
iT > maxT && (iT = maxT);
wid = iT;
oRight.style.width = iT + "px";
return false
};
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
oLine.releaseCapture && oLine.releaseCapture()
};
oLine.setCapture && oLine.setCapture();
return false
};
oLine1.onclick = function () {
if (flag) {
oRight.style.width = 30 + "px";
flag = false;
} else {
if (wid && wid > 30) {
oRight.style.width = wid + "px";
} else {
oRight.style.width = 300 + "px";
}
flag = true;
}
}
};
</script>
</head>
<body>
<div id="box">
<div id="left">
</div>
<div id="line">
<a id="line1">
<span><i class="fa fa-caret-right"></i></span>
</a>
</div>
<div id="right">
</div>
</div>
</body>
</html>四、第四种
前面提到的我的文章使用到的上下拖拽方法
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>仿Windows垂直调整</title>
<style type="text/css">
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>jQuery初学实例代码集</li>
<li>100多个ExtJS应用初学实例集</li>
<li>基于jQuery的省、市、县三级级联菜单</li>
<li>一个类似QQ网的JS相册展示特效</li>
<li>eWebEditor v4.60 最新通用精简版</li>
<li>FCKeditor 2.6.4.1 网页编辑器</li>
<li>jQuery平滑图片滚动</li>
<li>Xml+JS省市县三级联动菜单</li>
<li>jQuery 鼠标滑过链接文字弹出层提示的效果</li>
<li>JS可控制的图片左右滚动特效（走马灯） </li>
</ul>
</div>
<div id="bottom">
<ul>
<li>网页上部大Banner广告特效及图片横向滚动代码</li>
<li>FlexSlider网页广告、图片焦点图切换插件</li>
<li>兼容IE，火狐的JavaScript图片切换</li>
<li>jQuery仿ios无线局域网WIFI提示效果（折叠面板）</li>
<li>TopUp js图片展示及弹出层特效代码</li>
<li>jQuery仿Apple苹果手机放大镜阅读效果</li>
<li>Colortip 文字title多样式提示插件</li>
<li>网页换肤，Ajax网页风格切换代码集</li>
<li>超强大、漂亮的蓝色网页弹出层效果</li>
<li>jQuery 图像预览功能的代码实现 </li>
</ul>
</div>
<div id="line"></div>
</div>
</body>
</html>五、第五种
这个例子需要两个JS文件
jquery-ui.min.js -------- 去这里下载 ---------> jQuery UI
jquery-2.1.0.min.js ---- 随便什么版本
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/jquery-2.1.0.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script>
$(function () {
var inner;
var top, bottom;
$('.menubar').draggable({
axis: 'y',
containment: '.left',
start: function () {
inner = parseInt($('.container').height())
$('.menubar').css({ 'top': 'auto', 'bottom': 'opx' });
},
drag: function (e, ui) {
top = (ui.position.top / inner) * 100;
bottom = 100 - top;
$('.top').height(top + '%');
$('.bottom').height(bottom + '%');
//$('.middle').css('bottom',bottom+'%');
},
stop: function () {
$('.menubar').css({ 'top': 'auto', 'bottom': 'opx' });
}
});
$('.container').resizable({});
});
</script>
<style>
body,
div {
margin: 0;
padding: 0
}
.container {
margin: 0 auto;
width: 1000px;
position: absolute;
height: 510px;
background-color: #CCC;
top: 100px;
}
.left {
width: 700px;
height: 100%;
float: left;
background-color: #0CF;
overflow: hidden;
position: relative
}
.left .top {
height: 70%;
width: 100%;
border: 1px solid #F00;
overflow-x: hidden;
overflow-y: auto;
padding-bottom: 40px;
position: relative
}
.left .content {
height: 100%
}
.left .menubar {
height: 40px;
position: absolute;
background-color: #0F9;
bottom: 0;
width: 100%
}
.left .bottom {
height: 30%;
width: 100%;
border: 1px solid #00F;
overflow-x: hidden;
overflow-y: auto;
}
.right {
width: 280px;
float: left;
height: 100%;
border: 1px solid #009
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<div class="top">
<div class="content">内容</div>
<div class="menubar">工具条，可拖动</div>
</div>
<div class="bottom">内容输入</div>
</div>
<div class="right">右侧</div>
</div>
</body>
</html>六、第六种
这个例子中的正方形四条边都可以进行拖拽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js实现拖拽和拉伸</title>
<style>
#test{
position:absolute;
left:0;
top:210PX;
width:400px;
height:400px;
border:1px solid #adadad;
}
.test{
position:absolute;
top:0px;
width:200px;
height:200px;
border:1px solid #adadad;
}
.A{
left: 0px;
}
.B{
left: 210px;
}
.C{
left: 420px;
}
</style>
</head>
<body>
<div id="test"></div>
<div class="test A"></div>
<div class="test B"></div>
<div class="test C"></div>
<script>
let arr = document.getElementsByClassName('test');
for(var i = 0; i < arr.length; i++) {
let test = arr[i]
test.addEventListener('mousedown', e => {
var mouseDownX = e.clientX; // x轴坐标
var mouseDownY = e.clientY; // y轴坐标
var clickBoxLeft = test.offsetLeft; // 该元素离left的距离
var clickBoxTop = test.offsetTop; // 该元素离top的距离
var clickBoxWeight = test.offsetWidth; // 该元素的width
var clickBoxHeight = test.offsetHeight; // 该元素的height
var direction = 0;
if(mouseDownX < clickBoxLeft + 30) {
direction = 'left';
} else if(mouseDownX > clickBoxLeft + clickBoxWeight - 30) {
direction = 'right';
}
if(mouseDownY < clickBoxTop + 30) {
direction = 'top';
} else if(direction < clickBoxTop + clickBoxHeight - 30) {
direction = 'bottom';
}
if((clickBoxLeft + clickBoxWeight - 30) < mouseDownX && mouseDownX < (clickBoxLeft + clickBoxWeight) && (clickBoxTop + clickBoxHeight - 30) < mouseDownY && mouseDownY < (clickBoxTop + clickBoxHeight)) {
direction = 'rightBottomCorner';
} else if((clickBoxLeft + 30) < mouseDownX && mouseDownX < (clickBoxLeft + clickBoxWeight - 30) && (clickBoxTop + 30) < mouseDownY && mouseDownY < (clickBoxTop + clickBoxHeight - 30)) {
//如果是在中间位置，则实现拖动功能
direction = "drag";
}
document.onmousemove = function(e) {
var xx = e.clientX;
var yy = e.clientY;
if(direction === 'left') {
test.style.width = clickBoxWeight + mouseDownX - xx + 'px'
test.style.left = xx + 'px';
} else if(direction === 'right') {
test.style.width = clickBoxWeight + xx - mouseDownX + 'px'
}
if(direction === 'top') {
test.style.height = clickBoxHeight + mouseDownY - yy + 'px';
test.style.top = yy + 'px';
} else if(direction === 'bottom') {
test.style.height = clickBoxHeight + yy - mouseDownY + 'px';
}
if(direction === 'rightBottomCorner') {
test.style.width = clickBoxWeight + xx - mouseDownX + 'px'
test.style.left = clickBoxLeft + 'px';
test.style.height = clickBoxHeight + yy - mouseDownY + 'px';
test.style.top = clickBoxTop + 'px';
} else if(direction === "drag") {
test.style.left = xx - mouseDownX + clickBoxLeft + 'px';
test.style.top = yy - mouseDownY + clickBoxTop + 'px';
}
//return false; //这里为了避免抖动
};
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
};
if(e.preventDefault) {
e.preventDefault();
}
})
}
var clickBox = document.getElementById('test');
/**
*desc:当在当前元素上按下鼠标时，就触发拖动和拉伸操作
*/
clickBox.onmousedown = (e) => {
var mouseDownX = e.clientX;
var mouseDownY = e.clientY;
var clickBoxLeft = clickBox.offsetLeft;
var clickBoxTop = clickBox.offsetTop;
var clickBoxWeight = clickBox.offsetWidth;
var clickBoxHeight = clickBox.offsetHeight;
var direction = 0;
if(mouseDownX < clickBoxLeft + 30) {
direction = 'left';
} else if(mouseDownX > clickBoxLeft + clickBoxWeight - 30) {
direction = 'right';
}
if(mouseDownY < clickBoxTop + 30) {
direction = 'top';
} else if(direction < clickBoxTop + clickBoxHeight - 30) {
direction = 'bottom';
}
if((clickBoxLeft + clickBoxWeight - 30) < mouseDownX && mouseDownX < (clickBoxLeft + clickBoxWeight) && (clickBoxTop + clickBoxHeight - 30) < mouseDownY && mouseDownY < (clickBoxTop + clickBoxHeight)) {
direction = 'rightBottomCorner';
} else if((clickBoxLeft + 30) < mouseDownX && mouseDownX < (clickBoxLeft + clickBoxWeight - 30) && (clickBoxTop + 30) < mouseDownY && mouseDownY < (clickBoxTop + clickBoxHeight - 30)) {
//如果是在中间位置，则实现拖动功能
direction = "drag";
}
/**
*desc:当鼠标开始华东的时候，根据鼠标的移动方向去调整他的X，Y坐标和长宽
*/
document.onmousemove = function(e) {
e = e || event; //是要是使用原生js给我们提供的e回调参数，这存储了很多有用的信息
var xx = e.clientX;
var yy = e.clientY;
if(direction === 'left') {
clickBox.style.width = clickBoxWeight + mouseDownX - xx + 'px'
clickBox.style.left = xx + 'px';
} else if(direction === 'right') {
clickBox.style.width = clickBoxWeight + xx - mouseDownX + 'px'
}
if(direction === 'top') {
clickBox.style.height = clickBoxHeight + mouseDownY - yy + 'px';
clickBox.style.top = yy + 'px';
} else if(direction === 'bottom') {
clickBox.style.height = clickBoxHeight + yy - mouseDownY + 'px';
}
if(direction === 'rightBottomCorner') {
clickBox.style.width = clickBoxWeight + xx - mouseDownX + 'px'
clickBox.style.left = clickBoxLeft + 'px';
clickBox.style.height = clickBoxHeight + yy - mouseDownY + 'px';
clickBox.style.top = clickBoxTop + 'px';
} else if(direction === "drag") {
clickBox.style.left = xx - mouseDownX + clickBoxLeft + 'px';
clickBox.style.top = yy - mouseDownY + clickBoxTop + 'px';
}
//return false; //这里为了避免抖动
};
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
};
if(e.preventDefault) {
e.preventDefault();
}
};
// /**
// *desc:在拉伸的过程中，实现居中状态长存,有时间将其做成一个插件公布出来，供大家使用
// */
</script>
</body>
</html>七、第七种
摘自文章：不好意思，我之前忘记存地址了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS拖拽和拉伸</title>
<style>
.popup {
z-index: 9;
background-color: #f1f1f1;
border: 1px solid #d3d3d3;
text-align: center;
min-height: 150px;
min-width: 300px;
max-height: 300px;
max-width: 600px;
}
/*Drgable */
.popup {
position: absolute;
/*resize: both; !*enable this to css resize*! */
overflow: auto;
}
.popup-header {
padding: 10px;
cursor: move;
z-index: 10;
background-color: #2196f3;
color: #fff;
}
/*Resizeable*/
.popup .resizer-right {
width: 5px;
height: 100%;
background: transparent;
position: absolute;
right: 0;
bottom: 0;
cursor: e-resize;
}
.popup .resizer-bottom {
width: 100%;
height: 5px;
background: transparent;
position: absolute;
right: 0;
bottom: 0;
cursor: n-resize;
}
.popup .resizer-both {
width: 5px;
height: 5px;
background: transparent;
z-index: 10;
position: absolute;
right: 0;
bottom: 0;
cursor: nw-resize;
}
/*NOSELECT*/
.popup * {
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Safari */
-khtml-user-select: none;
/* Konqueror HTML */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently
supported by Chrome and Opera */
}
</style>
</head>
<body>
<div class="popup">
<div class="popup-header">Click here to move</div>
<p>Move</p>
<p>this</p>
<p>DIV</p>
</div>
<div class="popup">
<div class="popup-header noselect">Click here to move</div>
<p>嫦娥</p>
<p>夸父</p>
<p>王母</p>
</div>
</body>
<script>
window.onload = function() {
initDragElement();
initResizeElement();
};
function initDragElement() {
var pos1 = 0,
pos2 = 0,
pos3 = 0,
pos4 = 0;
var popups = document.getElementsByClassName("popup");
var elmnt = null;
var currentZIndex = 100; //TODO reset z index when a threshold is passed
for(var i = 0; i < popups.length; i++) {
var popup = popups[i];
var header = getHeader(popup);
popup.onmousedown = function() {
this.style.zIndex = "" + ++currentZIndex;
};
if(header) {
header.parentPopup = popup;
header.onmousedown = dragMouseDown;
}
}
function dragMouseDown(e) {
elmnt = this.parentPopup;
elmnt.style.zIndex = "" + ++currentZIndex;
e = e || window.event;
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
if(!elmnt) {
return;
}
e = e || window.event;
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = elmnt.offsetTop - pos2 + "px";
elmnt.style.left = elmnt.offsetLeft - pos1 + "px";
}
function closeDragElement() {
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
}
function getHeader(element) {
var headerItems = element.getElementsByClassName("popup-header");
if(headerItems.length === 1) {
return headerItems[0];
}
return null;
}
}
function initResizeElement() {
var popups = document.getElementsByClassName("popup");
var element = null;
var startX, startY, startWidth, startHeight;
for(var i = 0; i < popups.length; i++) {
var p = popups[i];
var right = document.createElement("div");
right.className = "resizer-right";
p.appendChild(right);
right.addEventListener("mousedown", initDrag, false);
right.parentPopup = p;
var bottom = document.createElement("div");
bottom.className = "resizer-bottom";
p.appendChild(bottom);
bottom.addEventListener("mousedown", initDrag, false);
bottom.parentPopup = p;
var both = document.createElement("div");
both.className = "resizer-both";
p.appendChild(both);
both.addEventListener("mousedown", initDrag, false);
both.parentPopup = p;
}
function initDrag(e) {
element = this.parentPopup;
startX = e.clientX;
startY = e.clientY;
startWidth = parseInt(
document.defaultView.getComputedStyle(element).width,
10
);
startHeight = parseInt(
document.defaultView.getComputedStyle(element).height,
10
);
document.documentElement.addEventListener("mousemove", doDrag, false);
document.documentElement.addEventListener("mouseup", stopDrag, false);
}
function doDrag(e) {
element.style.width = startWidth + e.clientX - startX + "px";
element.style.height = startHeight + e.clientY - startY + "px";
}
function stopDrag() {
document.documentElement.removeEventListener("mousemove", doDrag, false);
document.documentElement.removeEventListener("mouseup", stopDrag, false);
}
}
</script>
</html>八、第八种
摘自文章：不好意思，忘记存地址了
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS实现拖拽进度条显示相应的内容</title>
<style>
#parent {
width: 400px;
height: 20px;
background: #CCC;
position: relative;
margin: 20px auto;
}
#div1 {
width: 20px;
height: 20px;
background: red;
cursor: pointer;
position: absolute;
}
#div2 {
width: 200px;
height: 300px;
margin: 0 auto;
border: 1px solid black;
position: relative;
overflow: hidden;
}
#div3 {
position: absolute;
}
</style>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1');
var oParent = document.getElementById('parent');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
oDiv.onmousedown = function (ev) {
var oEvent = ev || event;
//计算鼠标相对滑块上的位置
var disX = oEvent.clientX - oDiv.offsetLeft;
document.onmousemove = function (ev) {
var oEvent = ev || event;
//计算滑块的动态left值
var l = oEvent.clientX - disX;
//限制拖拽范围
if (l < 0) {
l = 0;
} else if (l > oParent.offsetWidth - oDiv.offsetWidth) {
l = oParent.offsetWidth - oDiv.offsetWidth;
}
oDiv.style.left = l + 'px';
//计算拖拽移动距离与可拖动总范围的比例
var scale = l / (oParent.offsetWidth - oDiv.offsetWidth);
//让Div3跟随鼠标的滑动追逐渐滚动内容
oDiv3.style.top = -(oDiv3.offsetHeight - oDiv2.offsetHeight) * scale + 'px';
};
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
};
};
};
</script>
</head>
<body>
<div id="parent">
<div id="div1"></div>
</div>
<div id="div2">
<div id="div3">
关于我们
我们是一支独具特色的IT培训团队，反对传统IT教育枯燥
乏味的教学模式，提供一种全新的快乐学习方法！
目前主要针对的是javascript培训，同时还提供了css教程、javascript
视频、js特效等，最新推出了外地学员们喜欢的javascript网络课程服
务，同时还为处于javascript入门阶段的朋友录制了大量javascript视
频，其中涉及了大量javascript基础知识，希望我们推出的javascript
网络培训课程能带给大家更多惊喜。
关于讲师：
我们的讲师来自中国最具吸引力的IT企业，如淘宝、ShopEx等。
前端开发讲师：Leo WEB 前端开发工程师(5年)、CSS 精品课
程讲师(3年)，公司创始人；曾任北京科尔威视、ShopEx 北京营
销中心 ECMall 项目前端架构师；精通 XHTML+CSS 架构，深刻理解
W3C 标准，熟练掌握系统的浏览器兼容性解决方案，擅长大型网站前
端架构及调试各类页面错位等诸多兼容性问题的疑难杂症；专注于网站
用户体验性研究，并在视频、电子商城、教育平台、企业级应用站点拥
有数量庞大的案例和多年实战经验；
</div>
</div>
</body>
</html>九、第九种
摘自文章：不好意思，忘记存地址了
这是一个简单的拖拽方块的方法
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<style>
#div1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
<body>
<div id="div1"></div>
</body>
<script type="text/javascript">
window.onload = function () {
var oDiv = document.getElementById('div1');
disX = 0;
disY = 0;
oDiv.onmousedown = function (ev) {
var oEvent = ev || event;
disX = oEvent.clientX - oDiv.offsetLeft;
disY = oEvent.clientY - oDiv.offsetTop;
document.onmousemove = function (ev) {
var oEvent = ev || event;
var l = oEvent.clientX - disX;
var t = oEvent.clientY - disY;
if (l < 0) {
l = 0;
} else if (l > document.documentElement.clientWidth - oDiv.offsetWidth) {
l = document.documentElement.clientWidth - oDiv.offsetWidth;
} if (t < 0) {
t = 0;
} else if (t > document.documentElement.clientHeight - oDiv.offsetHeight) {
t = document.documentElement.clientHeight - oDiv.offsetHeight;
}
oDiv.style.left = l + 'px';
oDiv.style.top = t + 'px';
}
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
}
return false;//阻止默认事件 屏蔽火狐的bug
}
}
</script>
</html>十、第十种
摘自文章：不好意思，没保存地址
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
*{
padding:0;
margin:0;
}
html, body{
width:100%;
height:100%;
}
.wrap{
position: relative;
width: 600px;
height: 600px;
margin: 100px auto;
border: solid 1px red;
}
.wrap div{
position:absolute;
z-index: 1;
width:100px;
height:100px;
background: red;
transition: all .5s;
}
</style>
</head>
<body>
<div class="wrap" id="elWrap">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
<script>
let index = 0;
let elArr = document.getElementById('elWrap').children;
let elList =[];
//构造一个数组
for(let i = 0;i < elArr.length;i++){
elList.push({el: elArr[i], sort: i, index: i});
elList[i].onclick = addEvent(elList[i]);
}
moveItem(elList);
function addEvent(item) {
item.el.addEventListener('mousedown',(e) => {
item.el.style.zIndex = 2;
item.el.style.transition = 'all 0s';
let startX = e.pageX,
startY = e.pageY,
left = item.el.offsetLeft,
top = item.el.offsetTop;
let moveFun = (e) => {
let X = e.pageX - startX + left;
let Y = e.pageY - startY + top;
item.el.style.left = `${X}px`;
item.el.style.top = `${Y}px`;
reRange(item, X, Y);
};
document.addEventListener('mousemove',moveFun);
item.el.addEventListener('mouseup',() => {
document.removeEventListener('mousemove',moveFun);
item.el.style.zIndex = 1;
item.el.style.transition = 'all .5s';
moveItem(elList);
});
});
}
function reRange(item, x, y) {
let moveIndex = Math.round(x / 125) + Math.round(y / 125) * 5;
moveIndex = moveIndex < 0 ? 0 : moveIndex;
moveIndex = moveIndex > elList.length - 1 ? elList.length - 1 : moveIndex;
if(moveIndex != index) {
index = moveIndex;
let currentSort = item.sort;
for(let i = 0; i < elList.length; i++) {
if(currentSort < moveIndex) {
if(elList[i].sort > currentSort && elList[i].sort <= moveIndex) {
elList[i].sort -= 1;
};
} else if(currentSort > moveIndex) {
if(elList[i].sort < currentSort && elList[i].sort >= moveIndex) {
elList[i].sort += 1;
};
}
};
elList[item.index].sort = moveIndex;
moveItem(elList);
}
}//排列
function moveItem(elList) {
for(let i = 0;i < elList.length;i++){
elList[i].el.style.left = elList[i].sort % 5 * 125 + 'px';
elList[i].el.style.top = parseInt(elList[i].sort / 5) * 125 + 'px';
}
}
</script>
</body>
</html>十一、第十一种
摘自文章：不好意思，没保存地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>原生JS实现拖动拉开序幕特效</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #151515;
}
div {
position: relative;
}
#rangeValue {
position: relative;
display: block;
font-size: 6em;
color: rgba(0, 0, 0, 0.8);
z-index: 2;
text-align: center;
}
#rangeValue::after {
content: '%';
}
#fillRangeValue {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 0;
background: #00adff;
z-index: 1;
}
.range {
position: relative;
width: 400px;
height: 15px;
-webkit-appearance: none;
background: rgba(0, 0, 0, 0.8);
outline: none;
border-radius: 15px;
box-shadow: 0 0 0 2px #151515, inset 0 0 5px #000;
z-index: 2;
overflow: hidden;
}
.range::-webkit-slider-thumb {
-webkit-appearance: none;
width: 15px;
height: 15px;
border-radius: 50%;
background: #00adff;
border: 4px solid #222;
z-index: 2;
box-shadow: -407px 0 0 400px #00adff;
}
</style>
</head>
<body>
<div>
<h2 id="rangeValue"></h2>
<div id="fillRangeValue"></div>
<input type="range" class="range" value="0" min="0" max="100" onmousemove="rangeSlider(this.value)" onchange="rangeSlider(this.value)">
</div>
<script>
function rangeSlider(value) {
document.getElementById('rangeValue').innerHTML = value
document.getElementById('fillRangeValue').style.width = `${value}%`
}
</script>
</body>
</html>
151
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
