javascript動畫系列第五篇——模擬滾動條

来源:http://www.cnblogs.com/xiaohuochai/archive/2016/09/23/5901426.html
-Advertisement-
Play Games

[1]原理介紹 [2]數字加減 [3]元素尺寸 [4]內容滾動 ...


×
目錄
[1]原理介紹 [2]數字加減 [3]元素尺寸[4]內容滾動

前面的話

　　當元素內容溢出元素尺寸範圍時，會出現滾動條。但由於滾動條在各瀏覽器下表現不同，相容性不好。所以，模擬滾動條也是很常見的應用。本文將詳細介紹滾動條模擬

 

原理介紹

　　滾動條模擬實際上和元素模擬拖拽類似。僅僅通過範圍限定，使元素只可以在單一方向上拖拽

<div id="box" style="height: 200px;width: 16px;background-color:#F5F5F5;border-radius:10px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);position:relative;">
    <div id="test" style="height: 60px;width: 16px;background-color:#555;box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;position:absolute;"></div>
</div>
<script>
test.onmousedown = function(e){
    e = e || event;
    var that = this;
    var disY = e.clientY - this.offsetTop;
    document.onmousemove = function(e){
        e = e || event;
        var T = e.clientY - disY;
        if(T < 0){T = 0;}
        var TMax = parseInt(box.style.height) - that.offsetHeight;
        if(T > TMax){T = TMax;}
        that.style.top = T + 'px'; 
    }
    document.onmouseup = function(){
        document.onmousemove = null;
        //釋放全局捕獲
        if(test.releaseCapture){test.releaseCapture();}
    }
    //IE8-瀏覽器阻止預設行為
    if(test.setCapture){test.setCapture();}
    //阻止預設行為
    return false;
}
</script>

　　通過將上面代碼封裝成函數，可以實現橫向和縱向兩種滾動條

<div id="box1" style="height: 200px;width: 16px;background-color:#F5F5F5;border-radius:10px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);position:relative;">
    <div id="test1" style="height: 60px;width: 16px;background-color:#555;box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;position:absolute;"></div>
</div>
<div id="box2" style="height: 16px;width: 200px;background-color:#F5F5F5;border-radius:10px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);position:relative;">
    <div id="test2" style="height: 16px;width: 60px;background-color:#D62929;box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;position:absolute;"></div>
</div>
<script>
function scrollbar(obj,str){
    obj.onmousedown = function(e){
        e = e || event;
        var that = this;
        //x軸方向
        if(str == 'x'){
            var disX = e.clientX - this.offsetLeft;
        //否則為y軸方向
        }else{
            var disY = e.clientY - this.offsetTop;
        }
        document.onmousemove = function(e){
            e = e || event;
            if(str == 'x'){
                var L = e.clientX - disX;
                if(L < 0){L = 0;}
                var LMax = parseInt(obj.parentNode.style.width) - that.offsetWidth;
                if(L > LMax){L = LMax;}
                that.style.left = L + 'px'; 
            }else{
                var T = e.clientY - disY;
                if(T < 0){T = 0;}
                var TMax = parseInt(obj.parentNode.style.height) - that.offsetHeight;
                if(T > TMax){T = TMax;}
                that.style.top = T + 'px'; 
            }
        }
        document.onmouseup = function(){
            document.onmousemove = null;
            //釋放全局捕獲
            if(obj.releaseCapture){obj.releaseCapture();}
        }
        //IE8-瀏覽器阻止預設行為
        if(obj.setCapture){obj.setCapture();}
        //阻止預設行為
        return false;
    }    
}
scrollbar(test1);
scrollbar(test2,'x')
</script>

應用

　　下麵來介紹通過滾動條實現的幾個應用

數字加減

　　通過移動滾動條來實現數字的加減。比例關係為：

滾動條已移動距離/滾動條可移動距離= 數字當前值/數字最大值
<div id="box" style="height: 16px;width: 200px;display:inline-block;background-color:#F5F5F5;border-radius:10px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);position:relative;">
    <div id="test" style="height: 16px;width: 60px;background-color:#D62929;box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;position:absolute;"></div>
