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

使用 jQuery 和 CSS 贊助翻轉牆

設計和編碼贊助商頁面是開發人員生活的一部分(如果是關於他們的個人網站,至少是幸運的開發人員的生活)。但是,它遵循與網站其他頁面不同的規則。您必須找到一種方法來容納大量信息並清晰地組織它們,以便將重點放在您的讚助商上,而不是您設計的其他元素上。

我們正在使用帶有 jQuery Flip 插件的 PHP、CSS 和 jQuery 來做到這一點。生成的代碼也可用於展示您的讚助商、客戶或投資組合項目。

第 1 步 - XHTML

循環主 $sponsor 後,大部分標記由 PHP 為每個贊助商生成 大批。您可以在下面看到將為 Google 生成和輸出的代碼:

demo.php

<div title="Click to flip" class="sponsor">
    <div class="sponsorFlip">
        <img alt="More about google" src="img/sponsors/google.png">
    </div>

    <div class="sponsorData">
        <div class="sponsorDescription">
            The company that redefined web search.
        </div>
        <div class="sponsorURL">
            <a href="http://www.google.com/">http://www.google.com/ </a>
        </div>
    </div>
</div>

最外層的.sponsor div 包含兩個額外的 div 元素。第一個 - sponsorFlip - 包含公司標誌。每次單擊此元素都會觸發翻轉效果,正如您將在教程的 jQuery 部分看到的那樣。

也許更有趣的是 sponsorData 分區。它通過 display:none 隱藏在視圖之外 CSS 規則,但 jQuery 可以訪問。這樣我們就可以將贊助公司的描述和 URL 傳遞到前端。翻轉動畫完成後,將這個div的內容動態插入到sponsorFlip中 .

第 2 步 - CSS

我們可以開始設置牆的樣式,因為沒有它,頁面就沒有多大用處。代碼分為兩部分。為清楚起見,省略了一些類。您可以在 styles.css 中看到演示使用的所有樣式 在下載存檔中。

styles.css - 第 1 部分

body{
    /* Setting default text color, background and a font stack */
    font-size:0.825em;
    color:#666;
    background-color:#fff;
    font-family:Arial, Helvetica, sans-serif;
}

.sponsorListHolder{
    margin-bottom:30px;
}

.sponsor{
    width:180px;
    height:180px;
    float:left;
    margin:4px;

    /* Giving the sponsor div a relative positioning: */
    position:relative;
    cursor:pointer;
}

.sponsorFlip{
    /*  The sponsor div will be positioned absolutely with respect
        to its parent .sponsor div and fill it in entirely */

    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    border:1px solid #ddd;
    background:url("img/background.jpg") no-repeat center center #f9f9f9;
}

.sponsorFlip:hover{
    border:1px solid #999;

    /* CSS3 inset shadow: */
    -moz-box-shadow:0 0 30px #999 inset;
    -webkit-box-shadow:0 0 30px #999 inset;
    box-shadow:0 0 30px #999 inset;
}

贊助商設置樣式後 和 sponsorFlip divs,我們添加一個 :hover 為後者狀態。我們正在使用 CSS3 插圖 box-shadow 模仿您可能在 Photoshop 中熟悉的內部陰影效果。在撰寫本文時,嵌入陰影僅適用於最新版本的 Firefox、Opera 和 Chrome,但主要是一種視覺增強功能,沒有它,該頁面仍然可以在所有瀏覽器中完美使用。

styles.css - 第 2 部分

.sponsorFlip img{
    /* Centering the logo image in the middle of the .sponsorFlip div */

    position:absolute;
    top:50%;
    left:50%;
    margin:-70px 0 0 -70px;
}

.sponsorData{
    /* Hiding the .sponsorData div */
    display:none;
}

.sponsorDescription{
    font-size:11px;
    padding:50px 10px 20px 20px;
    font-style:italic;
}

.sponsorURL{
    font-size:10px;
    font-weight:bold;
    padding-left:20px;
}

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

如前所述,sponsorData div 不是用來查看的,所以用 display:none 隱藏 .它的目的是只存儲後來被jQuery提取並在翻轉動畫結束時顯示的數據。

第 3 步 - PHP

在存儲贊助商數據方面您有很多選擇——在 MySQL 數據庫、XML 文檔甚至純文本文件中。這些都有它們的好處,我們在之前的教程中都使用了它們(XML存儲除外,請注意)。

但是,贊助商數據不是經常變化的。這就是為什麼需要一種不同的方法。出於手頭任務的目的,我們使用了一個多維數組,其中包含所有贊助商信息。它易於更新,甚至更易於實現:

demo.php - 第 1 部分

// Each sponsor is an element of the $sponsors array:

$sponsors = array(
    array('facebook','The biggest social..','http://www.facebook.com/'),
    array('adobe','The leading software de..','http://www.adobe.com/'),
    array('microsoft','One of the top software c..','http://www.microsoft.com/'),
    array('sony','A global multibillion electronics..','http://www.sony.com/'),
    array('dell','One of the biggest computer develo..','http://www.dell.com/'),
    array('ebay','The biggest online auction and..','http://www.ebay.com/'),
    array('digg','One of the most popular web 2.0..','http://www.digg.com/'),
    array('google','The company that redefined w..','http://www.google.com/'),
    array('ea','The biggest computer game manufacturer.','http://www.ea.com/'),
    array('mysql','The most popular open source dat..','http://www.mysql.com/'),
    array('hp','One of the biggest computer manufacturers.','http://www.hp.com/'),
    array('yahoo','The most popular network of so..','http://www.yahoo.com/'),
    array('cisco','The biggest networking and co..','http://www.cisco.com/'),
    array('vimeo','A popular video-centric social n..','http://www.vimeo.com/'),
    array('canon','Imaging and optical technology ma..','http://www.canon.com/')
);

