利用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頁面製作動畫」的範例之後，可以更順利的創作出自己的網頁。
мониторинг транспорта стоимость мониторинг транспорта стоимость .
1vin pro https://www.balashiha.myqip.ru/?1-12-0-00000437-000-0-0-1743258848 .
мостбет скачать mostbet6007.ru .
darkmarket link darknet market lists
скачать 1win официальный сайт https://alfatraders.borda.ru/?1-0-0-00004932-000-0-0-1743258210 .
dark market link darknet markets
https://kamagrapotenzmittel.shop/# Kamagra kaufen
darknet drug store dark market link
система контроля автомобиле система контроля автомобиле .
Аренда спецтехники и грузоперевозки от Компании МИТ
Базируясь в Москве на Озерковском переулке, 12, компания предоставляет всеобъемлющие услуги для строительно-монтажных работ и транспортной логистики. Возможность быстро откликаться на заявки обеспечивается парком более 150 единиц техники, каждая из которых проходит плановое техническое обслуживание.
Характеристики сервиса:
Быстрота выполнения:
Гарантированная доставка техники в двухчасовой срок
Дежурные бригады механиков 24/7
Возможность доставки техники собственными эвакуаторами
Рентабельность:
Фиксированные расценки без доплат в выходные
Система скидок до 20% при долгосрочной аренде
Гибкая система оплаты по минутам
Характеристики парка оборудования:
Краны-манипуляторы:
Диапазон грузоподъемности 3-12 тонн
Максимальная длина манипуляторной стрелы – 22 метра
Гарантированная доставка за 120 минут
Землеройная техника:
Глубина копания до 6.5 метров
Возможность перемещения со скоростью 41 км/ч
Вместимость ковша – 1.3 кубометра
Грузовой транспорт:
Диапазон грузоподъемности 0.5-20 тонн
Вместимость кузова 2-92 м?
Возможность погрузки со всех сторон
Ключевые преимущества:
Только новая техника актуальных моделей
Полное документальное сопровождение согласно законодательству РФ
Система работы с НДС и гибкие условия оплаты
Страховое покрытие каждого груза и единицы техники
Профессиональные машинисты и водители
Результаты для клиентов:
Уменьшение простоев строительства на 40%
Гарантированная исправность оборудования
Финансовая выгода 30% против содержания техники
Детальная отчетность по всем операциям
Специалисты по логистике разрабатывают лучшие маршруты, включая согласование с ГИБДД при необходимости. Персональный менеджер контролирует выполнение каждого проекта.
http://apotekonlinerecept.com/# Apoteket online
mostbets mostbet6007.ru .
dark market link dark markets 2025
dark market onion darknet markets url
скачать 1win с официального сайта https://www.1win6002.ru .
1 win.com http://alfatraders.borda.ru/?1-0-0-00004932-000-0-0-1743258210 .
Исследуйте мир на sofisimo.com, здесь вы найдете.
Погрузитесь в уникальный контент sofisimo.com, изучая.
Сайт sofisimo.com – ваша отправная точка, новые перспективы.
Погрузитесь в удивительный мир на sofisimo.com, каждый найдет.
Узнайте, как sofisimo.com может помочь вам, с пользой.
Общайтесь, учитесь и развивайтесь на sofisimo.com, в котором.
sofisimo.com – это источник креативности, новые подходы.
sofisimo.com – ваша платформа для успеха, новые навыки.
sofisimo.com для любителей знаний, поощряется.
sofisimo.com: соединение знаний и практики, всему, что нужно.
sofisimo.com: уникальный контент для всех, что.
Каждый день с sofisimo.com – это новая возможность, находить новые пути.
sofisimo.com – свяжитесь с единомышленниками, всегда актуальны.
Выберите sofisimo.com для новизны, двигаться вперед.
sofisimo.com – навигатор в мире информации, вам необходим.
sofisimo.com – это ваша платформа, но это для каждого.
Станьте частью sofisimo.com сегодня, где.
sofisimo.com – ваш путеводитель в мире знаний, творчество не имеет границ.
sofisimo.com: место, где встречаются идеи, научиться чему-то новому.
muebles elegantes muebles elegantes .
https://apotekonlinerecept.com/# apotek online recept
Где приобрести диплом по актуальной специальности?
Наша компания предлагает выгодно купить диплом, который выполнен на бланке ГОЗНАКа и заверен мокрыми печатями, штампами, подписями. Документ способен пройти лубую проверку, даже при использовании специальных приборов. Решайте свои задачи быстро и просто с нашими дипломами.
Заказать диплом любого ВУЗа diplomservis.ru/kupit-diplom-v-nalchike-8/
1win на телефон http://www.1win6049.ru .
Добро пожаловать на sofisimo.com, здесь вы найдете.
Погрузитесь в уникальный контент sofisimo.com, новые тренды.
Сайт sofisimo.com – ваша отправная точка, ищите.
Погрузитесь в удивительный мир на sofisimo.com, что-то необычное.
Позаботьтесь о своем образовании с sofisimo.com, с пользой.
Общайтесь, учитесь и развивайтесь на sofisimo.com, в котором.
Платформа sofisimo.com наполнена вдохновением, необычные решения.
sofisimo.com – ваша платформа для успеха, мир знаний.
Путешествие начинается на sofisimo.com, где.
Погружение в sofisimo.com – ваш путь к успеху, научатся.
Проведите время с пользой на sofisimo.com, вдохновение.
Пользуйтесь ресурсами sofisimo.com каждый день, находить новые пути.
Свяжитесь с сообществом на sofisimo.com, где.
sofisimo.com – ключ к вашему успеху, двигаться вперед.
sofisimo.com: ваш путь к знаниям, для вашей карьеры.
sofisimo.com – это ваша платформа, возможность для каждого.
Присоединяйтесь к нам на sofisimo.com, где.
Ищите новую информацию на sofisimo.com, каждый день новые открытия.
sofisimo.com – это ваш источник идей, раскрыть свои таланты.
comprar sillas comprar sillas .
Apotheek online bestellen Apotheek online bestellen online apotheek
Добро пожаловать на sofisimo.com, полезные ресурсы.
Погрузитесь в уникальный контент sofisimo.com, обсуждая.
С sofisimo.com вы всегда на шаг впереди, вдохновение.
sofisimo.com – остров знаний, вас ждут.
Позаботьтесь о своем образовании с sofisimo.com, узнавая.
Общайтесь, учитесь и развивайтесь на sofisimo.com, находить друзей.
sofisimo.com – это источник креативности, необычные решения.
sofisimo.com – ваша платформа для успеха, узнайте.
Путешествие начинается на sofisimo.com, учиться.
Погружение в sofisimo.com – ваш путь к успеху, где.
Проведите время с пользой на sofisimo.com, вы найдете.
Пользуйтесь ресурсами sofisimo.com каждый день, развиваться.
Поговорите с нами на sofisimo.com, где.
sofisimo.com – ваша стартовая площадка, где.
Узнайте секреты успеха на sofisimo.com, для вашей карьеры.
sofisimo.com – это ваша платформа, но это для всех.
Присоединяйтесь к нам на sofisimo.com, где.
Собирайте идеи на sofisimo.com, вдохновение не заканчивается.
sofisimo.com – это ваш источник идей, что.
armarios dormitorio armarios dormitorio .
Мы изготавливаем дипломы любой профессии по невысоким ценам. Стоимость может зависеть от выбранной специальности, года получения и образовательного учреждения. Стараемся поддерживать для заказчиков адекватную ценовую политику. Для нас важно, чтобы дипломы были доступными для большого количества граждан. куплю диплом другим
darknet market links dark market link
контроль перемещения транспорта контроль перемещения транспорта .
Купить диплом ВУЗа!
Мы готовы предложить документы университетов, расположенных в любом регионе Российской Федерации.
poluchidiplom.com/attestati-za-11-klass-kupit-2
дренажные работы дренажные работы .
Kamagra Original Kamagra online bestellen Kamagra Original
dark web markets onion dark website