欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

原生js實(shí)現(xiàn)淘寶首頁(yè)點(diǎn)擊按鈕緩慢回到頂部效果

 更新時(shí)間:2014年04月06日 17:28:15   作者:  
本例將實(shí)現(xiàn)這樣的一個(gè)效果:下拉到一定距離后按鈕才顯示出來(lái),鼠標(biāo)放到按鈕上時(shí),按鈕背景會(huì)變成灰色,并且圖標(biāo)變成了文字。點(diǎn)擊按鈕緩慢回到頂部
淘寶首頁(yè)的回到頂部按鈕是這樣的:下拉到一定距離后按鈕才顯示出來(lái),鼠標(biāo)放到按鈕上時(shí),按鈕背景會(huì)變成灰色,并且圖標(biāo)變成了文字。點(diǎn)擊按鈕緩慢回到頂部

我們先分析下實(shí)現(xiàn)這樣的效果需要添加哪些事件。鼠標(biāo)移進(jìn)移出按鈕,按鈕表現(xiàn)發(fā)生變化,所以需要給按鈕添加mouseover, mouseout事件。要偵聽(tīng)滾動(dòng)條的變化,所以需要給window添加scroll事件,點(diǎn)擊按鈕回到頂部,按鈕添加click事件。我們將事件處理程序封裝成三個(gè)函數(shù)moveIn, moveOut, goTop;

下面先給出html/css代碼
復(fù)制代碼 代碼如下:

<div class="container">
<div class="header">頭部</div>
<div class="content">主要內(nèi)容,高度是2000px</div>
<div class="footer>底部</div>
<div id="btn">返回頂部</div>
</div>

復(fù)制代碼 代碼如下:

.container { width: 980px; margin: 0 auto; height: auto; background: #aaa;}
.content { height: 2000px; border: 1px solid blue; }
#btn {
position:fixed;
bottom: 50px;
right: 0;
width: 54px;
height: 55px;
background: url(icons.png) no-repeat 0 -110px; } //背景圖可隨意找一張
font-size: 12px;
line-height: 55px;
text-align: center;
text-indent: -9999em;
cursor: pointer;
display: none;

下面是完整的js代碼
復(fù)制代碼 代碼如下:

window.addEventListener("load",function() {
var btn = document.getElementById("btn");
btn.addEventListener("mouseover",moveIn, false);
btn.addEventListener("mouseout", moveOut, false);

function moveIn() {
btn.style.color = "#ffffff"; //修改的是內(nèi)聯(lián)樣式,具有最高的優(yōu)先級(jí);
btn.style.textIndent = "0em";
btn.style.backgroundImage = "none";
btn.style.backgroundColor = "#FF4401";
}
function moveOut() {
btn.style.textIndent = "-9999em";
btn.style.backgroundImage = "url(icons.png)";
}

function goTop(acceleration, time) { //修改參數(shù)可調(diào)整返回頂部的速度
acceleration = acceleration || 0.1;
time = time || 10;
var speed = 1 + acceleration;
function getScrollTop() { //取得滾動(dòng)條的豎直距離
return document.documentElement.scrollTop || document.body.scrollTop;
}
function setScrollTop(value) { //設(shè)置滾動(dòng)條的豎直距離,實(shí)現(xiàn)效果的關(guān)鍵就是在很短的間隔時(shí)間內(nèi)不斷地修改滾動(dòng)條的豎直距離,以實(shí)現(xiàn)滾動(dòng)效果
document.documentElement.scrollTop = value;
document.body.scrollTop = value;
}
window.onscroll = function() {
var scrollTop = getScrollTop();
if (scrollTop > 100) { //判斷滾動(dòng)條距離窗口頂部多遠(yuǎn)時(shí)顯示出來(lái),這里是100px
btn.style.display = "block";
} else {
btn.style.display = "none";
}
};
btn.onclick = function () {
var timer = setInterval(function() {
setScrollTop(Math.floor(getScrollTop() / speed)); //這行代碼是關(guān)鍵,取得滾動(dòng)條豎直距離,除以speed后再給滾動(dòng)條設(shè)置豎直距離
if (getScrollTop() == 0)
clearInterval(timer);
}, time);
};
}
goTop(0.2, 8);
}, false);

當(dāng)然,還有其他的實(shí)現(xiàn)方法,下面給出其他方法的關(guān)鍵代碼
復(fù)制代碼 代碼如下:

btn.onclick = function() {
clearInterval(timer);
var timer = setInterval(function() {
var now = scrollTop; //滾動(dòng)條豎直距離
speed = (0 - now) / 10;
speed = Math.floor(speed);
if (now == 0);
clearInterval(timer);
document.documentElement.scrollTop = now + speed; //標(biāo)準(zhǔn)模式下的瀏覽器
document.body.scrollTop = now + speed; //怪異模式下的瀏覽器
}, 15);
}

 
這里的代碼主要還是參考了網(wǎng)上其他資源,再加了一點(diǎn)自己的理解。當(dāng)然還有其他實(shí)現(xiàn)方法,比如JavaScript最早時(shí)間就支持的window.scrollTo()。用jQ來(lái)實(shí)現(xiàn)的話代碼量將會(huì)變得很少,可參看w3cplus

個(gè)人覺(jué)得,先學(xué)好原生JavaScript,比如搞清楚數(shù)據(jù)類型,閉包,繼承,作用域,DOM,CSS,事件處理,Ajax等,用熟練后學(xué)習(xí)其他框架將會(huì)容易很多。

相關(guān)文章

  • javascript輸出AscII碼擴(kuò)展集中的字符方法

    javascript輸出AscII碼擴(kuò)展集中的字符方法

    下面小編就為大家?guī)?lái)一篇javascript輸出AscII碼擴(kuò)展集中的字符方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧,祝大家游戲愉快哦
    2016-12-12
  • 我所理解的JavaScript中的this指向

    我所理解的JavaScript中的this指向

    這篇文章主要介紹了JavaScript中this指向的相關(guān)資料,幫助大家更好的理解和學(xué)習(xí)JavaScript,感興趣的朋友可以了解下
    2020-09-09
  • JavaScript中停止執(zhí)行setInterval和setTimeout事件的方法

    JavaScript中停止執(zhí)行setInterval和setTimeout事件的方法

    這篇文章主要介紹了JavaScript中停止執(zhí)行setInterval和setTimeout事件的方法,本文給出操作實(shí)例代碼和語(yǔ)法介紹,需要的朋友可以參考下
    2015-05-05
  • 微信小程序中的canvas 文字?jǐn)嘈泻褪÷蕴?hào)顯示功能的處理方法

    微信小程序中的canvas 文字?jǐn)嘈泻褪÷蕴?hào)顯示功能的處理方法

    大家都知道在canvas中沒(méi)有提供方法來(lái)處理文字的多行問(wèn)題,只有通過(guò)截取指定字符串來(lái)達(dá)到目的。接下來(lái)通過(guò)本文給大家介紹微信小程序中的canvas 文字?jǐn)嘈泻褪÷蕴?hào)顯示功能 ,需要的朋友可以參考下
    2018-11-11
  • JS array數(shù)組檢測(cè)方式解析

    JS array數(shù)組檢測(cè)方式解析

    這篇文章主要介紹了JS array數(shù)組檢測(cè)方式解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-05-05
  • Flash圖片上傳組件 swfupload使用指南

    Flash圖片上傳組件 swfupload使用指南

    這篇文章主要介紹了Flash圖片上傳組件 swfupload使用方法及示例,swfupload的使用范圍十分的廣泛,功能也很強(qiáng)大,今天我們就先來(lái)簡(jiǎn)單的通過(guò)范例來(lái)學(xué)習(xí)下。
    2015-03-03
  • 微信小程序骨架屏的實(shí)現(xiàn)方法

    微信小程序骨架屏的實(shí)現(xiàn)方法

    本文主要介紹了微信小程序骨架屏的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2023-01-01
  • Javascript 實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)

    Javascript 實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)

    這篇文章主要介紹了Javascript 實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)的相關(guān)資料,需要的朋友可以參考下
    2014-12-12
  • Javascript的表單驗(yàn)證-提交表單

    Javascript的表單驗(yàn)證-提交表單

    JavaScript 可用來(lái)在數(shù)據(jù)被送往服務(wù)器前對(duì) HTML 表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證。通過(guò)本文給大家介紹Javascript的表單驗(yàn)證-提交表單,對(duì)javascript表單驗(yàn)證,提交表單相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
    2016-03-03
  • 淺談Emergence.js 檢測(cè)元素可見(jiàn)性的 js 插件

    淺談Emergence.js 檢測(cè)元素可見(jiàn)性的 js 插件

    這篇文章主要介紹了淺談Emergence.js 檢測(cè)元素可見(jiàn)性的 js 插件,詳細(xì)的介紹了Emergence.js安裝和使用方法,具有一定的參加性,有興趣的可以了解一下
    2017-11-11

最新評(píng)論