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

使用 jQuery 和 CSS 製作馬賽克幻燈片

在設計產品頁面時,通常需要連續呈現多張圖片,也稱為幻燈片。隨著 jQuery 庫及其眾多插件的興起,有大量現成的解決方案可以解決這個問題。但是,為了給訪問者留下持久的印象,您需要向他們展示他們以前從未見過的東西。

今天我們正在製作一個 jQuery 和 CSS 馬賽克畫廊。馬賽克,因為它會在從一張幻燈片移動到另一張幻燈片時具有有趣的平鋪過渡效果。

第 1 步 - XHTML

幻燈片的馬賽克效果是通過將原始圖像分割成更小的部分來實現的。這些包含圖像部分的圖塊按順序從視圖中隱藏,從而導致效果。幻燈片的標記非常簡單。它由主幻燈片容器元素 (#mosaic-slideshow ),上一個和下一個過渡的左右箭頭和馬賽克幻燈片 div,它是由 jQuery 在運行時插入的。

demo.html

<div id="mosaic-slideshow">
    <div class="arrow left"></div>
    <div class="arrow right"></div>

    <div class="mosaic-slide" style="z-index: 10;">

        <!-- The mosaic-slide div and the tiles are generated by jQuery -->
        <div class="tile" style="..."></div>
        <div class="tile" style="..."></div>
        <div class="tile" style="..."></div>
        <div class="tile" style="..."></div>

    </div>
</div>

mosaic-slide 的 div jQuery 在 transition() 之後將類名添加到頁面中 JavaScript 函數被執行(我們將在第三步回到這個)。在裡面你可以看到 tile 分區。總共有 56 個這樣的 div,每個 div 都有一個 60px x 60px 的幻燈片圖像部分設置為它的背景。

第 2 步 - CSS

為了使這個效果起作用(最重要的是看起來不錯),我們必須添加幾行 CSS。此處僅顯示圖庫直接使用的代碼。您可以在 styles.css 中查看為演示頁面的其餘部分設置樣式的代碼 .

styles.css - 第 1 部分

#mosaic-slideshow{
    /* The slideshow container div */
    height:500px;
    margin:0 auto;
    position:relative;
    width:670px;
}

.mosaic-slide{
    /* This class is shared between all the slides */
    left:80px;
    position:absolute;
    top:25px;

    border:10px solid #555;

    /* CSS3 rounded corners */
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    border-radius:20px;
}

.tile{
    /* The individual tiles */
    height:60px;
    width:60px;
    float:left;
    border:1px solid #555;
    border-width:0 1px 1px 0;
    background-color:#555;
}

幻燈片包含在 ID 為 mosaic-slideshow 的 div 中 (或 #mosaic-slideshow,如果我們以 CSS / jQuery 選擇器的形式引用它)。頁面中只能有一個這樣的 div,因此使用了 ID 屬性。

但是,可以有多個 mosaic-slide 頁面中的 div。效果本身是通過將兩張幻燈片堆疊在一起並隱藏第一張的瓷磚以顯示第二張的瓷磚來實現的。這就是我們使用類名而不是 ID 的原因。

這裡介紹的一些更有趣的規則是圓角的三個 CSS3 規則。由於 CSS3 標準仍在進行中,瀏覽器不支持常規的 border-radius 屬性還沒有(除了新的 10.50 版本的 Opera),並且需要供應商特定的前綴來識別它。 -moz- Firefox 使用前綴,而 -webkit- 被 Safari 和 Chrome 使用。

styles.css - 第 2 部分

.arrow{
    /* The prev/next arrows */
    width:35px;
    height:70px;
    background:url("img/arrows.png") no-repeat;
    position:absolute;
    cursor:pointer;
    top:50%;
    margin-top:-35px;
}

.arrow.left{
    left:15px;
    background-position:center top;
}

.arrow.left:hover{
    background-position:center -70px;
}

.arrow.right{
    right:15px;
    background-position:center -140px;
}

.arrow.right:hover{
    background-position:center -210px;
}

.clear{
    /* This class clears the floats */
    clear:both;
}

箭頭 類由上一個和下一個箭頭共享。除了這個通用規則之外,它們確實需要單獨的樣式,所以我們在此之後添加它。我們還使用 CSS sprite 作為箭頭 div 的背景。它包含兩個箭頭的常規和懸停狀態,這使我們不必使用四個單獨的圖像。

第 3 步 - jQuery

將 jQuery 庫包含到頁面後,我們可以繼續創建使幻燈片顯示的腳本。為了實現馬賽克效果,腳本定義了4個函數:

  • 過渡() - 此函數在當前顯示的幻燈片和由 id 參數指定的新幻燈片之間進行動畫轉換。它的工作原理是將我們要顯示的新幻燈片定位在當前幻燈片下方,然後一次隱藏當前一張幻燈片;
  • generateGrid() - 這個函數被 transition() 用來生成一個瓦片網格。每個磁貼都包含幻燈片圖像的一部分作為其背景;
  • 下一個() - 檢測下一張是哪張幻燈片並使用其索引運行 transition() 函數;
  • 上一頁() - 類似於 next()。

script.js - 第 1 部分

/* The slide images are contained in the slides array. */
var slides = new Array('img/slide_1.jpg',
                       'img/slide_2.jpg',
                       'img/slide_3.jpg',
                       'img/slide_4.jpg',
                       'img/slide_5.jpg');

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

    $('.arrow.left').click(function(){
        prev();

        /* Clearing the autoadvance if we click one of the arrows */
        clearInterval(auto);
    });

    $('.arrow.right').click(function(){
        next();
        clearInterval(auto);
    });

    /* Preloading all the slide images: */

    for(var i=0;i<slides.length;i++)
    {
        (new Image()).src=slides[i];
    }

    /* Showing the first one on page load: */
    transition(1);

    /* Setting auto-advance every 10 seconds */

    var auto;

    auto=setInterval(function(){
        next();
    },10*1000);
});

