彈窗拖拽
拖拽樣式.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">注冊信息</a>
</div>
<div class="d-box" id="d_box">
<div class="hd" id="drop">注冊信息 (可以拖拽)
<span id="box_close">【關閉】</span>
</div>
<div class="bd"></div>
</div>
</body>
</html>
<script>
var box = document.getElementById("d_box");
var drop = document.getElementById("drop");
startDrop(drop,box); // 鼠標放到 drop 但是移動 是 box
function startDrop(current,move) {
current.onmousedown = function(event) {
var event = event || window.event;
var x = event.clientX - move.offsetLeft - 205; // 記錄當前盒子的x 位置
var y = event.clientY - move.offsetTop - 155; // // 記錄當前盒子的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() { // 鼠標彈起之后， 鼠標繼續(xù)移動不應該操作
document.onmousemove = null;
}
}
</script>
模擬垂直滾動條
紅色盒子高度計算公式： 容器的高度 / 內容的高度 * 容器的高度
紅色方塊移動一像素 ，我們的內容盒子移動多少呢？
（內容盒子高度 - 大盒子高度） / (大盒子高度 - 紅色盒子的高度) 計算倍數
（內容盒子高度 - 大盒子高度） / (大盒子高度 - 紅色盒子的高度) * 紅色盒子移動的數值
<!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">
文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分
文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分
文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分
文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分
文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分
文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內 文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分
文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分
文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分文字內容部分
</div>
<div class="scroll">
<div class="bar"></div>
</div>
</div>
</body>
</html>
<script>
var box = document.getElementById("box"); // 最大的盒子
var content = box.children[0]; // 內容盒子
var scroll = box.children[1]; // 右邊盒子
var bar = scroll.children[0];
// 1. 首先先要計算紅色滾動條的高度 內容越多，滾動條越短 反之 反之
// 滾動條的長度計算公式: 容器的高度 / 內容的高度 * 容器的高度
// box 是 內容盒子一半 那么紅色盒子也要是box盒子的一半
var barHeight = box.offsetHeight / content.offsetHeight * box.offsetHeight;
bar.style.height = barHeight + "px";
// 下面開始 拖動 紅色盒子
startScroll(bar,content); // 第一次參數 拖動的 第二個參數 內容的盒子
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 對象給 that 對象
document.onmousemove = function(event) {
var event = event || window.event;
var barTop = event.clientY - t ; // 紅色移動的距離
//內容盒子要移動距離
// （內容盒子高度 - 大盒子高度） / (大盒子高度 - 紅色盒子的高度) * 紅色盒子移動的數值
var contentTop = (target.offsetHeight - target.parentNode.offsetHeight) / (target.parentNode.offsetHeight - that.offsetHeight) * barTop;
// 內容盒子移動的距離
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"; // 往上走是負值
}
that.style.top = barTop + "px";
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); // 防止拖動滑塊的時候， 選中文字
}
}
document.onmouseup = function() {
document.onmousemove = null;
}
}
</script>
Html基本結構訪問方法
文檔是 document
html body head
document.head
document.body
document.title
沒有 document.html 取而代之的是 document.documentElement;
