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

使用 jQuery 和 CSS 製作一個流暢的移動應用網站

作為一名網絡開發人員,您必須將創造力和對細節的關注帶到您的工作中。給訪客留下持久印象的往往是小事。無論是可愛的人物插畫,還是別具一格的幻燈片,讓人印象深刻的往往不是你呈現的信息,而是你呈現它的方式。

今天我們正在為一個虛構的移動應用程序製作一個完整的 jQuery 和 CSS 網站。它將具有語義標記和逐步增強的幻燈片效果。它將允許用戶查看運行該移動應用程序的四款最流行的智能手機。

第 1 步 - XHTML

在構建網站時,以語義方式放置代碼很重要。這將包括將標籤用於它們應該用於的用途。您應該使用標題作為標題、段落作為文本(而不是通用 div)和列表(如果適用)。

mobileapp.html

<div id="page">

    <h1 id="logoh1"><a href="/" id="logo">MobileApp - the most useful mobile app!</a></h1>

    <div id="phoneCarousel">
        <div class="previous arrow"></div>
        <div class="next arrow"></div>

        <div id="stage">
            <img id="iphone" class="default" src="img/phones/iphone.png" width="270" height="400" alt="iPhone" />
            <img id="nexus" src="img/phones/nexus_one.png" width="270" height="400" alt="Nexus One" />
            <img id="nokia" src="img/phones/nokia.png" width="270" height="400" alt="Nokia" />
            <img id="blackberry" src="img/phones/blackberry.png" width="270" height="400" alt="BlackBerry" />
        </div>
    </div>

    <img class="availableAppStore" src="img/available_on_the_appstore.png" width="230" height="80" alt="Available on the Appstore" />

    <div class="text">
        <h3><img src="img/thumb.png" alt="MobileApp" width="114" height="114" class="thumb" />A wonderful app</h3>
        <p>Lorem ipsum dolor sit amet.. </p>
    </div>

    <div class="text">
        <h3><img src="img/thumb.png" alt="MobileApp" width="114" height="114" class="thumb" />More awesome facts</h3>
        <p>Lorem ipsum dolor sit amet.. </p>
    </div>

</div>

這是用於顯示網站的所有標記。 h1 標題包含一個樣式為 logo 的超鏈接(logo 圖像設置為超鏈接的背景,負文本縮進用於隱藏鏈接的文本)。

在此之後我們有 #phoneCarousel div 裡面是箭頭和舞台。稍後您將看到,舞台內的手機圖像使用 jQuery 進行旋轉。

最後,我們有 Appstore 上可用 徽章和兩塊文字。

第 2 步 - CSS

CSS 負責將我們的語義標記轉換為真正的網站。仔細看看 #stage 代碼第二部分中的樣式,因為這些是使動畫成為可能的原因。

styles.css - 第 1 部分

body{
    font-size:14px;
    color:#515151;
    background:url('img/bg.png') repeat-x #f6f8f9;
    font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
}

#logoh1{ margin:40px 0 0;}

#page{
    /* This the main container div */
    width:1000px;
    min-height:700px;
    margin:0 auto;
    background:url('img/bokeh.jpg') no-repeat 0 120px;
    position:relative;
    padding-top:1px;
}

#phoneCarousel{
    /*  This is the carousel section, it
        contains the stage and the arrows */
    height:390px;
    margin:90px auto 120px;
    position:relative;
    width:800px;
}

#phoneCarousel .arrow{
    /* The two arrows */
    width:44px;
    height:44px;
    background:url('img/arrows.png') no-repeat;
    position:absolute;
    top:50%;
    margin-top:-22px;
    left:0;
    cursor:pointer;
}

#phoneCarousel .next{
    /* Individual styles for the next icon */
    background-position:right top;
    left:auto;
    right:0;
}

/* Hover styles */

#phoneCarousel .arrow:hover{
    background-position:left bottom;
}

#phoneCarousel .next:hover{
    background-position:right bottom;
}

在定義了正文樣式之後,我們可以繼續設置 #page 的樣式 div,它將所有東西放在一起。它的背景圖片垂直偏移了120px,所以它與body的背景相匹配,填滿了頁面的整個寬度。

接下來是#phoneCarousel 分區。它應用了相對定位,因此舞台(所有動畫發生的地方)可以正確居中。上一個/下一個箭頭也有樣式。

styles.css - 第 2 部分

#logo{
    background:url('img/logo.png') no-repeat;
    height:40px;
    text-indent:-9999px;
    width:210px;
    display:block;
}

#stage{
    /* The stage contains the animated phone images */
    left:50%;
    margin-left:-350px;
    position:absolute;
    width:700px;
    height:100%;
}

#stage img{
    /* Hiding all the images by default */
    display:none;
}

#stage .default{
    /*  This class is applied only to the iphone img by default
        and it is the only one visible if JS is disabled */
    display:block;
    left:50%;
    margin-left:-135px;
    position:absolute;
}

#stage .animationReady{
    /* This class is assigned to the images on load */
    display:block;
    position:absolute;
    top:0;
    left:0;
}

.text{  margin-top:70px;width:700px;}

.text p,
.text h3{
    padding-bottom:15px;
    line-height:1.4;
    text-align:justify;
}

.text h3{   font-size:30px;}
.text p{    font-size:20px;}

.thumb{ float:left;margin-right:40px;}

.availableAppStore{float:right;}

