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

帶有 Canvas 和 jQuery 的 HTML5 幻燈片

您可能已經聽說過很多關於新的 HTML5 畫布元素的信息。顧名思義,這是一個允許我們創建和修改圖形的特殊元素。此外,我們還可以像使用頁面上的任何其他元素一樣使用它——在其上應用 jQuery 動畫、監聽事件並將其深入集成到我們的佈局中。

到目前為止,您對畫布的所有用途可能僅限於遊戲和其他概念驗證演示。然而,今天,我們正在做一些實際的事情——我們正在製作一個漸進式增強的幻燈片,具有精美的過渡效果,這在舊版瀏覽器中也能完美運行。

理念

使用 JavaScript,我們將對幻燈片中的每個圖像應用一個特殊的過濾器。我們將創建一個新版本的圖像,具有更高的對比度和更鮮豔的色彩,並將其存儲在畫布元素中。

當用戶選擇繼續播放另一張幻燈片時,畫布將顯示為 fadeIn 動畫,營造流暢的燈光效果。

HTML

創建幻燈片的第一步是放置頁面的 HTML 標記。

html5-slideshow.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>An HTML5 Slideshow w/ Canvas & jQuery | Tutorialzine Demo</title>

<link rel="stylesheet" type="text/css" href="styles.css" />

</head>

<body>

<div id="slideshow">

    <ul class="slides">
        <li><img src="img/photos/1.jpg" width="620" height="320" alt="Marsa Alam" /></li>
        <li><img src="img/photos/2.jpg" width="620" height="320" alt="Turrimetta Beach" /></li>
        <li><img src="img/photos/3.jpg" width="620" height="320" alt="Power Station" /></li>
        <li><img src="img/photos/4.jpg" width="620" height="320" alt="Colors of Nature" /></li>
    </ul>

    <span class="arrow previous"></span>
    <span class="arrow next"></span>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>

首先我們有 HTML5 文檔類型,然後是文檔的 head 部分。在標題標籤和样式表之後,我們繼續使用正文。

您可以看到幻燈片的標記非常簡單。主要包含 div,#slideshow , 持有一個 無序列表和上一個和下一個箭頭。無序列表包含幻燈片,每個都定義為 LI 元素。如上圖所示,這是插入帶有修改後的圖像版本的畫布元素的位置。

最後,我們包含 jQuery 和我們的 script.js,我們將在本教程的最後一步中回到它。

CSS

幻燈片的所有樣式都位於styles.css 中。我用過 #slideshow 主要包含元素的 id 作為命名空間,因此您可以輕鬆地將這些樣式附加到樣式表中,而不必擔心衝突。

styles.css

#slideshow{
    background-color:#F5F5F5;
    border:1px solid #FFFFFF;
    height:340px;
    margin:150px auto 0;
    position:relative;
    width:640px;

    -moz-box-shadow:0 0 22px #111;
    -webkit-box-shadow:0 0 22px #111;
    box-shadow:0 0 22px #111;
}

#slideshow ul{
    height:320px;
    left:10px;
    list-style:none outside none;
    overflow:hidden;
    position:absolute;
    top:10px;
    width:620px;
}

#slideshow li{
    position:absolute;
    display:none;
    z-index:10;
}

#slideshow li:first-child{
    display:block;
    z-index:1000;
}

#slideshow .slideActive{
    z-index:1000;
}

#slideshow canvas{
    display:none;
    position:absolute;
    z-index:100;
}

#slideshow .arrow{
    height:86px;
    width:60px;
    position:absolute;
    background:url('img/arrows.png') no-repeat;
    top:50%;
    margin-top:-43px;
    cursor:pointer;
    z-index:5000;
}

#slideshow .previous{ background-position:left top;left:0;}
#slideshow .previous:hover{ background-position:left bottom;}

#slideshow .next{ background-position:right top;right:0;}
#slideshow .next:hover{ background-position:right bottom;}

