Day13(scroll 家族,JSON,demo固定菜單欄乾戏,點(diǎn)擊緩動(dòng))

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>

![](images/aside.jpg)
<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>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末帅矗,一起剝皮案震驚了整個(gè)濱河市偎肃,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌浑此,老刑警劉巖累颂,帶你破解...
    沈念sama閱讀 206,126評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異凛俱,居然都是意外死亡紊馏,警方通過(guò)查閱死者的電腦和手機(jī)料饥,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,254評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)瘦棋,“玉大人稀火,你說(shuō)我怎么就攤上這事《呐螅” “怎么了凰狞?”我有些...
    開(kāi)封第一講書(shū)人閱讀 152,445評(píng)論 0 341
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)沛慢。 經(jīng)常有香客問(wèn)我赡若,道長(zhǎng),這世上最難降的妖魔是什么团甲? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,185評(píng)論 1 278
  • 正文 為了忘掉前任逾冬,我火速辦了婚禮,結(jié)果婚禮上躺苦,老公的妹妹穿的比我還像新娘身腻。我一直安慰自己,他們只是感情好匹厘,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,178評(píng)論 5 371
  • 文/花漫 我一把揭開(kāi)白布嘀趟。 她就那樣靜靜地躺著,像睡著了一般愈诚。 火紅的嫁衣襯著肌膚如雪她按。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 48,970評(píng)論 1 284
  • 那天炕柔,我揣著相機(jī)與錄音酌泰,去河邊找鬼。 笑死匕累,一個(gè)胖子當(dāng)著我的面吹牛陵刹,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播欢嘿,決...
    沈念sama閱讀 38,276評(píng)論 3 399
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼授霸,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了际插?” 一聲冷哼從身側(cè)響起碘耳,我...
    開(kāi)封第一講書(shū)人閱讀 36,927評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎框弛,沒(méi)想到半個(gè)月后辛辨,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,400評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,883評(píng)論 2 323
  • 正文 我和宋清朗相戀三年斗搞,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了指攒。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 37,997評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡僻焚,死狀恐怖允悦,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情虑啤,我是刑警寧澤隙弛,帶...
    沈念sama閱讀 33,646評(píng)論 4 322
  • 正文 年R本政府宣布,位于F島的核電站狞山,受9級(jí)特大地震影響全闷,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜萍启,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,213評(píng)論 3 307
  • 文/蒙蒙 一总珠、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧勘纯,春花似錦局服、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,204評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至超埋,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間佳鳖,已是汗流浹背霍殴。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,423評(píng)論 1 260
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留系吩,地道東北人来庭。 一個(gè)月前我還...
    沈念sama閱讀 45,423評(píng)論 2 352
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像穿挨,于是被迫代替她去往敵國(guó)和親月弛。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,722評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容

  • Window和document對(duì)象的區(qū)別 window對(duì)象window對(duì)象表示瀏覽器中打開(kāi)的窗口window對(duì)象是...
    FConfidence閱讀 2,159評(píng)論 0 5
  • offset家族三大家族和一個(gè)事件對(duì)象三大家族(offset/scroll/client)事件對(duì)象/event ...
    Yuann閱讀 948評(píng)論 0 5
  • 本文是針對(duì)剛學(xué)編程的小白,都是一些基礎(chǔ)知識(shí),如果想了解更多深層一點(diǎn)的東西,歡迎移步本人博客!! 博客地址 點(diǎn)擊跳轉(zhuǎn)...
    西巴擼閱讀 557評(píng)論 0 2
  • 一科盛、自定義動(dòng)畫(huà) animation: flash 0.5s alternate infinite; @keyfra...
    一葉一生一葉知秋閱讀 323評(píng)論 0 0
  • 什么是同源策略 瀏覽器出于安全考慮帽衙,只允許與本域的接口交互訪問(wèn),不同源的客戶端腳本在沒(méi)有明確授權(quán)的情況下贞绵, 不能讀...
    怎么昵稱閱讀 256評(píng)論 0 0