Offset ‘自己的’的意思
1、offsetWidth 自己的寬度 offsetHeight 自己的高度三热；
width+padding+border;
div width=200px;border=3px;padding-right=15px;
div offsetWidth=200+6+15=221;
offsetWidth和div.style.width的區(qū)別
div.style.width獲取到的是字符串鼓择，并且可以進(jìn)行修改
2、offsetWidth獲取到的是數(shù)值類型就漾，只能獲取呐能，不能修改；
offsetLeft 獲取div距離最近的帶有定位的父級(jí)，相當(dāng)于是左邊距摆出；
3朗徊、offsetParent 返回自己的父親元素（帶有定位的）；
如果所有父級(jí)都沒(méi)有定位偎漫，則返回body
和parentnNode區(qū)別爷恳，parentNode返回父親，不管是否帶有定位象踊；
4温亲、event事件
div.onclick=function(event){},這個(gè)envent就是它點(diǎn)擊的時(shí)候，瀏覽器所執(zhí)行的所有事件杯矩；
pageX栈虚、pageY 距離文檔的X軸距離
clientXc、clientY 距離瀏覽器可見(jiàn)區(qū)域的X軸距離史隆；
screenX节芥、screenY 距離屏幕。超出了瀏覽器逆害；
Scroll 家族
Offset家族 自己的
Scroll 滾動(dòng)家族
scrollTop 被卷去的頭部
它就是當(dāng)你滑輪滾動(dòng)瀏覽網(wǎng)頁(yè)隱藏在屏幕上方的距離
頁(yè)面滾動(dòng)事件：
Window.onscroll=function（）{執(zhí)行語(yǔ)句}；
谷歌瀏覽器蚣驼，以及：沒(méi)有聲明DTD（<!DOCTYPE html>）的瀏覽器（怪異模式）：
document.body.scrollTop;//僅限谷歌以及怪異模式瀏覽器魄幕、
火狐以及其他瀏覽器:
document.documentElement.scrollTop;
iE9以上++++++++++++++++++:
var scrollTop=document.body.scrollTop ||
document.documentElement.scrollTop ||
window.pageYOffset; //兼容性寫法
JSON ***********************************************
JSON（JavaScript Object Notation）是一種輕量級(jí)的數(shù)據(jù)交換格式，我們稱之為javascript對(duì)象表示法颖杏，使用json進(jìn)行傳輸數(shù)據(jù)是很常用的
Json就是javascript
Json其實(shí)很像我們學(xué)過(guò)的CSS條
var myjson={k:v,k:v,k:v…..} json用鍵值對(duì)的方法表示 key:value
封裝自己的scroll纯陨；
scrollTo(x,y)
使當(dāng)前頁(yè)面跳轉(zhuǎn)到（x,y）這個(gè)坐標(biāo)
window.scrollTo(0,500);
格式：window.scroll(Xpos,Ypos);
兩個(gè)值一個(gè)都不能省略，不想跳給個(gè)0都行留储，就是不能少
Xpos 必須翼抠，想要跳轉(zhuǎn)的X軸的位置
Ypos 必須，想要跳轉(zhuǎn)的Y軸的位置
Xpos一般用不上获讳，給個(gè)0就行阴颖，因?yàn)橐话愦蟛糠志W(wǎng)頁(yè)水平滾動(dòng)條是不讓出現(xiàn)的
demo 固定緩動(dòng)菜單欄
<style>
*{
margin: 0;
padding: 0;
}
img{
position: absolute;
left: 0;
top: 100px;
}
.cur{
height: 3000px;
}
</style>
<div class="cur"></div>
<script src="JavaScript/base.js"></script>
<script>
var img = document.getElementById("img");
var timer = null;
var leader = 0, target = 0;
window.onscroll = function(){
clearInterval(timer);
target = scroll().top + 100;
timer = setInterval(function(){
leader = leader + (target - leader) /10;
img.style.top = leader + "px";
},50)
}
</script>
demo 點(diǎn)擊緩動(dòng)規(guī)定位置
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
.box{
position: fixed;
top: 0;
left: 100px;
}
.box div{
width: 50px;
height: 50px;
border: 1px solid yellow;
cursor: pointer;
}
.box .tp{
border-top: none;
}
.one,.b1{
background: pink;
}
.two,.b2{
background: cornflowerblue;
}
.three,.b3{
background: cyan;
}
.four,.b4{
background: cornsilk;
}
.five,.b5{
background: orchid;
}
.cur{
width: 100%;
height: 100%;
}
.cur div{
font-size: 30px;
width: 100%;
height: 100%;
}
</style>
<div class="box" id="box">
<div class="one" >首頁(yè)</div>
<div class="two tp" >商城</div>
<div class="three tp" >關(guān)于</div>
<div class="four tp" >我的</div>
<div class="five tp">收藏</div>
</div>
<div class="cur" id="cur">
<div class="a b1">首頁(yè)</div>
<div class="a b2">商城</div>
<div class="a b3">關(guān)于</div>
<div class="a b4">我的</div>
<div class="a b5">收藏</div>
</div>
<script>
function $(id){ // 獲取 id
return document.getElementById(id);
}
var box = document.getElementById("box");
var cur = document.getElementById("cur");
var divs = box.getElementsByTagName("div");
var divs2 = cur.getElementsByTagName("div");
var timer = null;
var leader = 0,target = 0;
for(var i = 0;i<divs.length;i++){
divs[i].index = i; //通過(guò)創(chuàng)建index屬性，賦予每一個(gè) divs 一個(gè)索引號(hào)
divs[i].onclick = function(){
clearInterval(timer);
target = divs2[this.index].offsetTop; //通過(guò)索引值丐膝，獲取 divs2 的offsetTop
timer=setInterval(function(){
leader=leader+(target-leader)/10;
window.scrollTo(0,leader);//屏幕滑動(dòng)
if(Math.round(leader)==target){//當(dāng)啟始值等于目標(biāo)值量愧，就表示到達(dá)目的了，就清除計(jì)時(shí)器
clearInterval(timer);
}
},30);
}
}
</script>
