May
10
2011

jQuery Plugin Text slideUp slideDown

 

Plugin สามารถเอาไปใช้ในการแสดงข้อมูลข่าวสารต่างๆ จะใส่ลิ้งหรือไม่ก็ได้
ความสามารถ

  • สามารถกำหนดได้ว่าจะให้เลื่อนขึ้นหรือเลื่อนลงเองได้
  • สามารถกำหนดเวลาได้เอง
  • สามารถตั้งค่าความสูงได้
  • รองรับหลาย browser

วิธีเรียกใช้ก็ตามนี้
JAVASCRIPT

jQuery('#slide').slideText();
jQuery('#slide2').slideText({cmd:'slideDown'});

HTML

<ul id="slide">
        	<li><a href="#1">jQueryImage.com1 !!!!!!</a></li>
            <li><a href="#2">jQueryImage.com2 !!!!!!</a></li>
            <li><a href="#3">jQueryImage.com3 !!!!!!</a></li>
            <li><a href="#4">jQueryImage.com4 !!!!!!</a></li>
            <li><a href="#5">jQueryImage.com5 !!!!!!</a></li>
        </ul>

        <ul id="slide2">
        	<li><a href="#1">jQueryImage.com1 !!!!!!</a></li>
            <li><a href="#2">jQueryImage.com2 !!!!!!</a></li>
            <li><a href="#3">jQueryImage.com3 !!!!!!</a></li>
            <li><a href="#4">jQueryImage.com4 !!!!!!</a></li>
            <li><a href="#5">jQueryImage.com5 !!!!!!</a></li>
        </ul>

สามารถกำหนด options ได้โดยเรียกตามนี้

jQuery('#slide2').slideText({
cmd : 'slideUp', //กำหนดว่าจะให้เลื่อนขึ้นหรือลง "slideUp"/"slideDown"
duration:1000, //กำหนดเวลาว่าเลือน1ครั้งใช้เวลาเท่าไหร่แสดงผล 1000=1วินาที
timeSlide:5000, //กำหนดเวลา ในที่นี้คือ เลื่อนทุกๆ 5000 หรือ 5 วินาทีนั่นเอง
height:28 //กำหนัดความสูงของ li
});
//เราสามารถเรียกแบบนี้ก็ได้โดยมันจะใช้ค่าเริ่มต้น คือกำหนดเลือนขึ้น เวลาในการแสดงผล1วิ เวลาในการเลื่อน 5วิ ความสูง 28px
jQuery('#slide2').slideText();

DemoDownload

Flag Visitors

free counters