$(document).ready() 方法在頁面完成加載後執行。這將確保腳本可以訪問所有 div 和其他元素。在其中,我們為前一個和下一個箭頭上的點擊事件綁定了一個函數,預加載所有圖像,顯示第一張幻燈片(否則幻燈片將為空)並設置自動前進間隔。

script.js - 第 2 部分

var current = {};
function transition(id)
{
    /* This function shows the slide specified by the id. */

    if(!slides[id-1]) return false;

    if(current.id)
    {
        /* If the slide we want to show is currently shown: */
        if(current.id == id) return false;

        /* Moving the current slide layer to the top: */
        current.layer.css('z-index',10);

        /* Removing all other slide layers that are positioned below */
        $('.mosaic-slide').not(current.layer).remove();
    }

    /* Creating a new slide and filling it with generateGrid: */
    var newLayer = $('<div class="mosaic-slide">').html(generateGrid({rows:7,cols:8,image:slides[id-1]}));

    /* Moving it behind the current slide: */
    newLayer.css('z-index',1);

    $('#mosaic-slideshow').append(newLayer);

    if(current.layer)
    {
        /* Hiding each tile of the current slide, exposing the new slide: */
        $('.tile',current.layer).each(function(i){
            var tile = $(this);
            setTimeout(function(){
                tile.css('visibility','hidden');
            },i*10);
        })
    }

    /* Adding the current id and newLayer element to the current object: */
    current.id = id;
    current.layer = newLayer;
}

轉換函數使用全局 current 對象來存儲當前顯示的幻燈片的 id,以及對當前幻燈片 div 的引用。如果要顯示與當前活動的幻燈片相同的幻燈片,稍後會使用它來刪除剩餘的幻燈片並防止發生過渡。

請注意我們如何在第 31 行使用 each 方法循環遍歷當前幻燈片的圖塊並安排它們在 i*10 毫秒內隱藏 在將來。作為 每個圖塊都會遞增,這意味著它們彼此隱藏 10 毫秒。

script.js – 第 3 部分

function next()
{
    if(current.id)
    {
        transition(current.id%slides.length+1);
    }
}

function prev()
{
    if(current.id)
    {
        transition((current.id+(slides.length-2))%slides.length+1);
    }

}

/* Width and height of the tiles in pixels: */
var tabwidth=60, tabheight=60;

function generateGrid(param)
{
    /* This function generates the tile grid, with each tile containing a part of the slide image */

    /* Creating an empty jQuery object: */
    var elem = $([]),tmp;

    for(var i=0;i<param.rows;i++)
    {
        for(var j=0;j<param.cols;j++)
        {
            tmp = $('<div>', {
                    "class":"tile",
                    "css":{
                        "background":'#555 url('+param.image+') no-repeat '+(-j*tabwidth)+'px '+(-i*tabheight)+'px'
                    }
            });

            /* Adding the tile to the jQuery object: */
            elem = elem.add(tmp);
        }

        /* Adding a clearing element at the end of each line. This will clearly divide the divs into rows: */
        elem = elem.add('<div class="clear"></div>');
    }

    return elem;
}

傳遞給 generateGrid() 的參數 是一個對象,包含我們要生成的行和列,以及要設置為瓦片背景的圖像。在生成瓦片時,背景圖像會根據瓦片在行和列中的當前位置進行偏移。最後將磁貼添加到最後返回的空 jQuery 對像中。

這樣馬賽克幻燈片就完成了!

總結

今天我們創建了一個帶有動畫馬賽克過渡效果的幻燈片。您可以對其進行修改以包含不同數量​​的行和列,或者完全更改幻燈片的方式。

你怎麼看?您將如何使用此幻燈片?


Tutorial JavaScript 教程
  1. 如何使用 JavaScript 從元素中刪除 CSS 類

  2. 使用 react-pdf 在 React 中顯示在線/離線 pdf 文件

  3. 參加 jQuery Ninja 測試

  4. 構建一個電子郵件訂閱應用程序 - 第 1 部分:準備我們的 React 組件

  5. 在 HTML 中包含 HTML - 就像 React 組件一樣

  6. 如何在fiverr上獲得訂單有人幫助我嗎?

  7. 如何在 NextJS 中構建博客並獲得完美的燈塔分數

  1. 如何驗證 PDF 表單?

  2. Rakkas 0.6:前沿的 React 框架

  3. SVG foreignObject 未在 Chrome 中顯示

  4. javascript將字符串拆分為int數組

  5. 可怕的 AWS 錯誤:找不到 postgres 的版本 xx.x

  6. 5 分鐘內介紹正則表達式

  7. Kendo Grid 在 Grid 處於編輯模式時阻止編輯

  1. 正在考慮對您的全棧應用程序實施身份驗證?從這裡開始

  2. 使用 Angular 控制器作為

  3. 使用 axios 獲取 API 和 fetch API

  4. 使用 Node、Express、Nodemailer 和 TailwindCSS 創建聯繫表單。