利用TweenMax針對HTML頁面製作動畫 – jQuery Mobile篇

在Dreamweaver5.5之後多了一個jQuery Mobile面板,主要是利用jQuery來製作一些行動裝置的元素,接下來這篇文章就利用Dreamweaver提供的幾項元素加上TweenMax來製作手機動畫頁面。

因為這篇文章應用到的動畫功能,依舊和前兩篇差不多,所以就直接看範例吧!首先,第一個範例是利用「jQuery 翻轉切換開關」來控制動畫的播放,除了可以從前面的連結看到這個範例之外,也因為這是特別針對行動裝置所設計的案例,大家也可以在手機輸入「goo.gl/LofiK」網址來觀賞,下面是本範例整個網頁的程式碼:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalabke=no, width=device-width" />
    <title>貓咪欣賞</title>
    <link href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css">
    <script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
    <script src="src/minified/TweenMax.min.js"></script>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        #photo {
            text-align: center;
        }

        #selector {
            text-align: center;
            width: 50%;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
    <script language="javascript">
        var playNo = 1; /* 定義目前播放張數變數 */
        function photoPlay() {
            var controler = document.getElementById("flipswitch");
            if (controler.options[controler.selectedIndex].value == "on") {
                clock = setInterval(timer, 5000);
            } else {
                clearInterval(clock);
            } /* 設定每五秒執行timer函數 */
            function timer() {
                var pic = document.getElementById("photo"); /* 利用pic紀錄畫面中ID為photo的元素 */
                playNo++; /* 增加張數 */
                if (playNo > 19) {
                    playNo = 1;
                } /* 設定超過圖片張數後從頭播放 */
                TweenMax.to(pic, 1, {
                    css: {
                        alpha: 0
                    },
                    ease: Expo.easeIn,
                    onComplete: function () {
                        pic.innerHTML = "<img src=photo/photo" + playNo + ".jpg width=300 height=200>";
                        TweenMax.to(pic, 1, {
                            css: {
                                alpha: 1
                            },
                            ease: Expo.easeOut
                        });
                    }
                });
            }
        }
    </script>
</head>
<body onLoad="photoPlay()">
    <div data-role="page" id="page">
        <div data-role="header">
            <h1>貓咪欣賞</h1>
        </div>
        <div data-role="content">
            <div id="photo"><img src="photo/photo1.jpg"></div>
            <div data-role="fieldcontain" id="selector"> <select name="flipswitch" id="flipswitch"
                    onChange="photoPlay()" data-role="slider">
                    <option value="off">關閉</option>
                    <option value="on" selected>開啟</option>
                </select> </div>
        </div>
        <div data-role="footer">
            <h4>©2012 Copyright Stanley Ma Cloud Research.</h4>
        </div>
    </div>
</body>
</html>

接下來的第二個範例在程式上面會比較複雜,因為想要加強上一個範例的互動性,所以在同樣的範例上面增加「上一張」、「下一張」與「播放控制」的功能,可在手機輸入「goo.gl/GyAVt」網址觀賞,如果你仔細看的話,會發現這個範例中呼叫網頁元素的語法有改變,其實既然是利用jQuery來製作,本來就可以利用jQuery所提供呼叫網頁元素的指令來製作會比較方便,總之是因為有了下面這行語法,才可以利用這種方式來呼叫的喔!

<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>

下面是本範例整個網頁的程式碼:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalabke=no, width=device-width" />
    <title>貓咪欣賞</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        #photo {
            text-align: center;
        }

        #selector {
            text-align: center;
            width: 50%;
            margin-left: auto;
            margin-right: auto;
        }

        #count {
            text-align: center;
            width: 50%;
            margin-left: auto;
            margin-right: auto;
            font-size: 12px;
        }
    </style>
    <link href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css">
    <script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
    <script src="src/minified/TweenMax.min.js"></script>
    <script language="javascript">
        var playing = 1; /* 偵測目前是否為播放中的變數(1為播放0為暫停) */
        var playNo = 1; /* 定義目前播放張數變數 */ /* 執行計時器 */
        function photoPlay() {
            clock = setInterval(timer, 5000);
        } /* 計時執行函數 */
        function timer() {
            playNo++; /* 增加張數 */
            checkPlayNo() /* 呼叫檢查張數是否有誤的函數 */ photoSlide(); /* 呼叫動畫切換照片的函數 */
        } /* 動畫切換照片的函數 */
        function photoSlide() {
            var pic = $("#photo"); /* 利用pic紀錄畫面中ID為photo的元素 */
            TweenMax.to(pic, 0.5, {
                css: {
                    alpha: 0
                },
                ease: Expo.easeIn,
                onComplete: function () {
                    pic.html("<img src=photo/photo" + playNo + ".jpg width=300 height=200>");
                    TweenMax.to(pic, 1, {
                        css: {
                            alpha: 1
                        },
                        ease: Expo.easeOut
                    });
                }
            });
            $("#count").html(playNo + " / 19"); /* 更換顯示張數的文字 */
        } /* 檢查張數是否有誤的函數 */
        function checkPlayNo() {
            if (playNo > 19) {
                playNo = 1;
            } else if (playNo < 1) {
                playNo = 19;
            }
        } /* 前往上一張的函數 */
        function prevFn() {
            clearInterval(clock);
            playNo--;
            checkPlayNo() photoSlide();
            photoPlay();
        } /* 前往下一張的函數 */
        function nextFn() {
            clearInterval(clock);
            playNo++;
            checkPlayNo() photoSlide();
            photoPlay();
        } /* 播放控制函數 */
        function controlFn() {
            if (playing == 1) {
                playing = 0;
                $("#controlBtn").html("播放") clearInterval(clock);
            } else if (playing == 0) {
                playing = 1;
                $("#controlBtn").html("暫停") clock = setInterval(timer, 5000);
            }
        }
    </script>
