c# เเต่ทำ Slide เลื่อนๆเหมือนใน Feed Twitter

รวมโค้ด AJAX Javascript Library jQuery Framework ต่างๆ ที่ใช้ คู่กับ php Script Ajax โค้ด Ajax Prototype UI แนะนำได้ที่นี่

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
jataz2
PHP Super Member
PHP Super Member
โพสต์: 201
ลงทะเบียนเมื่อ: 22/02/2011 11:48 am

c# เเต่ทำ Slide เลื่อนๆเหมือนใน Feed Twitter

โพสต์โดย jataz2 » 22/02/2011 4:43 pm

คิดดี พูดดี ทำดี เเล้วสิ่งดีๆจะตามมา

เพื่อนๆลอง copy html ชุดนี้ไป เเล้วลองเอาไป save ไฟล์เป็นเเบบ .html ดูนะครับ
เเละเก็บไฟล์ jquery ให้อยู่ในโฟล์เดอร์เดียวกันนะครับ จะได้อ้างพาธ jquery.js ได้ถูกต้อง

ส่วน jquery ให้ไปเอาล่าสุดที่: http://code.jquery.com/jquery-1.5.js เเล้วตั้งชื่อว่า jquery.js ครับ

โค้ด: เลือกทั้งหมด

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>slide up slide down and fade</title>
<style type="text/css">
body{
   background-color:#0E97C5;   
}
/* css ส่วนนอกสุดของเนื้อหานี้ */
div#holder_swap{
   margin:auto;
   width: 519px;
   margin-top:50px;
   background-color:#FFF;      
}
/* css ส่วนกำหนดขอบเขตการแสดง  */
div.wrap_swap{
   width: 519px;
   height: 854px;
   color: #5A5858;
   display: block;
   font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
   font-size:12px;   
}
/* css ส่วนสำหรับหัวข้อ  */
div.heading{
   border-bottom:1px black dotted;
   margin:0;
   padding:10px 0px 3px;
   width: 519px;
   height:16px;
   clear: both;
   color: #5A5858;
   display: block;   
   font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
   font-size:12px;
   font-weight:bold;   
   background-color:#FFF;      
}
/* css ส่วนสำหรับรายการแสดงแต่ละรายการ */
div.item_swap{
   border-bottom:1px black dotted;
   margin:0;
   padding:10px 0px 3px;
   width: 519px;
   height:60px;
   clear: both;
   color: #5A5858;
   display: block;   
   font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
   font-size:12px;
}
</style>
</head>

<body>


<!--ส่วนของเนื้อหาสำหรับทดสอบ-->
<div id="holder_swap">
     <div class="heading">
            Header
        </div>
        <div class="wrap_swap">
<div id="recent29" style="display:none;" class="item_swap" >This is a test test 29</div>
<div id="recent28" style="display:none;" class="item_swap" >This is a test test 28</div>
<div id="recent27" style="display:none;" class="item_swap" >This is a test test 27</div>
<div id="recent26" style="display:none;" class="item_swap" >This is a test test 26</div>
<div id="recent25" style="display:none;" class="item_swap" >This is a test test 25</div>
<div id="recent24" style="display:none;" class="item_swap" >This is a test test 24</div>
<div id="recent23" style="display:none;" class="item_swap" >This is a test test 23</div>
<div id="recent22" style="display:none;" class="item_swap" >This is a test test 22</div>
<div id="recent21" style="display:none;" class="item_swap" >This is a test test 21</div>
<div id="recent20" style="display:none;" class="item_swap" >This is a test test 20</div>
<div id="recent19" style="display:none;" class="item_swap" >This is a test test 19</div>
<div id="recent18" style="display:none;" class="item_swap" >This is a test test 18</div>
<div id="recent17" style="display:none;" class="item_swap" >This is a test test 17</div>
<div id="recent16" style="display:none;" class="item_swap" >This is a test test 16</div>
<div id="recent15" style="display:none;" class="item_swap" >This is a test test 15</div>
<div id="recent14" style="display:none;" class="item_swap" >This is a test test 14</div>
<div id="recent13" style="display:none;" class="item_swap" >This is a test test 13</div>
<div id="recent12" style="display:none;" class="item_swap" >This is a test test 12</div>
<div id="recent11" style="display:none;" class="item_swap" >This is a test test 11</div>
<div id="recent10" style="display:none;" class="item_swap" >This is a test test 10</div>
<div id="recent9" style="display:none;" class="item_swap" >This is a test test 9</div>
<div id="recent8" style="display:none;" class="item_swap" >This is a test test 8</div>
<div id="recent7" style="display:none;" class="item_swap" >This is a test test 7</div>
<div id="recent6" style="display:none;" class="item_swap" >This is a test test 6</div>
<div id="recent5" style="display:none;" class="item_swap" >This is a test test 5</div>
<div id="recent4" style="display:none;" class="item_swap" >This is a test test 4</div>
<div id="recent3" style="display:none;" class="item_swap" >This is a test test 3</div>
<div id="recent2" style="display:none;" class="item_swap" >This is a test test 2</div>
<div id="recent1" style="display:none;" class="item_swap" >This is a test test 1</div>
<div id="recent0" style="display:block;" class="item_swap" >This is a test test 0</div>
        </div>
</div>


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var delay = 5000; // ลูกเล่นทำงานทุกๆ 5 วินาที
var count = 30; // จำนวนรายการที่นำมาแสดงทั้งหมด
var showing = 4; //  สำหรับ index ค่าของรายการที่จะแสดงเริ่มต้น  สอดคล้องกับ $i<11
var i = 0; // เก็บค่า index รายการ
var shift_box;    //  สำหรับเก็บฟังก์ฃัน การเลื่อนสลับ แสดง
var move_box; // สำหรับเก็บฟังก์ฃันซ่อนรายการ
function move_box(i){
   return function() {
     $('#recent'+i).remove().css('display', 'none').prependTo('.wrap_swap');
   }
}
function shift_box() {
   var toShow = (i + showing) % count; // วนลูปเพิ่ม ลด index ลำดับค่ารายการที่จะแสดง ได้ค่าระหว่าง 0-29
   // ลูกเล่นส่วนที่จะแสดง
   $('#recent'+toShow).slideDown(1000,move_box(i));
   // ลูกเล่น ส่วนที่จะทำการซ่อน
   $('#recent'+i).slideUp(1000,move_box(i));
   i = (i + 1) % count; // วนลูปเพิ่มลด ค่า i จะได้ค่าตั้งแต่ 0-29
   setTimeout('shift_box()', delay); // กำหนดให้ทำงานหลังจาก 5 วินาที
}   

$(function(){
    setTimeout('shift_box()', delay); // กำหนดให้ทำงานหลังจาก 5 วินาที
});
</script>

</body>
</html>
แนบไฟล์
5.jpg
5.jpg (81.48 KiB) เปิดดู 2707 ครั้ง

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 2 และ บุคคลทั่วไป 0 ท่าน