利用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頁面製作動畫」的範例之後，可以更順利的創作出自己的網頁。
I was excited to uncover this website. I wanted to thank you for ones
time just for this wonderful read!! I definitely
loved every part of it and i also have you book-marked to
see new stuff in your web site.
Feel free to visit my web-site :: blw99 (Mauricio)
Понятие о психике и ее эволюции.
Тест пройти. Константность и предметность восприятия. Тест какой у меня тип привязанности. Воспоминания фильм смотреть онлайн бесплатно в хорошем качестве 2021.
Информация о личности человека. Тесты на отклонения в психике.
Воспоминания о прошлой любви.
I quite like reading a post that will make people think.
Also, thanks for permitting me to comment!
Thanks for another informative blog. Where else could I am getting that kind of info written in such an ideal
manner? I have a project that I’m just now working on, and I’ve been at the look out for such information.
my blog – ทัวร์ญี่ปุ่น บริษัทไหนดี
Fascinating blog! Is your theme custom made or did
you download it from somewhere? A theme like yours with
a few simple tweeks would really make my blog jump out.
Please let me know where you got your design. Appreciate it
Hello my friend!
I’d like to say that this article is fantastic, exceptionally well-written, and covers almost all the crucial information. I would love to check out more posts like this.
I must thank you for the efforts you have put in penning
this site. I’m hoping to view the same high-grade
content by you in the future as well. In fact, your creative writing abilities has motivated me to get my own site now 😉
At this time it appears like Expression Engine is the preferred blogging platform available right
now. (from what I’ve read) Is that what you are using on your
blog?
My web page … blw99 (Del)
WOW just what I was looking for. Came here by searching for blw99 (Dorothy)
Nice weblog here! Additionally your web site so much up very fast!
What web host are you the usage of? Can I get
your associate hyperlink on your host? I wish my website loaded
up as fast as yours lol
my website … blw99 (Lucienne)
I have read so many content concerning the blogger lovers except this post
is really a good post, keep it up.
An interesting discussion is worth comment. I believe that you ought to publish more
on this subject matter, it may not be a taboo subject but usually people don’t discuss such topics.
To the next! Cheers!!
I used to be able to find good advice from your
articles.
Hello, I log on to your blogs regularly. Your humoristic
style is awesome, keep up the good work!
Howdy this is somewhat of off topic but I was wanting to know if blogs use WYSIWYG editors or if you have to manually code with HTML.
I’m starting a blog soon but have no coding know-how so I wanted to get advice from
someone with experience. Any help would be enormously appreciated!
Hey there, You have done a fantastic job. I’ll certainly
digg it and personally recommend to my friends.
I’m sure they’ll be benefited from this web site.
Wow, awesome weblog layout! How lengthy have you ever been blogging for?
you make blogging look easy. The overall look of your website is fantastic, as
smartly as the content!
Heyy there, I thiunk yourr webgsite might bbe havinng bowser compatibility issues.
Whenn I loook att your bloog sitge iin Opera,
it loloks finje bbut when opening inn Internet Explorer, iit hhas some overlapping.
I just wantesd tto give you a quiick hsads up! Other tgen that, wonderful
blog!
Pretty! Thiss was an incredjbly wondsrful post.
Thasnks for providing this info.
Hello! Do yyou uuse Twitter? I’d like too ffollow you if tha would be okay.
I’m definitsly enjoying youjr blog and lolk forward too nnew updates.
wonderful publish, vvery informative. I wonder whyy the otheer specjalists off thiis sector do noot understand this.
Yoou should continue ylur writing. I’m confident,
you habe a huge readers’ base already!
Wow! At laat I gott a webpage from whbere I know hhow too
genuinely take helopful data rearding myy study and knowledge.
Howdy! I knw this is somewbat off topic but I wass wondering if you knew whee I could find a captcha plugin ffor myy coomment form?
I’m usig thee same blog platform ass yours and I’m haviing problems finding one?
Thanks a lot!
Mayy I simply say what a relef to discovr a persopn thyat actually understnds
wwhat they’re discussin oon thhe net. Youu dwfinitely underetand hhow too briung a problem to light
and make it important. More and more prople need too cgeck this ouut annd understand this sside of your
story. It’s suurprising you’re not more popuoar because you surely possess the gift.
Rigvht now it looks lije Expression Engine iss the bestt bloggin platform vailable right now.
(from hat I’ve read) Is thjat what you aree uding on your
blog?
Have you ever considered about including a little bit more than just your articles?
I mean, what you say is fundamental and all.
Nevertheless think of if you added some great images or
videos to give your posts more, “pop”! Your content
is excellent but with images and video clips, this blog could undeniably be one of the most
beneficial in its field. Excellent blog!
Helo everyone, it’s myy fist pay a quick visut at tbis website, and post is really fruitful foor me, keep up posting these content.
Hi my friend! I wish to say that this post is awesome, great written and include
approximately all significant infos. I’d like to look more posts like this .
My web blog – Pinoy SEO Services Philippines
Howdy! I could have sworn I’ve visited this site before but
after browsing through a few of the articles I realized it’s new to me.
Anyways, I’m certainly happy I stumbled upon it
and I’ll be bookmarking it and checking back frequently!
Hello There. I found your blog using msn. This is an extremely well written article.
I will make sure to bookmark it and return to read more of your useful information. Thanks for the post.
I will definitely return.