我們可以將與幻燈片互動的訪問者分為三個主要組:

  • 關閉 JavaScript 的人 .這些用戶只會看到第一張幻燈片,並且無法切換到其他幻燈片;
  • 使用 JavaScript 的人打開了,但不支持畫布 .對於該組的訪問者,幻燈片會瞬間變化,沒有過渡效果;
  • 啟用 JavaScript 並支持畫布的人。 這些人使用最新版本的 Firefox、Safari、Chrome、Opera 和即將發布的 IE9。他們將盡情欣賞幻燈片;

為了說明前兩組,樣式表應用了許多規則。在first-child的幫助下 選擇器,默認情況下只顯示第一張幻燈片。還有一些 overflow:hidden 為了以防萬一,許多地方都應用了規則。

JavaScript

繼續本教程的最後一部分 - JavaScript 和 jQuery 代碼。正如我們已經解釋了效果背後的基本原理,讓我們直接進入執行。

script.js - 第 1 部分

$(window).load(function(){

    // We are listening to the window.load event, so we can be sure
    // that the images in the slideshow are loaded properly.

    // Testing wether the current browser supports the canvas element:
    var supportCanvas = 'getContext' in document.createElement('canvas');

    // The canvas manipulations of the images are CPU intensive,
    // this is why we are using setTimeout to make them asynchronous
    // and improve the responsiveness of the page.

    var slides = $('#slideshow li'),
        current = 0,
        slideshow = {width:0,height:0};

    setTimeout(function(){

        if(supportCanvas){
            $('#slideshow img').each(function(){

                if(!slideshow.width){
                    // Saving the dimensions of the first image:
                    slideshow.width = this.width;
                    slideshow.height = this.height;
                }

                // Rendering the modified versions of the images:
                createCanvasOverlay(this);
            });
        }

        $('#slideshow .arrow').click(function(){
            var li            = slides.eq(current),
                canvas        = li.find('canvas'),
                nextIndex    = 0;

            // Depending on whether this is the next or previous
            // arrow, calculate the index of the next slide accordingly.

            if($(this).hasClass('next')){
                nextIndex = current >= slides.length-1 ? 0 : current+1;
            }
            else {
                nextIndex = current <= 0 ? slides.length-1 : current-1;
            }

            var next = slides.eq(nextIndex);

            if(supportCanvas){

                // This browser supports canvas, fade it into view:

                canvas.fadeIn(function(){

                    // Show the next slide below the current one:
                    next.show();
                    current = nextIndex;

                    // Fade the current slide out of view:
                    li.fadeOut(function(){
                        li.removeClass('slideActive');
                        canvas.hide();
                        next.addClass('slideActive');
                    });
                });
            }
            else {

                // This browser does not support canvas.
                // Use the plain version of the slideshow.

                current=nextIndex;
                next.addClass('slideActive').show();
                li.removeClass('slideActive').hide();
            }
        });

    },100);

使用 document.createElement() ,您可以創建任何您喜歡的 DOM 元素。所以為了測試瀏覽器是否真的支持畫布(並且不只是創建一個通用元素),我們使用 in 運算符檢查 getContext() 方法,它是標準的一個組成部分。此檢查的結果在整個代碼中用於說明使用尚不支持畫布的瀏覽器的用戶。

請注意,對 createCanvasOverlay 的調用 函數(我們將在代碼的第二部分討論)包含在 setTimeout 語句中。這樣做是因為該函數是處理器密集型的,並且可能導致瀏覽器窗口停止。 setTimeout 跳出主執行路徑,異步運行代碼,最大化頁面響應能力。

script.js - 第 2 部分

    // This function takes an image and renders
    // a version of it similar to the Overlay blending
    // mode in Photoshop.

    function createCanvasOverlay(image){

        var canvas            = document.createElement('canvas'),
            canvasContext    = canvas.getContext("2d");

        // Make it the same size as the image
        canvas.width = slideshow.width;
        canvas.height = slideshow.height;

        // Drawing the default version of the image on the canvas:
        canvasContext.drawImage(image,0,0);

        // Taking the image data and storing it in the imageData array:
        var imageData    = canvasContext.getImageData(0,0,canvas.width,canvas.height),
            data        = imageData.data;

        // Loop through all the pixels in the imageData array, and modify
        // the red, green, and blue color values.

        for(var i = 0,z=data.length;i<z;i++){

            // The values for red, green and blue are consecutive elements
            // in the imageData array. We modify the three of them at once:

            data[i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) :
                        (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
            data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) :
                        (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
            data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) :
                        (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));

            // After the RGB channels comes the alpha value, which we leave the same.
            ++i;
        }

        // Putting the modified imageData back on the canvas.
        canvasContext.putImageData(imageData,0,0,0,0,imageData.width,imageData.height);

        // Inserting the canvas in the DOM, before the image:
        image.parentNode.insertBefore(canvas,image);
    }

});