</div>
<span id="result">0</span>
<script>
function scrollbar(obj,str,max){
    obj.onmousedown = function(e){
        e = e || event;
        var that = this;
        //比例繫數
        var ratio;
        //x軸方向
        if(str == 'x'){
            var disX = e.clientX - this.offsetLeft;
            ratio = max/(this.parentNode.offsetWidth - this.offsetWidth);
        //否則為y軸方向
        }else{
            var disY = e.clientY - this.offsetTop;
            ratio =max/(this.parentNode.offsetHeight - this.offsetHeight);
        }
        document.onmousemove = function(e){
            e = e || event;
            if(str == 'x'){
                var L = e.clientX - disX;
                if(L < 0){L = 0;}
                var LMax = parseInt(obj.parentNode.style.width) - that.offsetWidth;
                if(L > LMax){L = LMax;}
                that.style.left = L + 'px'; 
                result.innerHTML = Math.round(ratio * L);
            }else{
                var T = e.clientY - disY;
                if(T < 0){T = 0;}
                var TMax = parseInt(obj.parentNode.style.height) - that.offsetHeight;
                if(T > TMax){T = TMax;}
                that.style.top = T + 'px'; 
                result.innerHTML = Math.round(ratio * T); 
            }
        }
        document.onmouseup = function(){
            document.onmousemove = null;
            //釋放全局捕獲
            if(obj.releaseCapture){obj.releaseCapture();}
        }
        //IE8-瀏覽器阻止預設行為
        if(obj.setCapture){obj.setCapture();}
        //阻止預設行為
        return false;
    }    
}
scrollbar(test,'x',100);
</script>

元素尺寸

　　通過拖動滾動條來實現元素尺寸的變化，以改變元素寬度為例。比例關係為：

滾動條已移動距離/滾動條可移動距離= 元素當前寬度/元素最大寬度
<div id="box" style="height: 16px;width: 200px;display:inline-block;background-color:#F5F5F5;border-radius:10px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);position:relative;">
    <div id="test" style="height: 16px;width: 60px;background-color:#D62929;box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;position:absolute;"></div>
</div>
<span id="result" style="width: 1px;height: 50px;background-color:pink;display:inline-block;"></span>
<script>
function scrollbar(obj,str,max){
    obj.onmousedown = function(e){
        e = e || event;
        var that = this;
        //比例繫數
        var ratio;
        //x軸方向
        if(str == 'x'){
            var disX = e.clientX - this.offsetLeft;
            ratio = max/(this.parentNode.offsetWidth - this.offsetWidth);
        //否則為y軸方向
        }else{
            var disY = e.clientY - this.offsetTop;
            ratio =max/(this.parentNode.offsetHeight - this.offsetHeight);
        }
        document.onmousemove = function(e){
            e = e || event;
            if(str == 'x'){
                var L = e.clientX - disX;
                if(L < 0){L = 0;}
                var LMax = parseInt(obj.parentNode.style.width) - that.offsetWidth;
                if(L > LMax){L = LMax;}
                that.style.left = L + 'px'; 
                result.style.width = Math.round(ratio * L) + 'px';
            }else{
                var T = e.clientY - disY;
                if(T < 0){T = 0;}
                var TMax = parseInt(obj.parentNode.style.height) - that.offsetHeight;
                if(T > TMax){T = TMax;}
                that.style.top = T + 'px'; 
                result.style.width = Math.round(ratio * T) + 'px'; 
            }
        }
        document.onmouseup = function(){
            document.onmousemove = null;
            //釋放全局捕獲
            if(obj.releaseCapture){obj.releaseCapture();}
        }
        //IE8-瀏覽器阻止預設行為
        if(obj.setCapture){obj.setCapture();}
        //阻止預設行為
        return false;
    }    
}
scrollbar(test,'x',100);
</script>

內容滾動

　　通過拖動滾動條來實現內容滾動，比例關係為：

滾動條已移動距離/滾動條可移動距離= 內容已移動距離/內容可移動距離
<div id="box" style="height: 200px;width: 16px;display:inline-block;background-color:#F5F5F5;border-radius:10px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);position:relative;vertical-align:middle;">
    <div id="test" style="height: 60px;width: 16px;background-color:#D62929;box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;position:absolute;"></div>
