利用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頁面製作動畫」的範例之後，可以更順利的創作出自己的網頁。
Which dryer and washing machine is the best washer dryer uk – https://forum.tiranatural.club/ -?
This article will review the Samsung WD10T634DBH, LG WM3488HW, Electrolux’
EFLS527UTT, and Haier HLC1700AXS.
It is important to assess your requirements before looking for an cartridge with a 510 cbd vape cartridges near me CBD
cartridge. CBD is a lawful substance in the UK However, how can you know which pens best suit your needs?
Which Washer dryer cheap and
dryer is the most efficient? This article will look at the Samsung WD10T634DBH LG WM3488HW, Electrolux EFLS527UTT and Haier HLC1700AXS.
If you want to use CBD to treat pain, you should look for brands that contain more of
the substance. If you have concerns about the safety of cbd Cartridges Refill, it’s crucial that the product
is thoroughly tested by third parties.
erythromycin brand name https://erythromycin1m.com/#
Hi there! This is kind of off topic but I need some advice from an established blog.
Is it hard to set up your own blog? I’m not very
techincal but I can figure things out pretty quick.
I’m thinking about making my own but I’m not sure where to begin. Do you have any points or suggestions?
Thanks
Feel free to surf to my homepage: best only Fans account
%%
Review my blog post; fucking sex dolls (Harry)
%%
Have a look at my website; ddos mitigation, video.Kangwon.ac.kr,
Looking to buy a new dryer? Which one should you select?
This article will review the features of a few the most well-known Best Integrated Washer Dryer washer dryers.
If you’re looking for a quick short term loan-term loan, but don’t have
a high credit score, you can still be approved online.
MoneyMutual is the largest US lending network. You can apply online for a loan.
Online gambling has become very popular in the last 10 years.
In 1996, there were only fifteen websites. In 1997 the number was more than 200 websites.
Have a look at my web blog … bet (cairngorms-leader.org)
magnificent points altogether, you just gained a emblem new
reader. What would you suggest in regards to your submit that you just made some days ago?
Any positive?
Also visit my page – Free onlyfans subscriptions accounts
It is legal to play poker online however, you must ensure that you’re legally able to play.
Poker sites online require that players are at minimum 18 years old before they can play.
Also visit my site Experience (https://grassrootsnetroots.Org)
A dryer and Washer Dryer Cheap (https://Dadresi.Com) in one is an ideal appliance for
busy households. They allow you to wash and dry your laundry in one unit.
The washers and dryers are typically 23 inches wide by 29 inches tall and 22 to 30
inches deep.
If you’re looking for an integrated washer dryer, you’ll need to consider a number of factors.
The appliance should be hidden behind furniture. They
should also be placed between units.
%%
Also visit my webpage – fuck A Doll
%%
Here is my blog post … cdn service providers,
Jared,
Online poker comes with many advantages. There are no waiting lists
or second-hand smoke and you can play whenever you’d like.
You can also enjoy a wide range of games. Plus, you can play your favorite games
from the comfort of your own home.
my site :: gaming (koonyagarlicfestival.com)
Online betting has a number of advantages for both bookmakers and the bettors.
These betting websites allow gamblers to bet on their
favourite sports and also make money. They offer a range of options for
depositing.
Here is my blog; Games [Lindsaysnowdesign.Com]
You might consider the payday Uk loans payday loan option should you be in the
middle of an emergency. These short-term
loans are available with high interest rates, however they are designed for those in urgent
situations.
%%
my web page … Doll Fucking
There are many paydayloans online sources for a payday loan. This article will explore the advantages and disadvantages of various options.
It also contains customer reviews, conditions to qualify
rates, conditions to qualify, and fees.
sexdolls For sale are the ideal solution for couples who are on a tight
budget. The only thing you need to spend money
on are the accessories and the doll itself. Possessing your own sex
doll will help you feel fulfilled while also easing loneliness.
Online loan applications are quick and simple. The application page
clearly lists your monthly payments as well as your repayment amounts.
There aren’t any hidden charges and the total
amount is always clearly stated.
my website; payday loans in uk
This kind of loan might be convenient but it can also be detrimental for people with lower incomes.
Many workers struggle to pay back these Payday uk loans and end up stuck
in a cycle of debt.
If you’re faced with an emergency, you may
be interested in taking out a UK loans payday.
These short-term loans have high interest rates, but they’re specifically designed for those in need of cash.
%%
Also visit my site fucking small sex doll – Melinda –
A payday loan might be the perfect solution for you, regardless of whether you require quick cash or have an extremely
tight budget. best payday loans uk loans are quick-term financial solutions for
sudden financial issues. They can be accessed in just two hours.
Online (Moviepostr.Com)
gambling has become very popular over the last decade. In 1996,
there were just fifteen websites. In 1997, there were more than 200 websites.
In 1998 a Frost & Sullivan report stated that online gambling generated $830
million in revenues.
If you’re considering applying for an online payday online loans (Millie) loan it is recommended to be aware of your
options prior to signing on the paper. Rates the repayment options, the lender’s reputation, and other aspects are all crucial.