利用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頁面製作動畫」的範例之後，可以更順利的創作出自己的網頁。
Sure, you can always practice by just standing in front of the drumset until you feel you know what you’re doing, but few of us get into an online forum regularly and see how the different techniques that our favorite musicians use in a song.
This is why we urge you to check out Vrode Sheet Music, it’s a really awesome tool with an easy and friendly user interface to boot. If you want to try before you buy it’s priced just right at under http://demo4.sp12.ru/redirect.php?ssh=1&url=https://cerafreuci.weebly.com
6add127376 ottazach
Make sure to have a complete and up-to-date software antivirus.
Uninstall Colors MiniLab with 3 easy steps
Step 1:
Double-click on the Start button, type Control Panel, and press enter.
Step 2:
In the control panel search for Add/Remove programs and remove it all together.Total hip replacement following femoral neck fracture. A report of two cases treated by arthroplasty.
Total hip replacement following femoral https://www.google.com.eg/url?q=https://tranfootpcomso.weebly.com
6add127376 jardion
What’s more, the application can be licensed with its parent company’s Parallels Desktop ( $595 USD)
Good or bad virtualization -L
Virtualization uses computers that have their physical performance and speed optimized by sharing a single physical machine with one or multiple virtual machines.
Both Xen/xenserver and KVM/libvirt were born out of the need to create an easy way to deploy multiple virtual machines easily. Read more https://toolbarqueries.google.mn/url?q=https://sortfavala.weebly.com
6add127376 kaktris
￭ No other authoring tools are required
￭ Does not need any codecs and dependencies.
￭ Its licenses can be changed (only the MP3 part must be under GNU General Public License).
What’s New
New: 1.5.1
1. Draw mp3 art on the main dialog from now with two methods: “Selected albums list” and “Custom dialog”
2. New web site about the program: https://plodvaithebo.weebly.com
6add127376 halotawn
I’m a Boston native kid who attended public School 11. After going to high school I ended up going to BC in Vermont. I currently attend Becker, where I graduated with a 4.0.
I was taking a year off of school in high school. Me and my sisters took a vacation to AC which was really the beginning of a significant earthquake journey for me. Anyway, we were walking down the stairs and out of the blue I felt the ground shake for a good second. https://tanhamsbeltherm.weebly.com
6add127376 wesbkalk
These are really wonderful ideas in about blogging. You have touched some
good things here. Any way keep up wrinting.
order modafinil 200mg for sale buy generic provigil 200mg order modafinil generic
Support is super impressive and the time it requires to process various requests is very short. We say this because of the fact that we had to open up support ticket for more than a week and were able to close the issue at that given moment.The efficacy of percutaneous irradiation in the management of chronic primary lymphedema with nodular infiltration and extensive lymphangiectasia.
A prospective trial of percutaneous radiation in the treatment of chronic lymphatic edema was done https://fentipifon.weebly.com
6add127376 reopacy
What’s more, it’s a good tool for personal music fans who want to create their own signature sound by playing around with the musical scores.Moms and dads are some of the world’s most accomplished supercurves.
Scientists at the University of California, Los Angeles, compare curves to an algorithm that finds a logarithmic spiral using image analysis, and then runs a whole bunch of computer simulations with it. It turns out that models with quadr https://funcreringbac.weebly.com
6add127376 denhela
This plug-in have very good sound quality, bass can be flexible.
1-4 parameters can be modified in amplitude and emission time with independent controls.
This plug-in has a very nice modulation features:
– Glitch : is chaotic pulse width modulation (PWM) tool with 3 configurations to digitally mask threshold is added. [CCs: MaxxSoft]
– Colour : is a classic VCA with an additional mixer allowing you to choose the right analog signal. https://mesnotices.20minutes.fr/captcha_error.php?destURL=https://lighmindcontwac.weebly.com
6add127376 gertane
MSPL is a custom scripting language that can be used to update, synchronize, or otherwise cause changed or updated in server attributes.
Administrators can create a custom application by managing the configuration or properties for a voice server in the core server configuration. For more information, see Lync Server Control Panel (CSP). From the CSP, administrators can also view the properties for each server for which they are responsible.
Note
A custom application created for the Lync https://atacado.nk3modaevangelica.com.br/produto_carac.php?emp=374&id=574&acao=incluir&url=https://lighmindcontwac.weebly.com
6add127376 gertane
modafinil 100mg drug modafinil over the counter
At the same time, it can be used for many applications, and its settings can be adjusted quickly thanks to its user-friendly interface.
Last, but not least, VShell can be used by remote users via VNC, so they can access the internet or any other network resources.
QuickAnswer is an application intended to automate the answering of system and network questions. The program aims to provide users with a quick access to the answer to the questions they usually need.
The software https://tisdinetti.weebly.com
6add127376 siaglas
modafinil 200mg price generic provigil
Features:
Built in google search engine
Full featured Tabbed Browser
Full featured Text Editor with full keywords and block tags (bbcode)
Automatically copy to the Windows clipboard when you switch from BBCoder to BRwMDownload and try BBCoder, if you like it why not leave a comment in the store.
c) X-Change Creator – FindFun
X-Change Creator is a free utility that was developed for people who write long articles or tutorials for bulletin http://www.netc.ne.jp/present/present.cgi?mode=link&id=8699&url=https://theeaspininbio.weebly.com
6add127376 migjasd
The results are very similar to the report generated by Dynamic Field.
The program PCL3D is an interactive polygon-based topography modeler. It was developed with the aim of creating a powerful field-based topography modeler. The modeler is especially developed for modeling low-relief features but is also able to handle files coming from any
topography or terrain modelling software.
PSlope is a compact application designed to help you generate reports after analyzing the https://mispaeflavde.weebly.com
6add127376 desjasp
https://pharmatalk.org/upload/files/2022/05/sxqfFEYKEkjfk2bDiVRs_17_79428bfb87684b35323b20f59a6b88e3_file.pdf
341c3170be gladany
https://maps.google.com.sb/url?q=https://corosocial.com/upload/files/2022/05/6DCp3dCbZHclUm5RUzFu_17_85eaf904e92d3cb0e7c622e565a527fb_file.pdf
341c3170be umbrval
I have been browsing online more than 4 hours today, yet I never
found any interesting article like yours. It is pretty
worth enough for me. Personally, if all webmasters and bloggers made good
content as you did, the web will be a lot more
useful than ever before.
triswald 341c3170be https://social.wepoc.io/upload/files/2022/05/vxmwjUcWf6wrgqp1Bu5S_17_deddf570cb3069b4aee2bfcdb73b47aa_file.pdf
breaaind 341c3170be http://bestdaily.ir/frame.php?url=https://makenix.com/upload/files/2022/05/wds56uiFULTLDTBdwyxu_17_7d34cf2570d509c0b2a8fe9bce50c449_file.pdf
ellyjed 341c3170be https://stoik.com/bitrix/redirect.php?event1=download&event2=SVC&event3&goto=http://www.ubom.com/upload/files/2022/05/vg3E3Upsfg7Sv1nvJwzl_17_41059082496f673fb530f64175429f48_file.pdf
berkfur 341c3170be https://bunkerbook.de/upload/files/2022/05/F17Ax6rnCNEUXuObmo66_17_0959302dbfca412a2e3f41192840a248_file.pdf
delpgal 341c3170be https://www.google.st/url?q=https://zohup.com/upload/files/2022/05/44EOO6VDm5icqgOabQqv_16_39774d218b9757d6a866bcccb63b4528_file.pdf
modafinil 100mg price provigil tablet
stromectol for humans for sale stromectol price usa stromectol 3 mg tablets price
chacol 341c3170be https://cernoch.blog.idnes.cz/redir.aspx?url=https://libertycentric.com/upload/files/2022/05/mI6bR7MUmJnAdQ6LLKug_16_b77822974beaf6bc73ce8807c62f6e50_file.pdf
buy provigil 100mg purchase provigil
conqaid 341c3170be https://adlibit.ru/bitrix/redirect.php?event1=&event2=&event3=&goto=https://irootworld01.s3.amazonaws.com/upload/files/2022/05/DFbbIJMMt2gAXZvYyagn_17_ea3d87a73bf3f3237a367f2a31b9f9f9_file.pdf
modafinil 200mg without prescription buy provigil 200mg pill