一、客戶區大小ClientWidth和ClientHeight
<style> #box { width: 200px; height: 200px; background-color: aquamarine; margin: 20px; border: 20px solid red; padding:20px; } </style> </head> <body> <div id="box"> </div> <script> var box = document.getElementById("box"); //容器的大小： width + padding; console.log(box.clientWidth); console.log(box.clientHeight); </script>
二、ScrollWidth/scrollHeight scrollTop/scrollLeft(這兩個是相對於定位了的父盒子而言的)
三、拖拽盒子分析：
思路分析：准備工作：先獲得大盒子的(上圖黑色邊框內)====id(box)
再獲得注冊信息頭部（上圖紅色邊框內）====id(drop)
//step:1鼠標按下這個注冊信息頭部（drop）后同時需要移動盒子
drop.onmousedown=function(e){ //e為系統自帶的屬性
e=e||window.event; //e的兼容性（短路運算）
鼠標與盒子之間的距離（a）=鼠標在頁面之中的位置(b)-盒子距離頁面邊界的距離(c)
var offsetX=e.pageX-box.offsetLeft;
var offsetY= e.pageY-box.offsetTop;
//同時移動
document.onmousemove=function(e){
//盒子在移動后的位置(e)=移動后的鼠標在頁面之中的位置(d)-鼠標與盒子之間的距離(a)
var x= e.pageX-offsetX;
var y= e.pageY-offsetY;
//接下來我們要判斷盒子的位置不能夠超出整個頁面
If(x<0){ //判斷上邊緣與左邊緣
x=0;
}
If(y<0){
y=0;}
}
if(y>window.innerHeight-box.offsetHeight){ //判斷下邊緣與右邊緣
//innerHeight是頁面可視區域的高度，window.innerHeight-box.offsetHeight得到的是盒子在頁面之中可以移動的最大高度
y=window.innerHeight-box.offsetHeight;
}
if(x>window.innerWidth-box.offsetWidth){
x=window.innerWidth-box.offsetWidth;
}
box.style.left=x+”px”;
box.style.top=y+”px”;
}
//鼠標抬起時盒子不再改變位置
drop.onmouse=function(){
document.onmousemove=null;
}
詳見下面拖拽案例：
<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: 40%;
left: 40%;
background-color: white;
/* 不讓文字被選中 */
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
.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>
<script src="common.js"></script>
<script>
var box = document.getElementById("d_box");
var drop = document.getElementById("drop");
//鼠標再按下之后，同時移動
drop.onmousedown=function(e){
//e的兼容性（短路運算）
e=e||window.event;
//鼠標在盒子之中的距離=鼠標在頁面之中的位置-盒子距離頁面邊界的距離
var offsetX=e.pageX-box.offsetLeft;
var offsetY= e.pageY-box.offsetTop;
document.onmousemove=function(e){
//盒子在移動后的位置=移動后的鼠標的在頁面中的位置-鼠標在盒子之中的距離
var x= e.pageX-offsetX;
var y= e.pageY-offsetY;
if(x<0){
x=0;
}
if(y<0){
y=0;
}
// window.innerHeight瀏覽器可是區域的高度
if(y>window.innerHeight-box.offsetHeight){
y=window.innerHeight-box.offsetHeight;
}
if(x>window.innerWidth-box.offsetWidth){
x=window.innerWidth-box.offsetWidth;
}
box.style.left=x+"px";
box.style.top=y+"px";
}
}
//當鼠標抬起的時候，盒子不再改變位置
drop.onmouseup=function(){
document.onmousemove=null;
}
</script>
四、淘寶放大鏡案例：
思路分析：
<div class="box" id="box"> <div class="small"> <img src="images/small.webp" width="350" alt=""/> <div class="mask"></div> </div> <div class="big"> <img src="images/big.jpg" width="800" alt=""/> </div> </div>
//准備工作：
根據需要獲得所有需要的元素標簽：
var box=document.getElementById("box");
var small=box.children[0];
var smallImg=small.children[0];
var mask=small.children[1];
var big=box.children[1];
var bigImg=big.children[0];
//step1:鼠標移動到小盒子之中時，顯示小盒子中的蒙板，同時顯示大圖片
//移出小盒子時，蒙板隱藏，大圖片隱藏
Small.onmouseover=function(){
Mask.style.display=”block”;
Big.style.display=”block”;
}
Small.onmouseout=function(){
Mask.style.display=”none”;
Big.style.display=”none”;
}
//step:鼠標放入盒子之中是讓mask蒙板跟着移動
Small.onmousemove=function(e){
//var x=e.pageX-box.offsetLeft;
//var y=e.pageX-box.offsetTop;
//發現鼠標與mask的左上角位置保持一致
//所以我們需要再減去蒙板寬高的一半,這樣鼠標就能在蒙板的中間位置顯示
var x=e.pageX-box.offsetLeft-mask.offsetWidth/2;
var y=e.pageX-box.offsetTop-mask.offsetHeight/2;
if(x<=0){
x=0;
}
if(y<=0){
y=0;
}
//box設置了相對定位，所以是相對於box的寬度和高度而言的
if(x>box.offsetWidth-mask.offsetWidth){
x=box.offsetWidth-mask.offsetWidth;
}
if(y>box.offsetHeight-mask.offsetHeight)
{
y=box.offsetHeight-mask.offsetHeight;
}
mask.style.left=x+"px";
mask.style.top=y+"px";
step3:蒙板移動右邊的大圖片也跟着移動
這里需要用到一個等式（原理是等比例移動）因為左右兩個圖片的大小是不一樣的
MaskX(蒙板左側距小圖片左側的距離)/maxMaskImg（蒙板在小圖片之中左右移動的最大距離）
=bigImgX(大圖片的左側相對於它所在的盒子左側移動的距離)（未知數）/maxBigImgX(大圖片在它所在的盒子之中所能移動的最大寬度)
var bigImgX=x*(bigImg.offsetWidth-big.offsetWidth)/(box.offsetWidth-mask.offsetWidth);
var bigImgY=y*(bigImg.offsetHeight-big.offsetHeight)/(box.offsetHeight-mask.offsetHeight);
bigImg.style.marginLeft=-bigImgX+"px";
bigImg.style.marginTop=-bigImgY+"px";
}
五、滾動條案例分析：
//准備工作：
先獲得所有需要的元素標簽
var box=document.getElementById("box");
var content=document.getElementById("content");
var scroll=document.getElementById("scroll");
var bar=document.getElementById("bar");
//1.計算滾動條的大小
// boxH/contentH=barH/scrollH
var barH=box.offsetHeight*scroll.offsetHeight/content.offsetHeight;
bar.style.height=barH+"px";
//判斷如果盒子的高度超過盒子之中文字的高度，則滾動條的高度為0px
if(box.offsetHeight>content.offsetHeight){
bar.style.height="0px";
}
//2.拖拽滾動
scroll.onmousedown=function(e){
var offsetY= e.pageY-box.offsetTop-bar.offsetTop;
document.onmousemove=function(e){
var y= e.pageY-offsetY-box.offsetTop;
if(y<0){
y=0
}
if(y>scroll.offsetHeight-bar.offsetHeight){
y=scroll.offsetHeight-bar.offsetHeight;
}
bar.style.top=y+"px";
//3.文字跟隨滾動
// barY/maxBarY=contentY/maxContent（等比例計算）
//barY（滾動條距離外面定位了的父盒子box的距離）
//maxContent (文字可移動的最大距離)=contentH（文字內容的高度）-boxH（盒子的高度）
//maxBarY（滾動條可移動的最大距離）=scrollH（滾動欄軌道的高度）-barH（滾動條的高度）
//contentY(文字距離外面定位了的父盒子box的距離)（未知數）
var contentY=y*(content.offsetHeight-box.offsetHeight)/(scroll.offsetHeight-bar.offsetHeight);
content.style.top=-contentY+"px"; //取反滾動條向下拖動，內容是向上移動的
}
}
document.onmouseup=function(){
document.onmousemove=null;
}
