JavaScript >> Javascript 文檔 >  >> Tags >> CSS

帶有 jQuery 和 CSS3 的彩色滑塊

在本教程中,我們使用 jQuery 和 CSS3 帶來的新轉換功能來創建三維動態滑塊效果。這裡介紹的技術——用於創建滑塊和 CSS 動態可調整大小的條,可以一起使用或部分用於支持各種 jQuery 優點。

另外,請務必繼續下載 PSD,以便您可以創建自己的顏色和形狀。

第 1 步 - XHTML

我們從本教程的 XHTML 部分開始。標記定義了滑塊和彩色條的結構。所有元素都分組在 main div,以頁面為中心。

demo.html

<div class="main">

    <!-- The sliders -->

    <div class="colorful-slider blue">
        <div class="slider-handle"></div>
    </div>

    <div class="colorful-slider green">
        <div class="slider-handle"></div>
    </div>

    <div class="colorful-slider orange">
        <div class="slider-handle"></div>
    </div>

    <div class="cube-area">

        <!-- The colorful bars -->

        <div class="cuboid blue">
            <div class="cu-top"></div>
            <div class="cu-mid"></div>
            <div class="cu-bottom"></div>
        </div>

        <div class="cuboid green">
            <div class="cu-top"></div>
            <div class="cu-mid"></div>
            <div class="cu-bottom"></div>
        </div>

        <div class="cuboid orange">
            <div class="cu-top"></div>
            <div class="cu-mid"></div>
            <div class="cu-bottom"></div>
        </div>

        <!-- The perspective div is CSS3 transformed -->

        <div class="perspective">
        </div>
    </div>

    <!-- Old school float clearing -->
    <div class="clear"></div>
</div>

在上面的代碼中,您可以看到我們基本上只有兩個結構,它們被複製了 3 次,每種顏色一次。我們有 滑塊 結構,它是一個具有兩個指定類名的 div - colorful-slider, 以及三種顏色選擇中的另一種。 jQuery 稍後使用後者來確定滑動移動會影響哪個欄。

滑塊內部是 slide-handle div,它被轉換為一個可拖動的 jQuery UI 控件,其移動隨後被轉換為條形大小的變化。

第二組是五顏六色的酒吧之一。它們共享一個共同的結構 - 長方體 div,其中包含其他三個 div - 用於頂部、中間和底部。該結構的組織方式是調整中間 div 的大小會增加整個 cuboid 的高度 div,如下圖所示。

最後,我們有 .perspective 分區。這是通過一組 CSS3 規則進行轉換的,因此它具有與條形圖的 3D 外觀相得益彰的透視感。

第 2 步 - CSS

您可以在 styles.css 中找到下面給出的代碼,它是演示下載存檔的一部分。為了便於理解,代碼分為兩部分。

styles.css - 第 1 部分

/* Styling the sliders */

.colorful-slider{
    width:6px;
    height:200px;
    border:1px solid #242424;
    position:relative;
    float:left;
    margin:20px 20px 0;

    -moz-border-radius:12px;
    -webkit-border-radius:12px;
    border-radius:12px;
}

/* Three sider colors: */

.colorful-slider.orange{ background:url("img/slider_orange_bg.png") repeat-y; }
.colorful-slider.green{ background:url("img/slider_green_bg.png") repeat-y; }
.colorful-slider.blue{ background:url("img/slider_blue_bg.png") repeat-y; }

.slider-handle{
    position:absolute;
    left:-11px;
    width:28px;
    height:12px;
    background:url("img/slider_handle.png") no-repeat;
    cursor:n-resize;
    top:44%;
}

.cube-area{
    width:400px;
    height:200px;
    background-color:#282828;
    float:left;
    margin:0 0 0 40px;
    padding:20px;
    position:relative;
}

.cuboid{
    /* The three resizable bar divs */
    width:72px;
    position:absolute;
    margin:20px;
    padding:12px 0 9px;
    float:left;
    bottom:-45px;
    z-index:10;
}

定位滑塊手柄 div 絕對 ,而他們的父母(colorful-slider divs) 是相對定位的,允許我們指定一個 top 和 left 屬性,這些屬性是根據父母的位置計算的。通過這種方式,我們可以將手柄向左偏移 11 個像素,使它們在滑塊中完美居中,儘管後者實際上更窄。

同樣的技術用於將長方體的頂部和底部固定到它們各自在 div 頂部和底部的位置,中間是 cu-mid 填充之間的部分並直接影響彩色條的高度,如您在代碼的第二部分中所見。

styles.css - 第 2 部分

.cu-top{
    /* The top section of the bars */
    position:absolute;
    width:100%;
    top:0;
    left:0;
    height:12px;
    background-repeat:no-repeat;
}

.cu-mid{
    /* The mid section, it is freely resizable */
    background-repeat:repeat-y;
    height:100px;
    width:72px;
}

.cu-bottom{
    /* The bottom part */
    position:absolute;
    width:100%;
    height:9px;
    bottom:0;
    left:0;
    background-repeat:no-repeat;
}

/* Three color themes for the bars */