</head>
<body onLoad="photoPlay()">
    <div data-role="page" id="page">
        <div data-role="header">
            <h1>貓咪欣賞</h1>
        </div>
        <div data-role="content">
            <div id="photo"><img src="photo/photo1.jpg"></div>
            <div data-role="controlgroup" data-type="horizontal" id="selector"><a href="#" data-role="button"
                    id="prevBtn" onClick="prevFn()">上一張</a><a href="#" data-role="button" onClick="controlFn()"><label
                        id="controlBtn">暫停</label></a><a href="#" data-role="button" onClick="nextFn()">下一張</a></div>
            <div id="count">1 / 19</div>
        </div>
        <div data-role="footer">
            <h4>©2012 Copyright Stanley Ma Cloud Research.</h4>
        </div>
    </div>
</body>
</html>

希望大家看過這幾篇「利用TweenMax針對HTML頁面製作動畫」的範例之後,可以更順利的創作出自己的網頁。

You may also like...

256,851 Responses

  1. 1win_rjEt表示:

    1win официальный сайт войти https://www.1win8009.ru .

  2. 1win_xyEt表示:

    1 вин официальный сайт регистрация https://1win8009.ru .

  3. Michaelrom表示:

    mexican rx online: mexican online pharmacy – mexican online pharmacy

  4. WalterIcort表示:

    http://medicinefromindia.com/# best india pharmacy

  5. Trefonx表示:

    Быстро заказать диплом о высшем образовании. Покупка официального диплома через надежную фирму дарит массу плюсов. Это решение дает возможность сберечь как личное время, так и серьезные деньги. eniseiskie-zori.ru/forum/topic/poluchenie-diploma-pod-klyuch/#postid-679

  6. Treflca表示:

    Заказать диплом университета. Приобретение диплома ВУЗа через надежную фирму дарит ряд достоинств для покупателя. Это решение дает возможность сберечь как личное время, так и значительные деньги. mvduniversitetpiter.flybb.ru/viewtopic.php?f=9&t=1109

  7. Francisdwema表示:

    Абстинентный синдром, или ломка, – это тяжелое состояние, которое развивается у зависимых после отказа от наркотиков или алкоголя. Он сопровождается сильными физическими болями, судорогами, повышенной тревожностью, бессонницей и эмоциональными перепадами, что может привести к серьезным осложнениям для здоровья. Наркологическая клиника «Здравица» в Ростове-на-Дону предлагает комплексное лечение абстинентного синдрома, используя передовые методики и индивидуальный подход для быстрого восстановления здоровья.
    Ознакомиться с деталями – снятие наркотической ломки краснодар

  8. Cyrushic表示:

    Игнорирование этих симптомов может привести к тяжелым последствиям для здоровья, включая алкогольный психоз и повреждение внутренних органов.
    Получить больше информации – врач на дом капельница от запоя

  9. Michaelrom表示:

    indian pharmacy: indian pharmacy online – medicine courier from India to USA

  10. Лучшие шторы для спокойствия и уюта, выберите стиль, подбираем шторы для загородного дома, теплота и уют, продуманный дизайн, натуральные ткани для штор, шторы для приватности, идеи дизайна штор, как подобрать шторы для спальни в доме за городом, уникальные идеи штор для загородных фасадов, шторы из натуральных тканей, современные механизмы для штор, гармония штор и мебели, шторы как часть интерьера, создайте атмосферу с подходящими шторами, выбор стильных штор для загородного дома, что выбрать для загородного дома, создайте уют с помощью уникальных штор, идеи сезонного оформления окон
    шторы в загородном доме шторы в загородном доме .

  11. Timastus表示:

    услуги по продаже аккаунтов маркетплейс аккаунтов

  12. Lozxstus表示:

    безопасная сделка аккаунтов магазин аккаунтов

  13. mostbet_aiKl表示:

    мостбет скачать приложение на андроид mostbet8007.ru .

  14. 1win_swEt表示:

    1 вин официальный сайт 1win сайта http://1win8009.ru/ .

  15. Dozawtus表示:

    магазин аккаунтов социальных сетей магазин аккаунтов

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。