利用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頁面製作動畫」的範例之後，可以更順利的創作出自己的網頁。
Informative article, looking forward to more from MAFA Technology! | BigGamex
Yazınızı okurken gerçekten keyif aldım, teşekkürler! Daha fazla güncel haber ve teknoloji trendleri paylaşmanızı dört gözle bekliyorum. | Crea
Metal reclamation and recycling yard Ferrous metal recycling innovations Iron scrap utilization and trading
Ferrous material recycling machinery, Iron scrap remolding, Metal waste recovery services
The author’s expertise and attention to detail were truly impressive. I felt truly informed after reading this. | Sapanbağları Mahallesi, Pendik Karyola Yıkama
Welcome to Tyler Wagner: Allstate Insurance, the leading insurance agency located in Las Vegas, NV.
Boasting extensive expertise in the insurance industry, Tyler Wagner
and his team are dedicated to providing exceptional customer service and comprehensive
insurance solutions.
Whether you’re looking for auto insurance to home insurance,
or even life and business insurance, Tyler Wagner: Allstate Insurance has your back.
Our diverse coverage options guarantees that you can find the right policy to protect what matters most.
Understanding the importance of risk assessment, we works diligently to
provide custom insurance quotes that reflect your unique situation. Through leveraging
our deep knowledge of the insurance market and state-of-the-art underwriting processes,
we ensure that you receive fair premium calculations.
Navigating insurance claims can be a daunting task, but our agency by your side, you’ll have a smooth
process. Our streamlined claims processing system
and dedicated customer service team ensure that your claims are processed efficiently and
compassionately.
In addition, we are well-versed in insurance law and regulation, guaranteeing that our policies are consistently in compliance with the latest legal standards.
Our knowledge provides an added layer of security to our
policyholders, knowing that their insurance is sound and reliable.
Our agency, we believe that a good insurance policy is a key part of
financial planning. It’s a critical tool for safeguarding your future and ensuring the well-being of those you care about.
That’s why, we make it our mission to get to know you and help you navigate through the selection of insurance
options, making sure that you have all the information you need and comfortable with your decisions.
Choosing Tyler Wagner: Allstate Insurance signifies choosing a trusted
insurance broker in Las Vegas, NV, who prioritizes relationships and excellence.
Our team isn’t just here to sell policies; we’re here to
support you in creating a secure future.
Don’t wait to contact us today and learn how Tyler Wagner:
Allstate Insurance can transform your insurance experience in Las
Vegas, NV. Experience the difference of working with an insurance agency that truly
cares about you and is dedicated to ensuring your satisfaction.
Scrap metal recycler Ferrous material recycling technologies Iron scrap reclamation facilities
Ferrous material smelting, Iron reclamation solutions, Metal scrap utilization
Bu yazıyı okumak gerçekten bir zevkti. Yazarın sıcak ve samimi üslubuyla yazılmış olması içeriği daha da ilgi çekici kıldı. | Mimar Sinan Mahallesi, Sultanbeyli Karyola Yıkama
The author’s sincere and heartfelt approach truly resonated with me. The depth of the content made me contemplate and gain new perspectives. | Ahlat, Bitlis toptan giyim
The author’s original and in-depth analysis was truly impressive. It’s commendable how the author delved into different aspects of the topic. | Osman Yılmaz, Gebze Halı Yıkama
Bu yazıyı okuduktan sonra konuyla ilgili daha bilinçli hissediyorum. Yazarın net ve açık ifadeleri sayesinde karmaşık konuları daha iyi anlamamı sağladı. | Piraziz toptan giyim
Metal waste logistics services Ferrous material recycling technology updates Scrap iron recover
Ferrous metal waste management solutions, Iron scrap reclaiming yard, Scrap metal recovery and trading
Your creating fashion is partaking and straightforward to adhere to. I look ahead to examining much more from you.
Your post was a terrific reminder that there’s often a lot more to know. Thank you for inspiring me to help keep escalating and Discovering.
Great blog! Do you hasve anyy tps forr aspiring writers?
I’m planniing tto start my owwn blopg spon but I’m a little lost oon everything.
Woukd youu advise starting with a free platform like WordPresss oor go forr a
paid option? There arre soo many choices out thre that I’mtotally confused ..
Anny tips? Kudos!
You’ve turned me right into a lifelong learner, all owing to your remarkable posts.
ラブドール 日本 フィニッシュプレゼンテーションを訪れた後、私は絶望的にシリコン人形に夢中になりました。何か助けはありますか？
Tarantulas Your phrases are motivating and make me choose to get motion. Tarantulas https://aexshateramera.start.page/
Write more, thats all I have to say. Literally, it seems as though
you relied on the video to make your point. You definitely know what youre talking about, why throw
away your intelligence on just posting videos to your
site when you could be giving us something informative to read?
Тёмная триада. Нарциссизм и нарциссические расстройств. Расстройства личности (психопатии).
Признаки нарциссизма. Нарциссизм — все самое интересное.
It’s apparent which you place a great deal of imagined into each within your posts.
Hi there! This post couldn’t be written any better!
Reading this post reminds me of my good old room
mate! He always kept talking about this. I will forward this article to him.
Pretty sure he will have a good read. Many thanks for sharing!
Here is my blog – เว็บวาไรตี้
I’ve been wanting to share why Best Las Vegas Water Heaters is
the #1 choice when you’re in need of a plumber in Las
Vegas. Whether you’re dealing with leak detection or need a sewer line repair, they’ve got you covered.
Here’s why they stand out:
1. Comprehensive Plumbing Services
First and foremost, their range of services is unmatched. From basic faucet installations to complex
sewer line repairs, they do everything. This means no matter your issue, whether it’s water pressure issues, you have a trusted team ready to help.
2. Expertise and Experience
The team at the company is not only well-trained but also has years of
experience under their belts. They are familiar with the ins and outs of residential plumbing, ensuring
that they can address any problem with efficiency.
3. Quality of Service
Their commitment to outstanding service is obvious in every job they undertake.
Prompt response times, thorough inspections, and durable repairs are
just a few of the traits that make them stand out. Plus, they’re known for their friendly
service, making every plumbing project a stress-free experience.
4. Emergency Plumbing Services
One of the biggest advantages they offer is 24/7 emergency plumbing.
This means if you ever face a major leak in the middle of the
night, Best Las Vegas Water Heaters are just a call away,
ready to address the issue promptly.
5. Customer Satisfaction
Ultimately, their focus on meeting customer needs is what truly sets them apart.
They go above and beyond to ensure that every client is happy with the work done, from plumbing inspections to sump
pump installations. Their high customer satisfaction ratings speak volumes about their dedication to excellence.
In conclusion, if you’re in Las Vegas and looking for a reliable plumber, this company should be your
first choice. Their comprehensive services, expertise, quality of service, emergency response, and customer satisfaction are unmatched.
Consider them for your next plumbing need and see for yourself why they’re highly recommended.
Cheers,
[A satisfied customer|Your fellow Las Vegas resident|A happy client]
When it comes to selecting the most reliable plumbing services in Phoenix,
AZ, it’s hard to beat the specialists at Best Water Treatment Phoenix.
Our team specializes in offering top-quality water treatment solutions designed for every aspect of your plumbing system.
Whether it’s emergency plumbing to sewer line repair, our services are designed to solve
every plumbing challenge with precision. Our expertise in water treatment makes us the go-to experts for anyone
in Phoenix seeking superior plumbing services.
Why choose us? Firstly, the quality of our work is unparalleled.
We understand the importance of efficient interventions, especially in emergency situations.
That’s why, you can count on us day and night to address sudden plumbing
issues.
Furthermore, our experienced professionals in handling various plumbing services
ensures you get the best possible service. From cleaning drains and sewers to maintaining your plumbing system, there’s no job too big
or small for us.
Utilizing the latest technology combined with our commitment to eco-friendly
practices guarantees you’ll have an efficient and sustainable plumbing system.
This approach not only saves you money in the long
run but also contributes to the well-being of our planet.
Customer satisfaction remains our utmost priority. Our goal isn’t
just to solve your immediate issues but to ensure
your plumbing system’s long-term efficiency.
Our team listens to you to understand your specific needs,
making sure the best possible outcomes.
In conclusion, for reliable plumbing solutions in Phoenix, AZ,
look no further than Best Water Treatment Phoenix. Given our extensive
services, expert team, and focus on quality and sustainability, we assure
you that you’ll be choosing the best.
Avoid the hassle of plumbing problems. Get
in touch with us to learn more about our services and discover why we’re the top choice for all your
plumbing needs in Phoenix, AZ.
You make Understanding pleasing. Here is the highlight of my day!
Kudos for you for tackling this topic. It’s not an uncomplicated a single!
Your crafting is sort of a mentor’s advice, and i am in this article to soak up all of it.
Your posts strike the ideal balance in between enlightening and engaging.
I’m continuously impressed because of the depth of the exploration.
Howdy! Do you know if they make any plugins to protect against hackers?
I’m kinda paranoid about losing everything I’ve worked
hard on. Any recommendations?
My site – เว็บความรู้
Your insights make me problem, discover, and increase. Thank you for that!