.cuboid.blue { left:100px;}
.cuboid.blue .cu-top{ background-image:url("img/cuboid_blue_top.png"); }
.cuboid.blue .cu-mid{ background-image:url("img/cuboid_blue_mid.png"); }
.cuboid.blue .cu-bottom{ background-image:url("img/cuboid_blue_bottom.png"); }

.cuboid.green { left:200px;}
.cuboid.green .cu-top{ background-image:url("img/cuboid_green_top.png"); }
.cuboid.green .cu-mid{ background-image:url("img/cuboid_green_mid.png"); }
.cuboid.green .cu-bottom{ background-image:url("img/cuboid_green_bottom.png"); }

.cuboid.orange { left:300px;}
.cuboid.orange .cu-top{ background-image:url("img/cuboid_orange_top.png"); }
.cuboid.orange .cu-mid{ background-image:url("img/cuboid_orange_mid.png"); }
.cuboid.orange .cu-bottom{ background-image:url("img/cuboid_orange_bottom.png"); }

.perspective{
    /* The perspective DIV */
    background-color:#232323;
    position:absolute;
    z-index:1;
    left:0;
    bottom:-55px;
    height:55px;
    width:100%;

    /* Applying CSS3 transformations */
    -moz-transform:skewX(60deg) translate(47px);
    -webkit-transform:skewX(60deg) translate(47px);
    transform:skewX(60deg) translate(47px);
}

長方體 div 被分配了第二個類,它指定了它們的顏色。不同的顏色是通過為其子 div 使用獨特的背景圖像來實現的。

最後一個類,.perspective , 對 div 應用兩個 CSS3 轉換。第一個 - skew(60deg) , 通過將底部向右傾斜來轉換 div。然而,需要進行校正,因為傾斜實際上是在 div 的底部和頂部之間平均分配的,從而使頂部與其他背景 div 對齊。翻譯解決了這個問題,將整個 div 向右移動 47px。

第 3 步 - jQuery

我們正在使用最新版本的 jQuery 庫 - 1.4.2 和 jQuery UI 庫,這兩個庫都直接從 Google 的 AJAX 庫 CDN 鏈接並包含在頁面的 head 部分中。

將它們包含在頁面中後,我們可以繼續編寫啟用動態欄效果的代碼。

sliders.js

$(document).ready(function(){
    /* The code here is executed on page load */

    /* Converting the slide handles to draggables, constrained by their parent slider divs: */

    $('.slider-handle').draggable({
        containment:'parent',
        axis:'y',
        drag:function(e,ui){

            /* The drag function is called on every drag movement, no matter how minute */

            if(!this.par)
            {
                /* Initializing the variables only on the first drag move for performance */

                this.par = $(this).parent();
                this.parHeight = this.par.height();
                this.height = $(this).height();
                this.color = $.trim(this.par.attr('class').replace('colorful-slider',''));
            }

            var ratio = 1-(ui.position.top+this.height)/this.parHeight;

            resizeBar(this.color,ratio);
        }
    });
});

function resizeBar(color,ratio)
{
    $('.cu-mid','.cuboid.'+color).height(200*ratio)
}

這裡我們使用 jQuery UI 的 draggable 方法,它將頁面上的任何 div 轉換為可拖動的對象。我們將它應用到 slider-handle divs 同時設置多個選項。第一個 - 遏制 , 限製手柄與其父級 - 滑塊本身的移動。第二個指定允許移動的軸。

我們還定義了將在每次拖動動作時執行的拖動函數。在其中,我們通過將手柄到滑塊頂部的距離除以滑塊的總高度來計算比率。我們最終得到一個介於 0 和 1 之間的數字,然後將其傳遞給 resizeBar() 功能以及要影響的條的顏色。

有了這個,我們使用 jQuery 和 CSS3 的彩色滑塊就完成了!

結論

此代碼有許多可能的用途。您可以通過指定 cub-mid 的默認高度來創建純 CSS 3D 圖表 以像素為單位的 div。您還可以在許多不同的應用程序中使用滑塊,並且通過修改拖動功能幾乎可以完成所有操作。

你怎麼看?您將如何改進此示例?


Tutorial JavaScript 教程
  1. Angular 模板驅動表單的實用指南

  2. 使用乾淨節點架構的 API 模板

  3. 動態頁面 - Webiny 版本 5

  4. JavaScript 對象屬性

  5. 有沒有辦法在 Jquery 中調用函數“在文檔準備好之前”?

  6. HTML 表單數據到 JSON

  7. 10 個厚臉皮的快速 jQuery 片段

  1. 使用此 VSC 擴展自動鍵入 process.env

  2. X-State 的力量

  3. 在本機反應中使用自定義字體

  4. MongoDB/Mongoose – 查找特定日期在日期範圍內的所有位置

  5. jQuery用星號替換所有字符

  6. Windows XP 使用 HTML、CSS 和 JavaScript

  7. 在 React 中構建自定義鉤子以獲取數據

  1. 如何用 React 寫一個簡單的倒計時

  2. npm 審計與審計js

  3. 當我最小化屏幕時,html頁面被限制並且divs滑動

  4. 如何:在 React 中啟動和停止計數器