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

帶有 CSS 和 jQuery 的漂亮的 Apple 風格幻燈片庫

簡介

談到設計,有一家公司是離不開的。 Apple 重視設計——作為一種新產品、一個精美的目錄或他們的網站——總有值得欽佩的地方。

本週,我們正在製作一個類似 Apple 的幻燈片庫 ,類似於他們在其網站上用於展示其產品的那個。它將完全基於前端,不需要 PHP 或數據庫。

所以繼續下載示例源代碼並繼續第一步。

第 1 步 - XHTML

這個畫廊不需要數據庫,也不需要 PHP 後端。這意味著它很容易整合到現有網站中 - 您只需更改幾行 html 代碼。

讓我們仔細看看 XHTML 標記:

demo.html

<div id="main">

<div id="gallery">

<div id="slides">

<div class="slide"><img src="img/sample_slides/macbook.jpg" width="920" height="400" /></div>
<div class="slide"><img src="img/sample_slides/iphone.jpg" width="920" height="400" /></div>
<div class="slide"><img src="img/sample_slides/imac.jpg" width="920" height="400" /></div>

</div>

<div id="menu">

<ul>
<li class="fbar">&nbsp;</li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_macbook.png" /></a></li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_iphone.png" /></a></li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_imac.png" /></a></li>
</ul>

</div>

</div>

</div>

這個想法很簡單 - 有兩個主要的容器 DIV - 一個帶有 id="menu" 保存縮略圖,另一個 - "slides" 自己拿著幻燈片。

要添加新幻燈片,您只需向兩個容器中添加新元素。幻燈片是 JPG s,縮略圖是透明的 PNG s,但你可以使用任何你想要的圖像類型。

您甚至可以放入任何類型的 HTML。例如,您可以將某個幻燈片放入超鏈接中,只需將圖像放在錨標記內即可。

也就是說,擁有 width 很重要 和身高 幻燈片圖像的屬性設置 - jQuery 使用它來確定滑動區域的寬度,稍後您將看到。

還要注意縮略圖 LI 元素。第一個被分配了一個類名 fbar , 用於只顯示垂直分隔條,其他分配一個menuItem 類 - 用作幻燈片控制按鈕。

現在讓我們繼續下一步。

第 2 步 - CSS

讓我們看看隱藏在我們的樣式表中的內容。我只包括了畫廊直接使用的樣式。您可以在 demo.css 中查看其餘用於展示演示的樣式 .

demo.css

body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
    /* Page reset */
    margin:0px;
    padding:0px;
}

body{
    /* Setting default text color, background and a font stack */
    color:#444444;
    font-size:13px;
    background: #f2f2f2;
    font-family:Arial, Helvetica, sans-serif;
}

/* Gallery styles */

#gallery{
    /* CSS3 Box Shadow */
    -moz-box-shadow:0 0 3px #AAAAAA;
    -webkit-box-shadow:0 0 3px #AAAAAA;
    box-shadow:0 0 3px #AAAAAA;

    /* CSS3 Rounded Corners */

    -moz-border-radius-bottomleft:4px;
    -webkit-border-bottom-left-radius:4px;
    border-bottom-left-radius:4px;

    -moz-border-radius-bottomright:4px;
    -webkit-border-bottom-right-radius:4px;
    border-bottom-right-radius:4px;

    border:1px solid white;

    background:url(img/panel.jpg) repeat-x bottom center #ffffff;

    /* The width of the gallery */
    width:920px;
    overflow:hidden;
}

#slides{
    /* This is the slide area */
    height:400px;

    /* jQuery changes the width later on to the sum of the widths of all the slides. */
    width:920px;
    overflow:hidden;
}

.slide{
    float:left;
}

#menu{
    /* This is the container for the thumbnails */
    height:45px;
}

ul{
    margin:0px;
    padding:0px;
}

li{
    /* Every thumbnail is a li element */
    width:60px;
    display:inline-block;
    list-style:none;
    height:45px;
    overflow:hidden;
}

li.inact:hover{
    /* The inactive state, highlighted on mouse over */
    background:url(img/pic_bg.png) repeat;
}

li.act,li.act:hover{
    /* The active state of the thumb */
    background:url(img/active_bg.png) no-repeat;
}