// Randomizing the order of sponsors:

shuffle($sponsors);

贊助商分為主要的 $sponsors 大批。每個贊助商條目都組織為一個單獨的常規數組。該數組的第一個元素是讚助商的唯一鍵,它對應於徽標的文件名。第二個元素是對贊助商的描述,最後一個是讚助商網站的鏈接。

定義完數組後,我們使用內置的 shuffle() PHP函數來隨機顯示贊助商的順序。

demo.php - 第 2 部分

// Looping through the array:

foreach($sponsors as $company)
{
    echo'
        <div class="sponsor" title="Click to flip">
            <div class="sponsorFlip">
                <img src="img/sponsors/'.$company[0].'.png" alt="More about '.$company[0].'" />
            </div>

            <div class="sponsorData">
                <div class="sponsorDescription">
                    '.$company[1].'
                </div>
                <div class="sponsorURL">
                    <a href="'.$company[2].'">'.$company[2].'</a>
                </div>
            </div>
        </div>

    ';
}

上面的代碼可以在demo.php中找到 .它基本上循環通過洗牌的 $sponsors 數組並輸出我們在第一步中討論的標記。注意數組的不同元素是如何插入到模板中的。

第 4 步 - jQuery

jQuery Flip 插件需要 jQuery 庫和 jQuery UI .因此,在頁面中包含這些內容後,我們可以繼續編寫代碼,讓我們的讚助商牆栩栩如生。

script.js

$(document).ready(function(){
    /* The following code is executed once the DOM is loaded */

    $('.sponsorFlip').bind("click",function(){

        // $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):

        var elem = $(this);

        // data('flipped') is a flag we set when we flip the element:

        if(elem.data('flipped'))
        {
            // If the element has already been flipped, use the revertFlip method
            // defined by the plug-in to revert to the default state automatically:

            elem.revertFlip();

            // Unsetting the flag:
            elem.data('flipped',false)
        }
        else
        {
            // Using the flip method defined by the plugin:

            elem.flip({
                direction:'lr',
                speed: 350,
                onBefore: function(){
                    // Insert the contents of the .sponsorData div (hidden
                    // from view with display:none) into the clicked
                    // .sponsorFlip div before the flipping animation starts:

                    elem.html(elem.siblings('.sponsorData').html());
                }
            });

            // Setting the flag:
            elem.data('flipped',true);
        }
    });

});

首先我們綁定一個函數作為 .sponsorFlip 上點擊事件的監聽器 分區。點擊事件發生後,我們檢查是否flipped 標誌是通過 jquery data() 設置的 方法。此標誌是為每個 sponsorFlip 單獨設置的 div 並幫助我們確定 div 是否已經被翻轉。如果是這樣,我們使用 revertFlip() 由 Flip 插件定義的方法。它將 div 返回到之前的狀態。

但是,如果標誌不存在,我們會在元素上啟動翻轉。如前所述,.sponsorData div 包含在每個贊助商 div 中,包含贊助商的描述和 URL,並使用 CSS 隱藏。翻轉開始前,插件執行onBefore 我們在作為參數傳遞的配置對像中定義的函數(第 29 行)。在其中我們更改了 sponsorFlip 的內容 div 到 sponsorData 之一 div,它將徽標圖像替換為有關贊助商的信息。

這樣我們的讚助商翻牆就完成了!

結論

今天我們使用 jQuery Flip 插件為您的網站構建了贊助商牆。您可以使用此示例為您的站點頁面帶來交互性。由於牆的數據是從數組中讀取的,因此您可以輕鬆修改它以使用任何類型的數據庫或存儲。

你怎麼看?您將如何修改此代碼?


Tutorial JavaScript 教程
  1. React Native Firestore:使用自定義掛鉤進行實時更新

  2. Javascript:在同一窗口中打開新頁面

  3. 使用無服務器在 Lambda 容器中使用 ClamAV 掃描文件

  4. 編寫帶參數的箭頭函數

  5. 轉譯你的布爾有效載荷

  6. 從木偶師遷移到劇作家

  7. 收回對您 URL 的控制權!

  1. Rollout 教程:5 分鐘內在你的 React Native 應用程序中進行功能標記

  2. Node.JS 開發人員應避免的 7 大錯誤

  3. Javascript , CSS 時鐘

  4. I WebRTC you - 用 Ja​​vaScript 構建視頻聊天

  5. 1 行凱撒密碼

  6. npm 未在 package.json 中運行腳本

  7. 使用 ReactJS 和 TailwindCSS 構建模態

  1. 面向 2022 年初學者的 Angular 項目創意

  2. 使用 React 和 GraphQL 創建無限加載列表

  3. 使用撤消和重置功能增強您的 React 應用程序

  4. 使用 PYTHON DJANGO 構建 REST API - 第 1 部分 🐍