網頁內容變速滑動~由快至慢

嘿~節前最後天與客戶看了下美工設計的網站頁面，其中說到了搜索框的滑動。。具體是這樣的，搜索框上半部分是模塊搜索表單，底部是相關搜索內容的按鈕，點擊相關按鈕，上半部分的搜索內容也會隨之相應滑動到相關的搜索表單內容，但是一聽到美工想要在頁面上實現這個功能，我就來了興趣，因爲之前沒有做過這個功能，一直都是用display直接隱藏顯示的，於是今晚抽空分析了下這個滑動的動作實現。。

由於之前一直在搞公司新筆記本的vista安裝，非常鬱悶。。SP1激活不了。。索性不搞了，一直到大概12點的時候才空下時間開始嘗試寫腳本代碼。。。因爲這在放假前腦海中就有了思路，所以代碼寫起來很快。。。（我知道網上類似代碼很多，不要鄙視我，我喜歡挑戰自己，看看自己能做到什麼地步）

三下五除二，直接寫了一個for循環的腳本實現，打開IE，試了一下，效果還不錯，沒想到竟然還真的那麼簡單，但仔細想想，其實效果還不能完全令我滿意，因爲for循環的滑動是勻速的。。。沒勁，這個無法增強視覺以及體驗效果。。

然後放到firefox裏面試了下（客戶要求跨IE、FireFox瀏覽器），鬱悶了，顯示效果完全與IE兩樣。。。直接跳過了for循環的過程，直達我要顯示的模塊。。這根使用display的效果完全一樣嘛~~這可不是我要的效果

以下是我不滿意的beta1版代碼 = =！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>滑動效果</title>
<script>
function moveSearch(topValue){
    var _top = document.getElementById("searchDiv").scrollTop;
    for(i = 0; i < Math.abs(_top-topValue); i++){
        if(_top < topValue){
            document.getElementById("searchDiv").scrollTop += 1;
        }else{
            document.getElementById("searchDiv").scrollTop -= 1;
        }
    }
}
</script>
</head>
    <body>
        <div id="searchDiv" style="border:1px solid blue;width:200px;height:400px;overflow:hidden">
            <div style="border:1px solid blue;width:200px;height:398px;">11111111<br>11111111<br>11111111<br></div>
            <div style="border:1px solid blue;width:200px;height:398px;">22222222<br>22222222<br>22222222<br></div>
            <div style="border:1px solid blue;width:200px;height:398px;">33333333<br>33333333<br>33333333<br></div>
        </div>
        <div>選擇按鈕</div>
        <div><input type="button" value="look 1" onclick="moveSearch(0)"/></div>
        <div><input type="button" value="look 2" onclick="moveSearch(400)"/></div>
        <div><input type="button" value="look 3" onclick="moveSearch(800)"/></div>
        <div id="show"></div>
    </body>
<html>

於是決定做一個變速的滑動效果。。。先快後慢的。。。哼哼~開始考慮使用setTimeout來控制時間。。。。。結果發現。。些微的時間變動根本沒有什麼效果，而且滑動緩慢到無敵。。雖然我設置的是1毫秒滑動1像素 = =！於是考慮別的辦法。。。既然不能控制時間，爲什麼我就不考慮控制滑動尺寸呢？啊哈哈哈，這個無敵。。還是這個方法好。。於是考慮到了使用減半的尺寸滑動方式，這個也正好是我想要的效果。。。於是寫下了下面的代碼。。。

