Ajax Load Image แต่งเว็บสวยๆ
Submitted by แมวสะดุ้ง on วันพฤหัส, 26 พฤษภาคม 2011No Comment
คำค้นหา: ajax, Load Image, script, website, ทำเว็บ, แต่งเว็บ
ajaxscript load image เรียกรูปมาทีละรูป
ตัวอย่างของเอฟเฟคนี้ดูได้ที่นี่นะครับ ตัวอย่าง AJAX SCRIPT
มาเริ่มเขียนกันเลยดีกว่าครับ
1. ตรงแท็ก HEAD เราจะแทรกโค๊ดด้านล่างนี้ลงไปนะครับ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <script type="text/javascript" src="http://ajax.googleapis.com/ ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var i = 0; $('#imagesdiv img').each(function() { var me = this; $(this).hide() var j = i; setTimeout(function() { $(me).fadeIn(1000); }, i) i += 100 }); }); </script> |
2.เมื่อเราแทรกโค๊ด javascript ไปแล้วคราวนี้ก็เป็นส่วนของการแสดงผลแล้ว ปกติเราจะแสดงผลในส่วนของ แท็ก body นะครับ ถ้าจะให้รูปมีเอฟเฟคที่ไหนก็นำโค๊ดนี้ไปแทรกได้เลยนะครับ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <div id="imagesdiv"> เรียกรูปมาแสดง </div> ตัวอย่างนะครับ <div id="imagesdiv"> <img src="http://www.sadung.com/wp-content/themes/arthemia-premium/images/logo/logo_sadung.png" /> <img src="http://www.sadung.com/wp-content/themes/arthemia-premium/images/logo/logo_sadung.png" /> <img src="http://www.sadung.com/wp-content/themes/arthemia-premium/images/logo/logo_sadung.png" /> <img src="http://www.sadung.com/wp-content/themes/arthemia-premium/images/logo/logo_sadung.png" /> <img src="http://www.sadung.com/wp-content/themes/arthemia-premium/images/logo/logo_sadung.png" /> <img src="http://www.sadung.com/wp-content/themes/arthemia-premium/images/logo/logo_sadung.png" /> <img src="http://www.sadung.com/wp-content/themes/arthemia-premium/images/logo/logo_sadung.png" /> </div> |
โอเคครับแค่นี้เราก็ได้เอฟเฟคสวยๆไปแต่งเว็บไซต์กันแล้วนะครับ ด้วย Ajaxงามๆแบบนี้ครับผม
คุณอาจจะสนใจ บทความต่อไปนี้(มั้ง)
Leave your response!