ตัวอย่างเช่น jQuery UI - เทคนิคพิเศษ (Effect)
แอพลิเคชันขององค์ประกอบของผลภาพเคลื่อนไหว
สำหรับข้อมูลเพิ่มเติมเกี่ยว .effect() รายละเอียดของวิธีการดูเอกสาร API .effect ()
.effect () การสาธิต
คลิกที่ปุ่มเพื่อดูตัวอย่างผลกระทบ
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI ผลกระทบ - .effect () สาธิต </ title>
<link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<style>
.toggler {กว้าง: 500px; ความสูง: 200px; ตำแหน่ง: ญาติ;}
#button {padding: .5em 1em; ตกแต่งข้อความ: none;}
#effect {กว้าง: 240px; ความสูง: 135px; padding: 0.4em; ตำแหน่ง: ญาติ;}
#effect h3 {margin: 0; padding: 0.4em; text-align: ศูนย์;}
.ui ผลการถ่ายโอน {ชายแดน: 2px สีเทาประ;}
</ style>
<script>
$ (ฟังก์ชั่น () {
// เรียกใช้ที่เลือกในปัจจุบัน runEffect ฟังก์ชั่นผล () {
// สืบทอดมาผลกระทบประเภท var selectedEffect = $ ( "#effectTypes") .val ();
// ส่วนใหญ่ของผลกระทบที่ไม่จำเป็นต้องพิมพ์ตัวเลือกตัวเลือกการนำส่งเริ่มต้น var = ใช้ {};
// บางผลพิเศษกับพารามิเตอร์ที่จำเป็นถ้า (selectedEffect === "โย") {
ตัวเลือก = {ร้อยละ: 0};
} else if (selectedEffect === "การโอน") {
ตัวเลือก = {ต้องการไป: "#button" className: "UI ผลการถ่ายโอน"};
} else if (selectedEffect === "ขนาด") {
ตัวเลือก = {ไป: {ความกว้าง: 200, ความสูง: 60}};
}
// มีผลกระทบ $ ( "#effect") .effect (selectedEffect ตัวเลือก 500, โทรกลับ);
};
// โทรกลับฟังก์ชันการเรียกกลับ () {
setTimeout (ฟังก์ชั่น () {
$ ( "#effect") .removeAttr ( "สไตล์") .hide () fadeIn () .;
}, 1000)
};
// กำหนดค่าให้เป็นไปตามผลกระทบที่เลือกเมนูที่ $ ( "#button") จำนวนคลิก (ฟังก์ชั่น () {
runEffect ();
กลับเท็จ;
});
});
</ script>
</ head>
<body>
<div class = "toggler">
<div id = "ผล" class = "UI-Widget เนื้อหา UI-มุมทั้งหมด">
<ระดับ H3 = "UI-Widget หัว UI-มุมทั้งหมด"> เทคนิคพิเศษ (Effect) </ h3>
<p>
Etiam Libero วัด, luctus ที่ eleifend NEC, Semper AT, Lorem. Sed กะเทย. Nulla Lorem Metus, adipiscing UT, luctus sed, สำนัก Vitae, มิชิแกน
</ p>
</ div>
</ div>
<select name = "ผลกระทบ" id = "effectTypes">
<value option = "ตาบอด"> ผลกระทบ Shades (ตาบอดผล) </ option>
<option value = "ตีกลับ"> ฟื้นตัวผลกระทบ (ตีกลับผล) </ option>
<option value = "คลิป"> ผลกระทบคลิป (เอฟเฟคลิป) </ option>
<value option = "วาง"> ผลกระทบ Landing (Drop ผล) </ option>
<option value = "ระเบิด"> ผลกระทบระเบิด (ระเบิด Effect) </ option>
<option value = "จาง"> Fade ผลกระทบ (Fade Effect) </ option>
<option value = "พับ"> ผลกระทบพับ (พับ Effect) </ option>
<option value = "ไฮไลท์"> ผลกระทบไฮไลท์ (เอฟเฟไฮไลต์) </ option>
<option value = "ผัด"> ผลกระทบการขยายตัว (พัฟผล) </ option>
<value option = "เต้น"> เอาชนะผลกระทบ (เต้น Effect) </ option>
<option value = "โย"> ผลกระทบซูม (ชั่งผล) </ option>
<option value = "เขย่า"> ผลกระทบการสั่นสะเทือนสั่นไหว (Shake ผล) </ option>
<option value = "ขนาด"> ผลกระทบขนาด (Size ผล) </ option>
<option value = "สไลด์"> ผลกระทบสไลด์ (Slide ผล) </ option>
<option value = "การโอน"> ผลกระทบการถ่ายโอน (เอฟเฟ Transfer) </ option>
</ เลือก>
<a href="#" id="button" class="ui-state-default ui-corner-all"> เรียกผลกระทบ </a>
</ body>
</ html>
ทำให้สบายสาธิต
ตัวอย่างนี้ใช้องค์ประกอบผ้าใบ HTML, วาดความเร็วในการเคลื่อนไหวทั้งหมด jQuery UI การให้ คลิกที่แต่ละแผนที่เพื่อดูพฤติกรรมการผ่อนคลาย .
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI ผลกระทบ - ทำให้สบายสาธิต </ title>
<link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<style>
.graph {
ลอย: ด้านซ้าย;
ขอบซ้าย: 10px;
}
</ style>
<script>
$ (ฟังก์ชั่น () {
ถ้า (! $ ( "<ผ้าใบ>") [0] .getContext) {
$ ( "<div>") .Text (
"เบราว์เซอร์ของคุณไม่สนับสนุนผ้าใบนี้แสดงให้เห็นถึงความจำเป็นที่จะสนับสนุนผ้าใบในเบราว์เซอร์ที่."
) .appendTo ( "#graphs");
กลับ;
}
var i = 0,
width = 100
height = 100;
$ .each ($ .easing, ฟังก์ชั่น (ชื่อ Impl) {
var กราฟ = $ ( "<div>") .addClass ( "กราฟ") .appendTo ( "#graphs")
ข้อความ = $ ( "<div>") .Text (++ i + "." ชื่อ +) .appendTo (กราฟ)
ห่อ = $ ( "<div>") .appendTo (กราฟ) .css ( 'ล้น', 'ซ่อน')
ผ้าใบ = $ ( "<ผ้าใบ>") .appendTo (ห่อ) [0];
canvas.width = ความกว้าง
canvas.height = ความสูง;
var drawHeight = ความสูง * 0.8
cradius = 10;
ctx = canvas.getContext ( "2D");
ctx.fillStyle = "สีดำ";
// วาดพื้นหลัง ctx.beginPath ();
ctx.moveTo (cradius, 0);
ctx.quadraticCurveTo (0, 0, 0, cradius);
ctx.lineTo (0, ความสูง - cradius);
ctx.quadraticCurveTo (0 ความสูง cradius สูง);
ctx.lineTo (กว้าง - cradius สูง);
ctx.quadraticCurveTo (ความกว้างความสูงความกว้างความสูง - cradius);
ctx.lineTo (กว้าง, 0);
ctx.lineTo (cradius, 0);
ctx.fill ();
// วาดเส้นด้านล่าง ctx.strokeStyle = "# 555";
ctx.beginPath ();
ctx.moveTo (กว้าง * 0.1, drawHeight + 0.5);
ctx.lineTo (กว้าง * 0.9 drawHeight + 0.5);
ctx.stroke ();
// วาดบรรทัดบนสุด ctx.strokeStyle = "# 555";
ctx.beginPath ();
ctx.moveTo (กว้าง * 0.1, drawHeight * 0.3-0.5);
ctx.lineTo (กว้าง * 0.9 * drawHeight 0.3-0.5);
ctx.stroke ();
// วาดผ่อนคลาย
ctx.strokeStyle = "สีขาว";
ctx.beginPath ();
ctx.lineWidth = 2;
ctx.moveTo (กว้าง * 0.1, drawHeight);
$ .each (แถวใหม่ (กว้าง) ฟังก์ชั่น (ตำแหน่ง) {
รัฐ var = ตำแหน่งความกว้าง /
Val = Impl (รัฐ, ตำแหน่ง, 0, 1, ความกว้าง);
ctx.lineTo (ตำแหน่ง * 0.8 + * ความกว้าง 0.1,
drawHeight - drawHeight * * * * * * * * Val 0.7);
});
ctx.stroke ();
// คลิกเปลี่ยนแปลงแบบไดนามิก graph.click (ฟังก์ชั่น () {
ห่อ
.animate ({ความสูง: "ซ่อน"}, 2000, ชื่อ)
.delay (800)
.animate ({ความสูง: "โชว์"}, 2000, ชื่อ);
});
graph.width (กว้าง) .height (สูง + text.height () + 10);
});
});
</ script>
</ head>
<body>
<div id = "กราฟ"> </ div>
</ body>
</ html>