在樣式表的第二部分,我們繼續#stage 樣式。手機圖片默認是隱藏的,所以如果禁用 JavaScript,用戶不會留下一堆零散的圖片。

正如您將在下一步中看到的,動畫是通過更改頂部和左側 CSS 屬性來實現的。為此,圖像必須絕對定位。這就是為什麼 .animatonReady 使用 jQuery 加載時分配類(如果禁用 JS,則不會應用此樣式)。

最後,我們為文本塊設置樣式,它解釋了我們虛構的 MobileApp 的詳細信息。

第 3 步 - jQuery

當您單擊其中一個箭頭時,會啟動動畫,該動畫使用正弦和余弦計算來移動和縮小圖像,從而產生圓周運動的錯覺。它並不像聽起來那麼複雜,您可以從下面的代碼中自己看到。

script.js

$(document).ready(function(){

    var deg=0;

    /* Storing all the images into a variable */

    var images  = $('#stage img').removeClass('default').addClass('animationReady');
    var dim     = { width:images.width(),height:images.height()};

    var cnt = images.length;

    /* Finding the centers of the animation container: */
    var centerX = $('#stage').width()/2;
    var centerY = $('#stage').height()/2 - dim.height/2;

    function rotate(step,total){
        // This function will loop through all the phone images, and rotate them
        // with "step" degrees (10 in this implementation) till total > 0

        /* Increment the degrees: */
        deg+=step;

        var eSin,eCos,newWidth,newHeight,q;

        /* Loop through all the images: */
        for(var i=0;i<cnt;i++){

            /* Calculate the sine and cosine for the i-th image */

            q = ((360/cnt)*i+deg)*Math.PI/180;
            eSin        = Math.sin(q);
            eCos        = Math.cos(q);

            /*
            /   With the sine value, we can calculate the vertical movement,
            /   and the cosine will give us the horizontal movement.
            */

            q = (0.6+eSin*0.4);
            newWidth    = q*dim.width;
            newHeight   = q*dim.height;

            /*
            /   We are using the calculated sine value (which is in the range
            /   of -1 to 1) to calculate the opacity and z-index. The
            /   frontmost image has a sine value of 1, while the backmost
            /   one has a sine value of -1.
            */

            // eq() extracts the image at the i-th position:

            images.eq(i).css({
                top         : centerY+15*eSin,
                left        : centerX+200*eCos,
                opacity     : 0.8+eSin*0.2,
                marginLeft  : -newWidth/2,
                zIndex      : Math.round(80+eSin*20)
            }).width(newWidth).height(newHeight);
        }

        total-=Math.abs(step);
        if(total<=0) return false;

        // Setting the function to be run again in 40 milliseconds (equals to 25 frames per second):
        setTimeout(function(){rotate(step,total)},40);

    }

    // Running the animation once at load time (and moving the iPhone into view):
    rotate(10,360/cnt);

    $('#phoneCarousel .previous').click(function(){
        // 360/cnt lets us distribute the phones evenly in a circle
        rotate(-10,360/cnt);
    });

    $('#phoneCarousel .next').click(function(){
        rotate(10,360/cnt);
    });
});

要啟動動畫,您只需要調用 rotate 具有兩個參數的函數 - 一個步驟和一個總旋轉,這兩個參數都是數字。 Step 可以是負數,這意味著旋轉以相反的方式運行。每次運行該函數時,total 會隨著 step 的絕對值遞減,一旦達到 0,動畫就會停止。

在這段代碼的很多地方,你可以看到我使用了一個特定的計算 - 360/cnt .這樣做是為了均勻分佈電話(360 是圓圈中的度數)。這樣您就可以添加或刪除圖像,並且它們將被正確地動畫化。

這樣我們的 Slick MobleApp 網站就完成了!

總結

今天我們為一個虛構的移動應用程序製作了一個完整的 jQuery 和 CSS 網站。您可以自由修改代碼並以任何您認為合適的方式使用它。如果您喜歡本教程,請務必訂閱我們的 RSS 源,在 Twitter 上關注我們,或在下面的部分中發表評論。


Tutorial JavaScript 教程
  1. 我用 Next.js 製作了一個 kickass 自動化投資組合網站。這裡是如何。

  2. 將請求跟踪從 React SPA 導出到後端 Opentelemetry 收集器

  3. 延遲加載,為什麼?什麼時候?

  4. VS Code 快速提示:JavaScript 導入自動完成

  5. javascript函數領先砰!句法

  6. 必須有 WEB DEVELOPER 的備忘單

  7. 如何使用 JavaScript 在 localStorage 中保存數據

  1. 反應性能改進

  2. #100DaysOfCode 第 44 天:使用 Electron-packager 為 Node.js 應用程序生成 Window 安裝程序

  3. 動畫:角度方式

  4. 探索 TensorflowJS:使用預訓練的 Handpose 模型製作的劊子手游戲

  5. 如何使用樣式組件在 React/Typescript(上下文 API)中創建主題

  6. NextJS Auth 使用 Prisma 和刷新令牌 (JWT)

  7. Instagram 喜歡使用 React.js 播放/暫停視頻

  1. 反應解釋,解釋

  2. 一件事導致另一件事,我今天構建了自己的靜態站點生成器

  3. Flash Code#1 使用 Vue.js 拖放組件

  4. 如何為 Sanity Studio 製作自定義輸入組件