li.act a{
    cursor:default;
}

.fbar{
    /* The left-most vertical bar, next to the first thumbnail */
    width:2px;
    background:url(img/divider.png) no-repeat right;
}

li a{
    display:block;
    background:url(img/divider.png) no-repeat right;
    height:35px;
    padding-top:10px;
}

a img{
    border:none;
}

我們在這個幻燈片庫中使用了許多 CSS3 特定屬性:

  • 盒子陰影 ,這使得畫廊在其邊緣投下淺色陰影。要使用它,您必須提供 X 和 Y 的偏移量(此處為 0 0)、模糊度(本例中為 3px)和陰影的顏色;
  • 邊框半徑 ,它使畫廊的底角變圓。

不幸的是,目前只有 Safari、Chrome 和 Firefox 支持這些屬性。但是在其他瀏覽器中,您仍然擁有一個功能齊全的圖庫。

現在是時候使用一些 jQuery 魔法了。

第 3 步 - jQuery

正如我已經提到的,這個畫廊不使用任何服務器端代碼,所以它完全取決於前端來製作幻燈片。

script.js

$(document).ready(function(){
    /* This code is executed after the DOM has been completely loaded */

    var totWidth=0;
    var positions = new Array();

    $('#slides .slide').each(function(i){
        /* Loop through all the slides and store their accumulative widths in totWidth */
        positions[i]= totWidth;
        totWidth += $(this).width();

        /* The positions array contains each slide's commulutative offset from the left part of the container */

        if(!$(this).width())
        {
            alert("Please, fill in width & height for all your images!");
            return false;
        }
    });

    $('#slides').width(totWidth);

    /* Change the cotnainer div's width to the exact width of all the slides combined */

    $('#menu ul li a').click(function(e){

        /* On a thumbnail click */
        $('li.menuItem').removeClass('act').addClass('inact');
        $(this).parent().addClass('act');

        var pos = $(this).parent().prevAll('.menuItem').length;

        $('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
        /* Start the sliding animation */

        e.preventDefault();
        /* Prevent the default action of the link */
    });

    $('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
    /* On page load, mark the first thumbnail as active */
});

該腳本背後的主要思想是遍歷所有幻燈片,總結它們的寬度並將總和分配給幻燈片容器 - 具有 id="slides 的 DIV "。因為幻燈片向左浮動並且有足夠的空間,所以它們彼此相鄰。

稍後,當您單擊縮略圖時,腳本會計算要顯示的幻燈片並滾動 #slides div 通過 animate 分配負邊距 方法。

並且只需要 40 行代碼,類似蘋果的滑塊庫就完成了!

結論

通過三個簡單的步驟,我們創建了一個漂亮的 Apple 風格的幻燈片畫廊。只需添加幾行代碼即可輕鬆將其包含到任何網站中。

您可以為自己的項目自由修改和構建圖庫。另外,請務必通過我們的Tutorial Mashups與社區分享您所做的事情 (在評論部分上方)。


Tutorial JavaScript 教程
  1. 在 ReactJs 中安裝節點模塊時出錯

  2. React Web 開發的可訪問性基礎知識

  3. 了解 Node.js 中的 Elasticsearch 查詢正文生成器

  4. 數據呈現在屏幕上,但在控制台上有錯誤(Firebase with Vue):未捕獲(承諾中)類型錯誤:無法讀取 null 的屬性“內容”

  5. LeetCode - 平衡二叉樹

  6. React、Vue 和 Svelte:比較點擊事件

  7. Ext.onReady() 與 $(document).ready()

  1. 2019 年 10 月超過 19 篇學習 JavaScript 的文章

  2. Jquery href click - 我怎樣才能啟動一個事件?

  3. 單擊具有特定 ID 的 div 時的 Ja​​vascript 重定向

  4. 只打印?

  5. 通過 ID 查找數組對象並在 React 中返回

  6. iframe js 問題

  7. Redux 架構指南

  1. 關於 JavaScript 中的解構你需要知道的一切

  2. 消除 UI 測試的恐懼😱

  3. Redux - 核心概念

  4. 使用 Firebase 託管的多個環境