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
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類