beta2版~~~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>滑動效果</title>
<script>
function moveSearch(topValue){
    var _top = document.getElementById("searchDiv").scrollTop;
    if(_top < topValue){
        document.getElementById("searchDiv").scrollTop += Math.round(Math.abs(_top-topValue)/2);
    }else if(_top > topValue){
        document.getElementById("searchDiv").scrollTop -= Math.round(Math.abs(_top-topValue)/2);
    }
    if(_top != topValue){
        setTimeout("moveSearch("+topValue+")",1);
    }
}
</script>
</head>
    <body>
        <div id="searchDiv" style="border:1px solid blue;width:200px;height:400px;overflow:hidden">
            <div style="border:1px solid blue;width:200px;height:398px;">11111111<br>11111111<br>11111111<br></div>
            <div style="border:1px solid blue;width:200px;height:398px;">22222222<br>22222222<br>22222222<br></div>
            <div style="border:1px solid blue;width:200px;height:398px;">33333333<br>33333333<br>33333333<br></div>
        </div>
        <div>選擇按鈕</div>
        <div><input type="button" value="look 1" onclick="moveSearch(0)"/></div>
        <div><input type="button" value="look 2" onclick="moveSearch(400)"/></div>
        <div><input type="button" value="look 3" onclick="moveSearch(800)"/></div>
        <div id="show"></div>
    </body>
<html>

試了一下，效果還不錯，哈哈哈，達到我需要的效果了。。。然後開始壓力測試。。。這個也需要壓力測試？當然了，這裏所謂的壓力測試就是。。。。。。。。。。加快觸發事件的頻率，也就是。。。。狂點阿，試試看如果上次事件未執行完，是否會影響下次執行的效果。。。。結果果然不出我所料。。看到網頁元素因爲我的瘋狂點擊而在網頁上上下顫抖。。。弄得我一陣內疚。。。唉，還是需要改阿。。。。

於是考慮到了加入全局變量來控制setTimeout的變化。。。。

以下是beta3的代碼，也就是最終版本的。。。。。目前爲止感覺良好，無bug。。。。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>滑動效果</title>
<script>
/*
function moveSearch(topValue){
    var _top = document.getElementById("searchDiv").scrollTop;
    for(i = 0; i < Math.abs(_top-topValue); i++){
        if(_top < topValue){
            document.getElementById("searchDiv").scrollTop += 1;
        }else{
            document.getElementById("searchDiv").scrollTop -= 1;
        }
    }
}
*/
var moveSearchFlag = false;
var moveSearchTimeAction = null;
function moveSearch(topValue){
    if(moveSearchTimeAction != null){
        clearTimeout(moveSearchTimeAction);
    }
    var _top = document.getElementById("searchDiv").scrollTop;
    if(_top < topValue){
        document.getElementById("searchDiv").scrollTop += Math.round(Math.abs(_top-topValue)/2);
    }else if(_top > topValue){
        document.getElementById("searchDiv").scrollTop -= Math.round(Math.abs(_top-topValue)/2);
    }
    if(_top != topValue){
        moveSearchTimeAction = setTimeout("moveSearch("+topValue+")",30);
    }else{
        moveSearchTimeAction = null;
    }
}
</script>
</head>
    <body>
        <div id="searchDiv" style="border:1px solid blue;width:200px;height:400px;overflow:hidden">
            <div style="border:1px solid blue;width:200px;height:398px;">11111111<br>11111111<br>11111111<br></div>
            <div style="border:1px solid blue;width:200px;height:398px;">22222222<br>22222222<br>22222222<br></div>
            <div style="border:1px solid blue;width:200px;height:398px;">33333333<br>33333333<br>33333333<br></div>
        </div>
        <div>選擇按鈕</div>
        <div><input type="button" value="look 1" οnclick="moveSearch(0)"/></div>
        <div><input type="button" value="look 2" οnclick="moveSearch(400)"/></div>
        <div><input type="button" value="look 3" οnclick="moveSearch(800)"/></div>
        <div id="show"></div>
    </body>
<html>

網頁內容變速滑動~由快至慢

記一次 .NET某工業設計軟件崩潰分析

創建 Vue3 項目

TS + Webpack 整合 Jest

分享5款.NET開源免費的Redis客戶端組件庫

安卓手機如何登錄抖音境外版

golang開發 gorilla websocket的使用

面試官：如果不允許線程池丟棄任務，應該選擇哪個拒絕策略？

嵌入式汽車電子學習路線

Mac卸載 Node npm，升級 Node

uni.showModel內容換行

跨IE、FireFox的鼠標選框表現（仿Vista）

完全兼容ie與firefox的拖動層

鼠標拖動層的js方法

超級實用且不花哨的js代碼大全

鼠標框選多選框

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結