-
href="javascript:;"作用是:阻止瀏覽器默認行為;;;若為空,默認調到頂部 margin-left:610px;計算中間到右邊的距離; #btn:hover{}鼠標移上去變化 -40px;因為定位在背景圖片的上半部,-40會移到此時背景圖片的下半部;+40會移動此時背景圖片的上方 [ 查看全文 ]查看全部
-
position:fixed固定位置查看全部
-
知識點查看全部
-
獲取滾動條滾動的高度(兼容性處理): var osTop = document.documentElement.scrollTop || document.body.scrollTop;查看全部
-
知識點查看全部
-
獲取滾動條滾動的高度(兼容性處理): var osTop = document.documentElement.scrollTop || document.body.scrollTop;查看全部
-
知識點查看全部
-
那個滾動條監視有bug查看全部
-
返回頂部效果查看全部
-
為什么改成負的就能滾到頭? 回答這個問題前,先來看下為什么不改成負數就不行呢? 注意這句:var ispeed = Math.floor(osTop / 6); 當上面osTop的值小于6這個除數時,ispeed的值始終等于0(向下取整了),所以問題來了,當ispeed的值不變時,osTop - ispeed 這個控制滾動條的值也就不變了,所以滾動條永遠到不了頂。 實際中,當osTop = 5 時,ispeed 為 0,下面兩句也始終為5: document.documentElement.scrollTop = osTop - ispeed; // 兼容IE document.body.scrollTop = osTop - ispeed; // 兼容FF、Chrome 所以滾動條一直停在距離頂部5px的地方。 OK,那為什么改成負數就行了呢?其實改負數的目的就是讓ispeed的值不為0. 實際中,當osTop = 5(或小于5時),Math.floor(osTop / 6) 的值為 -1,這樣就使得 osTop + ispeed 的值始終能減小下去,直至到0. 這種用負數的方法不好理解,我是采用Math.ceil()這個方法(向上取整)實現的,代碼如下: obtn.onclick = function(){ // 定時器開啟 timer = setInterval(function(){ // 獲取當前滾動條距離頂部距離 var osTop = document.documentElement.scrollTop || document.body.scrollTop; var ispeed = Math.ceil(osTop / 6); document.documentElement.scrollTop = osTop - ispeed; document.body.scrollTop = osTop - ispeed; if(osTop == 0){ clearInterval(timer); } },30); }查看全部
-
錨鏈接 優點: 簡單快速、沒有兼容性問題 缺點: 視覺上不夠直觀,用戶體驗不夠好 主要知識點 DOM操作 1.document.getElementById 根據ID獲取標簽元素 2.document.documentElement.scrollTop 滾動條的數值,可讀寫 事件運用: 1.window.onload 頁面加載完畢后觸發 2.onclick 點擊后觸發 3.window,onscroll 滾動條滾動時觸發 定時器(動態效果) 1.setInterval() 設置定時器,需傳兩個參數 2.clearInterval() 關閉定時器,需傳1個參數 拖動是分兩種事件 ,一種是自動的定時器執行的 , 還有一種是人鼠標執行的 ,定時器一直執行的是ostop為true ,所以不執行clearInterval動作 , 而人拖動, 也會觸發scroll事件 ,這時 ostop就為flase了 就執行clearInterval定時器 加負號是因為speed取整的時候 ,5/6=0.833333;取整為0 ; 也就是最后一次它是執行減去0的 . 而加個負號, 就是-0.833333取整 ,則是-1的 , 即最后一次至少是減去1的 .查看全部
-
使用JavaScript實現“按鈕”的顯示與隱藏 1、隱藏回到頂部按鈕 (1)在樣式表回到頂部按鈕設置成display:none; 2、獲取頁面可視區的高度 (1)創建變量,獲取頁面可視區的高度 var clientHeight=document.documentElement.clientHeight; (2)彈出頁面可視區高度 alert(clientHeight); (3)顯示回到頂部按鈕,把樣式表中的display先刪除 (4)刷新頁面獲取高度后隱藏 3、增加判斷,在滾動的時候 (1)獲取滾動條距離頂部的高度 var disTop = document.documentElement.scrollTop || document.body.scrollTop; (2)增加判斷,讓按鈕顯示出來 (在樣式表中可以改成display:block;就能顯示,但如何用js顯示) if(osTop>=clientHeight){ obtn.style.display='block';//把樣式表中的display改成block } (3)回到第一屏隱藏 else{ obtn.style.display='none'; }查看全部
-
href="javascript:;"作用是:阻止瀏覽器默認行為;;;若為空,默認調到頂部 no-repeat背景不平鋪 margin-left:610px;計算中間到右邊的距離; #btn:hover{}鼠標移上去變化 -40px;因為定位在背景圖片的上半部,-40會移到此時背景圖片的下半部;+40會移動此時背景圖片的上方查看全部
-
錨鏈接 優點: 簡單快速、沒有兼容性問題 缺點: 視覺上不夠直觀,用戶體驗不夠好 主要知識點 DOM操作 1.document.getElementById 根據ID獲取標簽元素 2.document.documentElement.scrollTop 滾動條的數值,可讀寫 事件運用: 1.window.onload 頁面加載完畢后觸發 2.onclick 點擊后觸發 3.window,onscroll 滾動條滾動時觸發 定時器 1.setInterval() 設置定時器,需傳兩個參數 2.clearInterval() 關閉定時器,需傳1個參數查看全部
-
正確代碼查看全部
舉報
0/150
提交
取消