彈窗拖拽
拖拽樣式.gif
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
.nav{
height:30px;
background: #036663;
border-bottom:1px solid #369;
line-height: 30px;
padding-left:30px;
}
.nav a {
color:#fff;
text-align: center;
font-size:14px;
text-decoration: none;
}
.d-box{
width:400px;
height:300px;
border:5px solid #eee;
box-shadow:2px 2px 2px 2px #666;
position: absolute;
top:50%;
left:50%;
margin-top: -155px;
margin-left:-205px;
}
.hd{
width:100%;
height:25px;
background-color: #7c9299;
border-bottom:1px solid #369;
line-height: 25px;
color:white;
cursor: move;
}
#box_close{
float: right;
cursor: pointer;
}
</style>
</head>
<body>
<div class="nav">
<a href="javascript:;" id="register">注冊(cè)信息</a>
</div>
<div class="d-box" id="d_box">
<div class="hd" id="drop">注冊(cè)信息 (可以拖拽)
<span id="box_close">【關(guān)閉】</span>
</div>
<div class="bd"></div>
</div>
</body>
</html>
<script>
var box = document.getElementById("d_box");
var drop = document.getElementById("drop");
startDrop(drop,box); // 鼠標(biāo)放到 drop 但是移動(dòng) 是 box
function startDrop(current,move) {
current.onmousedown = function(event) {
var event = event || window.event;
var x = event.clientX - move.offsetLeft - 205; // 記錄當(dāng)前盒子的x 位置
var y = event.clientY - move.offsetTop - 155; // // 記錄當(dāng)前盒子的y位置
document.onmousemove = function(event) {
var event = event || window.event;
move.style.left = event.clientX - x + "px";
move.style.top = event.clientY - y + "px";
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
}
document.onmouseup = function() { // 鼠標(biāo)彈起之后枯跑， 鼠標(biāo)繼續(xù)移動(dòng)不應(yīng)該操作
document.onmousemove = null;
}
}
</script>
模擬垂直滾動(dòng)條
紅色盒子高度計(jì)算公式： 容器的高度 / 內(nèi)容的高度 * 容器的高度
紅色方塊移動(dòng)一像素 愧哟，我們的內(nèi)容盒子移動(dòng)多少呢须床？
（內(nèi)容盒子高度 - 大盒子高度） / (大盒子高度 - 紅色盒子的高度) 計(jì)算倍數(shù)
（內(nèi)容盒子高度 - 大盒子高度） / (大盒子高度 - 紅色盒子的高度) * 紅色盒子移動(dòng)的數(shù)值
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 300px;
height: 500px;
border: 1px solid red;
margin:100px;
position: relative;
}
.content {
height: auto;
padding: 5px 18px 5px 5px;
position: absolute;
top: 0;
left: 0;
}
.scroll {
width: 18px;
height: 100%;
position: absolute;
top: 0;
right: 0;
background-color: #eee;
}
.bar {
width: 100%;
height: 100px;
background-color: red;
cursor: pointer;
border-radius: 10px;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="content">
文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分
文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分
文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分
文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分
文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分
文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi) 文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分
文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分
文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分文字內(nèi)容部分
</div>
<div class="scroll">
<div class="bar"></div>
</div>
</div>
</body>
</html>
<script>
var box = document.getElementById("box"); // 最大的盒子
var content = box.children[0]; // 內(nèi)容盒子
var scroll = box.children[1]; // 右邊盒子
var bar = scroll.children[0];
// 1. 首先先要計(jì)算紅色滾動(dòng)條的高度 內(nèi)容越多翘单，滾動(dòng)條越短 反之 反之
// 滾動(dòng)條的長(zhǎng)度計(jì)算公式: 容器的高度 / 內(nèi)容的高度 * 容器的高度
// box 是 內(nèi)容盒子一半 那么紅色盒子也要是box盒子的一半
var barHeight = box.offsetHeight / content.offsetHeight * box.offsetHeight;
bar.style.height = barHeight + "px";
// 下面開(kāi)始 拖動(dòng) 紅色盒子
startScroll(bar,content); // 第一次參數(shù) 拖動(dòng)的 第二個(gè)參數(shù) 內(nèi)容的盒子
function startScroll(obj,target) {
obj.onmousedown = function(event) {
// alert(11);
var event = event || window.event;
var t = event.clientY - this.offsetTop ; // 紅色盒子距離 父親 盒子頂部距離
var that = this; // 把 bar 對(duì)象給 that 對(duì)象
document.onmousemove = function(event) {
var event = event || window.event;
var barTop = event.clientY - t ; // 紅色移動(dòng)的距離
//內(nèi)容盒子要移動(dòng)距離
// （內(nèi)容盒子高度 - 大盒子高度） / (大盒子高度 - 紅色盒子的高度) * 紅色盒子移動(dòng)的數(shù)值
var contentTop = (target.offsetHeight - target.parentNode.offsetHeight) / (target.parentNode.offsetHeight - that.offsetHeight) * barTop;
// 內(nèi)容盒子移動(dòng)的距離
if(barTop < 0)
{
barTop = 0;
}
else if(barTop > target.parentNode.offsetHeight - that.offsetHeight)
// 大于 大盒子的高度 - 紅色盒子的高度
{
barTop = target.parentNode.offsetHeight - that.offsetHeight ;
}
else
{
target.style.top = -contentTop + "px"; // 往上走是負(fù)值
}
that.style.top = barTop + "px";
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); // 防止拖動(dòng)滑塊的時(shí)候场晶， 選中文字
}
}
document.onmouseup = function() {
document.onmousemove = null;
}
}
</script>
Html基本結(jié)構(gòu)訪問(wèn)方法
文檔是 document
html body head
document.head
document.body
document.title
沒(méi)有 document.html 取而代之的是 document.documentElement;
