ตารางแสดงภาพแบบเคลื่อนไหวที่คุณสามารถกำหนดได้ด้วย ปลั๊กอิน jQuery


มาเรียนรู้เรื่อง jquery กันต่อดีกว่าครับวันนี้เลยเราเรื่องของการใช้ปลั๊กอิน jQuery สำหรับการสร้างตารางภาพที่จะทำให้ภาพมีการเลือนไหวปรับเปลี่ยนไปมาในส่วนของรูปภาพที่เราเพิ่มเข้าไปและเกินจำนวณของตารางส่วนช่องของตารางเราสามารถที่จะกำหนดได้ครัยบว่าเราจะเอาขนาดเท่าไรจำนวนมากน้อยแค่ไหนและกำหนดเรื่องของเวลาในการแสดงผลได้เป็นอีกเทคนิคหนึ่งโดยการใชปลั๊กอิน jQuery สำหรับการสร้างตารางภาพที่หน้าสนใจครับ



โค้ด HTML สำหรับการใส่จำนวนรูปภาพและลิ้งเราสามารถนำาประยุคใช้โดยที่สามารถจะเอาไปแก้แล้วเขียนใส่ loop ก็ได้นะครับ

1
2
3
4
5
< div  id ของ= "ri-grid"  ชั้น= "ri-grid-ri ตารางขนาด-1 ri เงา" >
    < UL >
        < li > < href = "#" > < img  สิ่งอำนวยความสะดวก= "images/medium/1.jpg"  ALT = "สิ่งที่ทำงาน" />  
        < li > < href = "#" > < img  สิ่งอำนวยความสะดวก= "images/medium/2.jpg"  ALT = "อะไรอีก" />  
        < -! ... ->


โค้ดเรียกใช้ฟังชั่น ปลั๊กอิน jQuery

1
2
3
{          
    $( '#ri-grid' ).gridrotator();
});


โค้ดในการกำหนดค่าของตารางโดยใช้ css ขนาดและจำนวนและเวลาการแสดงผล

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
/ / จำนวนแถว
rows            : 4,
/ / จำนวนของคอลัมน์
columns         : 10,
/ แถว / / คอลัมน์สำหรับความกว้างของหน้าจอที่แตกต่างกัน
/ / เช่น w768 เป็นสำหรับหน้าจอขนาดเล็กกว่า 768 พิกเซล
w1024           : {
    rows    : 3,
    columns : 8
},
w768            : {
    rows    : 3,
    columns : 7
},
w480            : {
    rows    : 3,
    columns : 5
},
 w320            : {
    rows    : 2,
    columns : 4
},
w240            : {
    rows    : 2,
    columns : 3
},
/ / ขั้นตอน: จำนวนของรายการที่จะถูกแทนที่ในเวลาเดียวกัน
/ / สุ่ม | | [บางหมายเลข]
// note: for performance issues, the number should not be > options.maxStep
step            : 'random',
maxStep         : 3,
/ / ป้องกันไม่ให้คลิกภาพที่แสดง
preventClick    : true,
ประเภท / ภาพเคลื่อนไหว /
/ / showhide | | fadeInOut | | slideLeft | |
/ / slideRight | | slideTop | | slideBottom | |
/ / rotateLeft | | rotateRight | | rotateTop | |
/ / rotateBottom | ขนาด | | | rotate3d | |
/ / rotateLeftScale | | rotateRightScale | |
/ / rotateTopScale | | rotateBottomScale | | random
animType        : 'random',
/ ความเร็วในการเคลื่อนไหว /
animSpeed       : 500,
// animation easings
animEasingOut   : 'linear',
animEasingIn    : 'linear',
 // the item(s) will be replaced every 3 seconds
// ไม่ควรน้อยกว่า < 300 ms
interval        : 3000

ดาวน์โหลด…..!!!

ขอบคุณข้อมูลจาก http://tympanus.net

Comments

comments

Powered by Facebook Comments