jQuery自訂捲軸完整實例_jquery-js教程-PHP中文網

首頁

web前端

js教程

jQuery自訂捲軸完整實例_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:21 PM

jquery 捲軸自訂

本文實例講述了jQuery自訂滾動條實作方法。分享給大家參考，具體如下：

很多時候，由於美觀上的考慮，往往需要自訂各種各樣的滾動條，因此，本人做了一個demo

運作效果截圖如下：

以下是程式碼部分：

<html>
  <head>
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    <script>
    $(function(){
      //内容高度
      var content = $("#div2"); 
      //框的高度
      var box = $("#div1");
      //自定义的滚动条
      var scrollbar = $("#div3");
      var scroll=function(content,box,scrollbar){
        var bigHeight = content.height();
        var smallHeight = box.height();
        var rate = smallHeight/bigHeight;
        var h = Math.floor(rate*smallHeight);
        scrollbar.height(h);
        var offset = box.offset()
        var offsetT = offset.top+1;
        scrollbar.mousedown(function(e){
          var divOffsetT = scrollbar.offset().top;
          var tempT = e.pageY-divOffsetT;
          function move(e){
            var newH = e.pageY-tempT-offsetT;
            if(newH<0){
              newH=0;
            }else if(newH>(smallHeight-h)){
              newH=smallHeight-h;
            }
            var rate2 = (newH+h)/smallHeight;
            var contentH = Math.floor(bigHeight*rate2-smallHeight);
            content.css("top",-contentH+"px");
            scrollbar.css("top",newH+"px");
          }
          $("body").on("mousemove",move);
          $("body").mouseup(function(){
            $("body").off("mousemove",move);
          });
        });
      }
      scroll(content,box,scrollbar);
    });
    </script>
    <style>
      *{ margin:0; padding: 0;}
      body{ font-size: 12px;}
      #div1{ width: 200px; height: 300px; margin: 50px auto; position: relative; _overflow: hidden; border: 1px solid #000;}
      #div2{ width: 180px; position: absolute; top: 0; left: 5px;}
      #div3{ width: 10px; position: absolute; top: 0; right:5px; background: #000;}
    </style>
  </head>
  <body>
    <div id="div1">
      <div id="div3"></div>
      <div id="div2">
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
      </div>
    </div>
    <textarea name="" id="txt" cols="30" rows="10"></textarea>
  </body>
</html>

登入後複製

希望本文所述對大家jQuery程式設計有所幫助。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7751

Java教學

1643

CakePHP 教程

1398

Laravel 教程

1293

PHP教程

1234

Related knowledge

edius自訂螢幕佈局的操作流程 Mar 27, 2024 pm 06:50 PM

1.下圖是edius預設的螢幕佈局，預設的EDIUS視窗佈局是橫向版式，因此在單一顯示器環境中，許多視窗是重疊在一起的，且預覽視窗為單一視窗模式。 2、您可以透過【檢視】選單列啟用【雙視窗模式】，使預覽視窗同時顯示播放視窗和錄製視窗。 3.您可以透過【檢視功能表列>視窗佈局>常規】來恢復預設螢幕佈局。另外您也可以自訂適合您的佈局方式，並儲存為常用螢幕佈局：將視窗拖曳成適合自己的佈局，然後點擊【檢視>視窗佈局>儲存目前佈局>新建】，在彈出的【儲存目前佈局】小視窗中輸入佈局名稱，按確定

jQuery中如何使用PUT請求方式？ Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT請求方式？在jQuery中，發送PUT請求的方法與發送其他類型的請求類似，但需要注意一些細節和參數設定。 PUT請求通常用於更新資源，例如更新資料庫中的資料或更新伺服器上的檔案。以下是在jQuery中使用PUT請求方式的具體程式碼範例。首先，確保引入了jQuery庫文件，然後可以透過以下方式發送PUT請求：$.ajax({u

Mac系統捲軸怎麼設定始終顯示-捲軸設定始終顯示的方法 Mar 18, 2024 pm 06:22 PM

近日有一些小夥伴諮詢小編Mac系統滾動條怎麼設定始終顯示?下面就為大家帶來了Mac系統滾動條設定始終顯示的方法，有需要的小伙伴可以來了解了解哦。第一步：在系統開始選單，選擇【系統偏好設定】選項。第三步：在系統偏好設定頁面，選擇【通用】選項。第三步：在通用頁面，選擇【始終】顯示捲軸。

excel怎麼自訂x軸和y軸？ (excel座標軸刻度如何自訂) Mar 14, 2024 pm 02:10 PM

　　在excel表格中，有時候可能需要插入座標軸，能夠更直觀地看到資料的變化趨勢。還有些小夥伴不清楚怎麼在表中插入座標軸，接下來小編就跟大家分享一下excel自訂座標軸刻度的方法吧。　　座標軸插入方法：　　1、在excel介面中，選取資料。　　2、在插入介面中，點選插入長條圖或長條圖。　　3、在展開的介面中，選擇形圖類型。　　4、在表格右鍵介面中，點選選擇資料。　　5、在展開的介面中，進行自訂即可。

jQuery小技巧：快速修改頁面所有a標籤的文本 Feb 28, 2024 pm 09:06 PM

標題：jQuery小技巧：快速修改頁面所有a標籤的文字在網頁開發中，我們經常需要對頁面中的元素進行修改和操作。使用jQuery時，有時候需要一次修改頁面中所有a標籤的文字內容，這樣可以節省時間和精力。以下將介紹如何使用jQuery快速修改頁面所有a標籤的文本，同時給出具體的程式碼範例。首先，我們需要引入jQuery庫文件，確保在頁面中引入了以下程式碼：&lt

jQuery如何移除元素的height屬性？ Feb 28, 2024 am 08:39 AM

jQuery如何移除元素的height屬性？在前端開發中，經常會遇到需要操作元素的高度屬性的需求。有時候，我們可能需要動態改變元素的高度，而有時候又需要移除元素的高度屬性。本文將介紹如何使用jQuery來移除元素的高度屬性，並提供具體的程式碼範例。在使用jQuery操作高度屬性之前，我們首先需要了解CSS中的height屬性。 height屬性用於設定元素的高度

使用jQuery修改所有a標籤的文字內容 Feb 28, 2024 pm 05:42 PM

標題：使用jQuery修改所有a標籤的文字內容jQuery是一款受歡迎的JavaScript庫，被廣泛用於處理DOM操作。在網頁開發中，經常會遇到需要修改頁面上連結標籤（a標籤）的文字內容的需求。本文將介紹如何使用jQuery來實現這個目標，並提供具體的程式碼範例。首先，我們需要在頁面中引入jQuery庫。在HTML檔案中加入以下程式碼：

了解jQuery中eq的作用及應用場景 Feb 28, 2024 pm 01:15 PM

jQuery是一種流行的JavaScript庫，被廣泛用於處理網頁中的DOM操作和事件處理。在jQuery中，eq()方法是用來選擇指定索引位置的元素的方法，具體使用方法和應用場景如下。在jQuery中，eq()方法選擇指定索引位置的元素。索引位置從0開始計數，即第一個元素的索引是0，第二個元素的索引是1，依此類推。 eq()方法的語法如下：$("s

See all articles

jQuery自訂捲軸完整實例_jquery

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題