BARAJA ปลั๊กอิน jQuery สำหรับการแสดงผลแบบการกรีดไพ่


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

 

โค้ดสำหรับการใส่ภาพเข้าไปใส่ได้เลื่อยๆครับ

1
2
3
4
5
6
7
8
9
<ul class="baraja-container">
    <li><img src="images/1.jpg" alt="image1" />
<h4>Coco Loko</h4>
Total bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat.</li>
    <li><!-- ... --></li>
    <li><!-- ... --></li>
    <li><!-- ... --></li>
</ul>
<!-- ... -->

ชื่อปลั๊กอิน jQuery

1
2
$ ( '# baraja el-' .) baraja ();
<span style="color: #000000;">โค้ด css สำหรับการจัดการแสดงผลหมุน</span>
1
2
3
4
5
6
7
8
9
10
11
$( '#some-button' ).on( 'click', function( event ) {
baraja.fan( {
speed : 500,
easing : 'ease-out',
range : 90,
direction : 'right',
origin : { x : 25, y : 100 },
center : true,
translation : 0
} );
} );

โค้ด css สำหรับการจัดการความเร็วในการแสดงผล

1
2
3
4
5
6
7
8
9
10
11
/ ตัวเลือก /
$ Baraja.defaults. = {
/ / ถ้าเราต้องการที่จะระบุตัวเลือกที่เรียกต่อไป () ฟังก์ชัน ตัวอย่างเช่น: '# baraja-nav-next'
Nextel: '' ,
/ / ถ้าเราต้องการที่จะระบุตัวเลือกที่เรียกฟังก์ชั่นก่อนหน้านี้ ()
Prevel: '' ,
ความเร็วการเปลี่ยนแปลง / default /
speed : 300,
ผ่อนคลายการเปลี่ยนแปลง / default /
easing : 'ease-in-out'
};

โค้ด 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
this.fanSettings = {
/ / ความเร็วในการเปิด / ปิด
speed : 500,
/ / การผ่อนคลายสำหรับการเปิด / ปิด
easing : 'ease-out',
/ ความแตกต่าง / / ช่วงของมุมที่เป็นไปได้ว่ารายการจะมี
/ ตัวอย่าง / กับช่วง: 90 และศูนย์: เท็จรายการแรก
/ / จะมี 0deg และสุดท้าย 90deg;
/ / ถ้าศูนย์: จริงแล้วคนแรกที่จะมี 45deg
/ / และล่าสุดหนึ่ง 45deg; ในทั้งสองกรณีแตกต่างกันคือ 90deg
range : 90,
/ / นี้กำหนดตำแหน่งของรายการแรก
/ / (ไปทางขวาไปทางซ้าย)
/ / และมุม (ตามเข็มนาฬิกา / ทวนเข็มนาฬิกา)
direction : 'right',
/ / เปลี่ยนแหล่งที่มา:
/ / คุณยังสามารถผ่าน Minx และ Maxx หมายค่าที่ยังเหลือ
/ / จะแตกต่างกันระหว่าง Minx และ Maxx
origin : { x : 25, y : 100 },
/ / แปลเพิ่มเติมของแต่ละรายการ
translation : 0,
/ / ถ้าแบบบัตรควรจะเป็น 0 เพื่อกำหนดศูนย์กลางหลังจากแปลง
/ / ถูกนำไปใช้
center : true,
/ / เพิ่มการสุ่ม
scatter : false
};

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

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

Comments

comments

Powered by Facebook Comments