แกลลอรี่กับ jQuery Fade
หน้า 1 จาก 2
ขอบคุณ jQuery มันเป็นไปได้ที่จะตระหนักถึงง่ายมากแกลเลอรี่ภาพของที่น่าสนใจมากในการกวดวิชาแบบนี้เราจะเห็นวิธีการสร้างแกลเลอรี่จางง่ายหรือแกลเลอรีซึ่งมีภาพปรากฏอยู่ในลำดับ (ต่อไปกับแต่ละอื่น ๆ ) แทนที่จะใช้ผลจางหาย น่ารื่นรมย์
เพื่อให้บรรลุแกลเลอรี่ของเราจะไม่ใช้ปลั๊กอินใด ๆ แต่เราจะ จำกัด ตัวเองเพื่อการใช้งานที่ชาญฉลาดของเครื่องมือที่ให้ jQuery
เราจะเห็นตัวอย่างของสิ่งที่เราตั้งใจที่จะเป็น
เราจะวิเคราะห์โค้ด HTML :
<html>
<head>
แกลเลอรี่ <title> ภาพนิ่งกับ jQuery </ title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js"> </ script>
<script type="text/javascript" src="fadegallery.js"> </ script>
</ head>
<body>
<div id="fadegallery"> </ div>
</ BODY>
</ HTML>
เราในร่างกายของหน้าเว็บที่เรากำหนดรหัส fadegallery DIV ที่เราเรียกว่าส่วนหัวและแผ่นลักษณะภายนอกที่ห้องสมุด jQuery และ fadegallery.js ไฟล์ซึ่งต่อไปนี้รหัส :
แสดงฟังก์ชั่น (x) {$ ("img #"+ x) fadeIn ("ช้า");.}
$ (เอกสาร). พร้อม
(
ฟังก์ชัน ()
{
$ ("# Fadegallery"). หลังจากที่ ("
");
var img = new Array ();
/ / ***** ***** ***** ***** ***** ***** ***** ***** ***** *** **
img [0] ="pippo.jpg";
img [1] ="pluto.jpg";
img [2] ="paperino.jpg";
/ / ***** ***** ***** ***** ***** ***** ***** ***** ***** *** **
var i = 0;
for (i = 0; ฉัน img.length <; i + +)
{
$ ("# Fadegallery"). ผนวก ("+ i + <div id='img" "'class='boxfoto'> <img src='" + + img[i] "'> </ div>") ;
window.setTimeout ("แสดง ("+ i +")", ((i + 1) * 1000));
}
}
);
การดำเนินงานของง่าย : ครั้งแรกที่เราสร้างฟังก์ชันพารามิเตอร์ที่เรียกฟังก์ชันจาก fadeIn jQuery สำหรับการดู (ที่มีสีซีดจาง) ของ DIV ต่างๆที่เราสร้างแบบไดนามิกในรอบที่สารสกัดจากทุกรายการในอาร์เรย์ซึ่งในที่สุดก็เป็น มีภาพและเค้าโครงหน้าใน HTML
ภายใน loop ยังจำได้แสดงฟังก์ชัน () กับเวลาทำงานจากที่สองและเพิ่มขึ้นเพิ่มเติมจากวินาทีในแต่ละขั้นตอนในการสั่งซื้อแม่นยำเพื่อสร้างลำดับผลที่
หมายเหตุคำสั่ง :
$ ("# Fadegallery"). หลังจากที่ ("
");
แทรกที่จุดเริ่มต้นของฟังก์ชัน () : นี่คือการออกแบบให้เลื่อนอยู่ภายใต้เนื้อหา DIV แกลเลอรี่ไปที่บ้านของเราใด ๆ (ในกรณีที่ไม่มีขององค์ประกอบที่ทับซ้อนกันอาจทำให้เกิดความไม่พอใจเนื่องจากคุณสมบัติลอยใน CSS ที่เราใช้)
 |
CSS (หลักสูตร)
การออกแบบเว็บและการใช้งานตาม W3C CSS และ XHTML เริ่มต้นจาก 29 € |
 |
HTML (หลักสูตร)
ภาษามาร์คอัปสำหรับเว็บจาก 29 € |
 |
Javascript (หลักสูตร)
คู่มือที่สมบูรณ์ในการเขียนสคริปต์ฝั่งไคลเอนต์ จาก 39 € |