利用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...

238,727 Responses

  1. What’s The Reason Everyone Is Talking About L Shape Single Beds
    Today Bunk bed desk combo

  2. 9 . What Your Parents Teach You About I Lock My Keys In The Car i lock my keys In the car

  3. Why Couch Sets For Sale Will Be Your Next Big Obsession?
    Couches For Sale Under $350

  4. Best Vibrating Panties Tools To Ease Your Daily Life Best Vibrating
    Panties Trick Every Individual Should Know Vibrating panties Orgasm

  5. Если вы искали где отремонтировать сломаную технику, обратите внимание – выездной ремонт бытовой техники в барнауле

  6. 5 Common Phrases About Upvc Door Lock Replacement You Should Stay Clear Of upvc Windows doors

  7. ev taşıma表示:

    Ev Taşıma | Taşınma sürecinde dikkat edilmesi gereken noktaları bu kadar net bir şekilde açıkladığınız için teşekkürler. Kozcuoğlu Ev Taşıma olarak, müşterilerimizin bu süreçte stressiz bir deneyim yaşaması için buradayız.

  8. The Top Anal Sex Toys Online Store Tricks For Changing Your Life Top Anal Sex Toys – Djurhuus-Lauritsen.Blogbright.Net,

  9. Если вы искали где отремонтировать сломаную технику, обратите внимание – сервис центр в барнауле

  10. How To Determine If You’re Ready To Go After Hyundai I10 Key Replacement How To Start Hyundai Veloster With Dead Key Fob

  11. Jessewrify表示:

    The Importance of Oscillation Control Tools in Mechanical Systems
    Within industrial environments, machines and rotating systems serve as the core of manufacturing. However, one of the most frequent concerns which can obstruct their efficiency along with durability is oscillation. Vibrations might bring about a array of complications, such as decreased perfection along with performance to heightened damage, finally causing high-cost interruptions and repairs. This is when resonance control systems becomes necessary.

    Why Oscillation Control proves Critical

    Vibration inside machinery might bring about numerous adverse consequences:

    Reduced Operational Productivity: Excessive vibration can lead to discrepancies and imbalance, lowering the performance in the equipment. Such can bring about reduced production times and elevated power consumption.

    Heightened Erosion: Ongoing oscillation accelerates overall deterioration of machine components, bringing about more frequent upkeep and a potential for unanticipated unexpected issues. Such a scenario not only raises maintenance expenses but also reduces the lifespan of the equipment.

    Security Concerns: Excessive vibrations may introduce considerable safety risks both to the machinery and the machinery as well as the operators. In extreme situations, severe cases, these can result in devastating equipment breakdown, jeopardizing operators and causing considerable devastation in the site.

    Accuracy and Quality Challenges: Within sectors that require exact measurements, for example production and aviation, resonance might lead to flaws in the production process, causing faulty goods and more waste.

    Reasonably Priced Solutions for Vibration Regulation

    Putting money in the vibration management tools is not only essential and also a sound investment for any business involved with machinery. Our cutting-edge vibration regulation equipment are engineered to mitigate vibrations in any machine as well as rotational systems, guaranteeing smooth and productive processes.

    What distinguishes these apparatus from others is its reasonable pricing. We understand the necessity of keeping costs low within the modern competitive marketplace, and for that reason our offerings include high-quality vibration management solutions at prices that are affordable.

    By selecting our systems, you aren’t simply preserving your mechanical systems as well as improving its productivity but also investing in the long-term success of your company.

    Final Thoughts

    Vibration control proves to be a necessary element of maintaining the efficiency, safety, and lifetime of your machinery. Through our affordable vibration control equipment, you can be certain your operations operate seamlessly, your products maintain top quality, along with all personnel stay safe. Never allow resonance jeopardize your machinery—make an investment in the correct apparatus now.

  12. Saab 93 Key Replacement Tips From The Top In The Business saab Key fob Programming

  13. Jessewrify表示:

    The Significance of Vibration Regulation Systems in Mechanical Systems
    Across industrial contexts, equipment and spinning devices act as the support of manufacturing. Yet, one of the most common challenges which might impede the performance along with longevity exists as resonance. Resonance may lead to a series of problems, ranging from lowered exactness as well as productivity leading to elevated erosion, in the end bringing about expensive delays along with maintenance. Such a situation is where vibration regulation apparatus becomes essential.

    Why Vibration Management is Necessary

    Vibration within machines may result in multiple negative impacts:

    Lowered Production Productivity: Excessive oscillation might bring about imbalances and unbalance, decreasing the productivity in the machinery. Such could result in delayed production times along with higher electricity usage.

    Elevated Wear and Tear: Continuous vibration increases the damage of machinery parts, causing more regular servicing and an potential of unforeseen malfunctions. This not only heightens maintenance expenses and limits the lifetime for the equipment.

    Security Dangers: Unchecked vibrations can bring considerable security risks for both the machines as well as the workers. In severe cases, severe cases, such vibrations could cause devastating equipment failure, threatening workers along with bringing about considerable devastation to the premises.

    Precision and Quality Challenges: For sectors that rely on exact measurements, for example industrial sectors as well as space industry, vibration could lead to inaccuracies with production, leading to faulty goods and more waste.

    Reasonably Priced Alternatives to Vibration Regulation

    Investing in the oscillation control apparatus is not just a necessity but a smart decision for all businesses that any company that relies on mechanical systems. Our advanced vibration mitigation tools are intended to mitigate resonance in various equipment as well as rotating equipment, ensuring smooth along with efficient functioning.

    One thing that distinguishes our tools above the rest remains its affordability. We understand the importance of affordability inside the competitive market of today, which is why our offerings include premium vibration management solutions at pricing that remain budget-friendly.

    Opting for these tools, you aren’t simply preserving your equipment as well as enhancing its performance but also investing towards the sustained performance of your business.

    Final Thoughts

    Oscillation control proves to be a vital component in ensuring the effectiveness, safety, and longevity of your machines. With these reasonably priced oscillation control systems, it is possible to ensure your processes run smoothly, all manufactured items maintain top quality, and your workers stay secure. Don’t let oscillation jeopardize your company—make an investment in the proper tools now.

  14. This Is The Myths And Facts Behind Private ADHD Assessment Near Me private adhd assessment london cost

  15. Jessewrify表示:

    The Cruciality of Vibration Mitigation Tools in Industrial Equipment
    Within industrial environments, equipment and rotational equipment are the backbone of output. However, a of the most common challenges which might affect the efficiency along with durability exists as vibrations. Oscillation can lead to a array of issues, including reduced perfection and performance leading to heightened wear and tear, in the end leading to expensive interruptions as well as repairs. This is why resonance control equipment is necessary.

    The Reason Vibrations Mitigation is Important

    Resonance in machines can cause numerous adverse consequences:

    Lowered Production Productivity: Excessive oscillation might cause imbalances and unbalance, decreasing total productivity of such devices. Such could cause slower production times along with increased energy use.

    Increased Damage: Continuous resonance increases the wear and tear of mechanical parts, leading to increased repairs along with an potential for unexpected failures. Such a scenario not only elevates operational costs as well as decreases the longevity of the devices.

    Security Risks: Uncontrolled oscillation could introduce major security risks for the machinery and the machinery as well as the operators. In severe cases, extreme situations, this can lead to catastrophic system collapse, threatening workers as well as causing widespread harm to the facility.

    Precision and Quality Challenges: For fields that demand high precision, such as industrial sectors as well as space industry, vibrations could lead to inaccuracies with the manufacturing process, causing faulty goods and increased waste.

    Reasonably Priced Approaches for Vibration Management

    Investing in the oscillation control apparatus is not merely a necessity but a prudent choice for any business any company dependent on mechanical systems. We offer modern vibration control systems are designed to remove resonance in various machinery or rotational systems, guaranteeing smooth as well as efficient operations.

    One thing that differentiates these systems above the rest is its reasonable pricing. It is recognized that the necessity of keeping costs low in the competitive market of today, which is why we have high-quality vibration regulation systems at rates that are affordable.

    Through selecting our offerings, you are not just protecting your equipment along with enhancing its performance as well as putting resources into the sustained success of your operations.

    Conclusion

    Oscillation control is an essential aspect of maintaining the efficiency, security, as well as durability of your machines. With our cost-effective vibration control equipment, it is possible to ensure that your operations run smoothly, your products maintain high quality, and your workers stay safe. Don’t let vibrations compromise your business—invest in the appropriate systems immediately.

  16. 5 Laws That Anyone Working In Window Glass Replacement Should Be Aware Of replacement Glass near Me

  17. bmw key fob表示:

    It’s Time To Extend Your Replace Bmw Key Options bmw key fob

  18. This Is How Locksmith Car Will Look In 10 Years’ Time Locksmith Car keys Near me

  19. Delilah表示:

    The 10 Scariest Things About Replacement Windows Birmingham
    replacement windows birmingham (Delilah)

  20. Jessewrify表示:

    The Importance of Resonance Control Tools in Machinery
    Across manufacturing settings, machinery and spinning machinery act as the support of manufacturing. However, a of the most frequent problems that may obstruct the functionality along with lifetime is vibration. Vibration might lead to a variety of issues, including minimized precision and performance to greater erosion, eventually bringing about high-cost downtime and maintenance. This scenario is the point where vibration control tools proves to be essential.

    Why Vibrations Mitigation remains Important

    Oscillation inside equipment may bring about multiple negative outcomes:

    Lowered Production Performance: Excessive vibration could bring about imbalances as well as imbalance, lowering the efficiency of the systems. This can lead to slower output times and increased energy consumption.

    Elevated Wear and Tear: Ongoing vibration increases the damage in equipment components, resulting in increased maintenance and an risk for unanticipated unforeseen malfunctions. Such a situation not only elevates operating costs and decreases the longevity in your devices.

    Safety Hazards: Unmanaged oscillation can pose considerable security risks for both the machinery along with the operators. In severe cases, severe cases, it could bring about catastrophic system collapse, endangering personnel and leading to significant destruction to the environment.

    Exactness and Manufacturing Quality Concerns: Within businesses that require high accuracy, for example manufacturing and aerospace, resonance may cause discrepancies with production, producing faulty goods along with greater waste.

    Affordable Solutions for Oscillation Control

    Putting money in the resonance control equipment remains not only essential but a prudent choice for any business that relies on machinery. Our cutting-edge vibration mitigation tools are engineered to reduce oscillation from all mechanical systems or spinning equipment, ensuring smooth and efficient operations.

    One thing that sets our systems apart is its affordability. It is recognized that the value of keeping costs low inside the current market, which is why we provide premium vibration regulation systems at costs that remain budget-friendly.

    Through selecting our systems, you aren’t simply securing your machinery and increasing its performance you’re also putting investment in the long-term achievement of your business.

    Conclusion

    Vibration management proves to be a necessary aspect of maintaining the operational performance, safety, along with lifespan of your machinery. Through our economical vibration control equipment, you can make sure your production run smoothly, your products maintain high quality, and your employees are protected. Never let vibrations jeopardize your business—make an investment in the proper tools today.

  21. Jessewrify表示:

    The Cruciality of Vibration Management Equipment in Machines
    Across industrial settings, machinery and rotating equipment act as the support of manufacturing. Nonetheless, a of the most common concerns which might obstruct the operation along with lifespan is resonance. Resonance might bring about an variety of issues, ranging from lowered perfection as well as performance resulting in increased damage, finally resulting in expensive downtime and maintenance. This is where vibration regulation tools is essential.

    Why Vibrations Mitigation is Important

    Vibration inside machines might bring about numerous detrimental effects:

    Minimized Operational Efficiency: Exaggerated vibration could result in misalignment as well as unbalance, lowering the effectiveness in such machinery. This can result in delayed production schedules along with elevated energy consumption.

    Greater Wear and Tear: Persistent vibration speeds up overall wear and tear in machinery parts, resulting in increased servicing and the possibility of unexpected unforeseen malfunctions. This not only elevates operating costs but also limits the durability for your devices.

    Security Risks: Unmanaged vibration might bring considerable safety concerns for the machinery and the equipment and the operators. In severe cases, severe cases, these could result in devastating system collapse, endangering workers along with leading to considerable destruction across the premises.

    Precision and Quality Problems: For sectors that depend on high accuracy, including production or space industry, vibrations could cause errors with manufacturing, leading to flawed products and increased waste.

    Affordable Options for Vibration Management

    Investing into resonance control systems remains not just necessary but a smart decision for any organization that relies on machinery. We offer advanced vibration mitigation tools work to designed to remove oscillation in various mechanical systems or spinning equipment, guaranteeing uninterrupted along with productive processes.

    What distinguishes these apparatus apart is its economic value. We understand the necessity of keeping costs low within the current market, and for that reason we have high-quality vibration control solutions at costs that are affordable.

    By choosing our systems, you’re not only protecting your machines and increasing its operational effectiveness as well as putting investment into the long-term success of your company.

    Conclusion

    Vibration management is a critical component of maintaining the operational performance, protection, and durability of your industrial equipment. Using our affordable vibration control equipment, you can make sure your operations function efficiently, your products maintain high quality, as well as your workers stay safe. Don’t allow resonance compromise your company—put money in the proper tools today.

  22. The 3 Largest Disasters In Local Auto Locksmith History cheap Auto locksmith near me

  23. 037810表示:

    The Hidden Secrets Of Pushchair Cheap 037810

  24. Jessewrify表示:

    vibration analysis
    The Cruciality of Vibrations Regulation Apparatus in Machines
    In manufacturing sites, equipment and rotational devices are the backbone of production. Yet, one of the most prevalent challenges that could affect its efficiency and longevity exists as vibration. Oscillation can bring about a array of issues, from lowered exactness as well as efficiency resulting in increased erosion, eventually bringing about high-cost downtime and maintenance. This is the point where vibration regulation systems proves to be necessary.

    The Reason Vibration Management is Necessary

    Oscillation inside machines might cause several negative effects:

    Minimized Operational Performance: Excessive vibrations could bring about imbalances along with instability, minimizing overall performance in such equipment. This could cause slower production schedules along with elevated energy consumption.

    Elevated Deterioration: Ongoing vibrations accelerates the erosion to equipment components, resulting in more frequent upkeep as well as the potential for unanticipated unexpected issues. Such a scenario not only heightens operating costs as well as shortens the lifetime for the existing systems.

    Protection Dangers: Unchecked resonance can pose considerable safety concerns both to both the equipment and the machinery as well as the operators. In, extreme situations, these can lead to cataclysmic equipment breakdown, endangering personnel and bringing about extensive devastation to the facility.

    Precision along with Quality Issues: For industries where rely on precise production, including industrial sectors and space industry, vibrations can result in discrepancies in the manufacturing process, causing defective products along with increased waste.

    Economical Solutions to Vibration Regulation

    Investing into vibration control tools is not just essential but a prudent choice for any industry that uses machines. The offered state-of-the-art vibration regulation equipment are built to mitigate vibrations from various machine and rotating equipment, providing seamless and efficient operations.

    What differentiates our apparatus apart remains its economic value. It is recognized that the value of cost-effectiveness in the modern competitive marketplace, which is why we have high-quality oscillation control tools at costs that are affordable.

    By choosing our offerings, you aren’t simply protecting your equipment and increasing its productivity you’re also investing into the sustained success of your business.

    Conclusion

    Vibration management is a necessary factor in ensuring the efficiency, safety, as well as longevity of your machines. Using our cost-effective oscillation control systems, you can ensure that your operations operate seamlessly, your products remain top-tier, as well as your employees stay safe. Do not let vibrations affect your machinery—invest in the appropriate systems today.

  25. cheap表示:

    Glass Patio Door Repair: The Good, The Bad, And The Ugly cheap

  26. 10 Apps To Help Manage Your Mesothelioma Attorney mesothelioma law
    firm [Freonwine49.bravejournal.Net]

發佈留言

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