這就是魔法發生的地方。畫布元素基本上是一張大紙,您可以在上面使用 JavaScript 進行繪圖。上面的代碼創建了一個空白畫布元素並導入了作為參數傳遞的圖像,使用 drawImage() 方法。在此之後,我們使用 getImageData() 方法將畫布的所有像素的內容導出到 imageData 數組。

更重要的是,對於圖像的每個像素,我們在數組中有四個條目 - 一個用於紅色、綠色和藍色,以及 alpha 通道(透明度)。這些都是來自 0 的數字 到 255 .主要 循環必須遍歷所有像素並應用一個特殊的過濾器方程來使較亮的顏色變亮並使較暗的顏色變暗。這與使用 photoshop 中的疊加混合模式獲得的效果相同 .

主要的 循環必須做大量的工作 - 對於 600x400 像素圖像 240 000 迭代!這意味著您的代碼必須盡可能優化。這就是為什麼在循環中,我將公式複制了三次,而不是調用函數。通過刪除函數調用,循環變得快 三倍 .

這樣我們的 HTML5 Canvas 幻燈片就完成了!

最後的話

canvas 元素開啟了構建富互聯網應用程序的全新方式。對於那些好奇的人,在相對較新的 PC 上,Firefox 需要 1.2 秒才能生成所有四個畫布圖像,而 Chrome 更快,為 0.67 秒。考慮到完成的工作量,這確實是一項令人印象深刻的成就。


Tutorial JavaScript 教程
  1. 📣 [反饋提問] 呼籲所有使用 VS Code 的 JS 開發者

  2. 作為開發人員最值得聆聽的 10 個播客

  3. 是否可以在 Angular ts 文件中創建表?

  4. 10 分鐘蛇遊戲速度碼

  5. 你如何實現外部腳本?

  6. 布爾狀態變量更改導致父組件消失?

  7. 閱讀您最喜歡的播客 - PodText

  1. 如何拼寫 JavaScript

  2. 謎語人挑戰 01:帶開關的案例

  3. 未使用的𝗝𝗔𝗩𝗔𝗦𝗖𝗥𝗜𝗣𝗧𝗝𝗔𝗩𝗔𝗦𝗖𝗥𝗜𝗣𝗧𝗖𝗦𝗦𝗰𝗼𝗱𝗲𝗼𝗻𝗽𝗮𝗴𝗲𝗽𝗮𝗴𝗲? 🤔

  4. 如何在 React 中建立一個簡單的項目

  5. Nuxt/Vue 項目的最佳 VS Code 擴展

  6. LeetCode 897. 增加順序搜索樹(javascript 解決方案)

  7. CSRF Token 如何保護您的 Web 應用程序

  1. Node JS 模塊和連接 Mongodb

  2. 你在為 Hacktoberfest 做貢獻嗎?給你一些提示。

  3. 讓每個人都成為女王!

  4. Javascript中的增量(前向和後向增量++)