</div>
<span id="result" style="width: 100px;height: 200px;background-color:pink;display:inline-block;line-height:30px;vertical-align:middle;position:relative;overflow:hidden;"><div id="resultIn" style="position:absolute;top:0;">測試文字<br>測試文字<br>測試文字<br>測試文字<br>測試文字<br>測試文字<br>測試文字<br>測試文字<br>測試文字<br>測試文字<br>測試文字<br>測試文字<br></div></span>
<script>
function scrollbar(obj,str){
    var max = result.offsetHeight - resultIn.offsetHeight;
    obj.onmousedown = function(e){
        e = e || event;
        var that = this;
        //比例繫數
        var ratio;
        //x軸方向
        if(str == 'x'){
            var disX = e.clientX - this.offsetLeft;
            ratio = max/(this.parentNode.offsetWidth - this.offsetWidth);
        //否則為y軸方向
        }else{
            var disY = e.clientY - this.offsetTop;
            ratio =max/(this.parentNode.offsetHeight - this.offsetHeight);
        }
        document.onmousemove = function(e){
            e = e || event;
            if(str == 'x'){
                var L = e.clientX - disX;
                if(L < 0){L = 0;}
                var LMax = parseInt(obj.parentNode.style.width) - that.offsetWidth;
                if(L > LMax){L = LMax;}
                that.style.left = L + 'px'; 
                resultIn.style.top = Math.round(ratio * L) + 'px';
            }else{
                var T = e.clientY
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • （3）抽象工廠模式
    工廠方法模是定義一個勇於創建對象的介面，讓子類決定實例化哪一個類。 抽象工廠模式（Abstract Factory），提供一個創建一系列相關或相互依賴對象的介面，而無需指定它們具體的類 抽象工廠模式構成 抽象工廠角色（AbstractFactory）：聲明生成抽象產品的方法 具體工廠角色（Concr... ...
  • 說說SACC2016第八屆架構師大會
    每年這方面的會議很多，不知不覺已經連續舉辦八年了。一屆比一屆辦的有質量，規模越大。今年也如約而至。2016-10-27在北京萬達索菲特酒店。4000多人規模，雲集各領域頂尖架構師，運維，雲計算，技術專家，IT決策者一起共襄盛舉。 會議日程如下 10月27日上午 10月27日下午 | 10月28日下午 ...
  • h5地理位置API
    h5地理位置API 地理API允許javascript程式向瀏覽器詢問用戶的真實地理位置，支持地理位置API的瀏覽器在訪問前總是會詢問用戶是否允許。 獲取用戶地理的途徑有: 1、ip地址 書上說不准確，很多時候獲取的是ISP機房的位置，但是獲取非常方便，沒有什麼限制。但是實際上我覺得在中國，ip地址 ...
  • 用js實現跳轉提示頁面
    效果圖： 網頁佈局 <p>操作成功</p> <strong>5</strong><span>秒後回到主頁</span><a href="javascript:history.back();">返回</a> 任務： 1.打開網頁後，如果不做任何操作則返回到一個新的頁面 var num=document ...
  • 用js操作表格
    效果圖： 任務： 1. 滑鼠移到不同行上時背景色改為色值為 #f2f2f2，移開滑鼠時則恢復為原背景色 #fff var tr=document.getElementsByTagName("tr"); for(var i= 0;i<tr.length;i++) { bgcChange(tr[i]); ...
  • 整理一下以前學習的Html+css3複習筆記
    一、html5新特性 常用語義標簽:nav footer header section mark 功能標簽 video audio iframe canvas(畫布和繪圖功能) input新type:url/number/range/Date(date, month, week, time等)/se ...
  • 用js實現選項卡切換效果
    這是要實現的效果圖： 一.HTML頁面佈局 <!-- HTML頁面佈局 --><ul class="tab_menu"> <li class="selected">房產</li> <li>家居</li> <li>二手房</li></ul><div class="tab_box"> <div> 275 ...
  • <!DOCTYPE>到底是個神馬？
    <!DOCTYPE>到底是個神馬？ 前兩天和朋友談到<!DOCTYPE>，今天將網上學習到的資料在這裡整理一下 因為HTML5的風靡人們慢慢的弱化了對<!DOCTYPE>的理解，但是現在還是有很多的面試官在問這個問題，所以還是有必要對其瞭解一下，以便以後有些許談資。 1.<!DOCTYPE>有神馬作 ...
一周排行
    -Advertisement-
    Play Games
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類