Thứ tư, ngày 7 tháng 12 năm 2016

jQuery plugin – Turn.js: Hiệu ứng lật trang cho HTML5

Ngày đăng: 5/4/2012, 8:44:3PM | Lượt xem: 11,201
Hot!

Turn.js là một plugin của jQuery cho phép tạo hiệu ứng lật trang đẹp mắt với cách thức cài đặt đơn giản và dung lượng nhỏ gọn (chỉ 15KB). Đây có thể là một thư viện được ứng dụng phổ biến để sử dụng cho các trang web đọc sách và các thiết bị cầm tay, thay thế cho các ứng dụng bằng Flash hiện nay.

turnjs paper-like effect html5Turn.js là một plugin của jQuery cho phép tạo hiệu ứng lật trang đẹp mắt với cách thức cài đặt đơn giản và dung lượng nhỏ gọn (chỉ 15KB). Đây có thể là một thư viện được ứng dụng phổ biến để sử dụng cho các trang web đọc sách và các thiết bị cầm tay, thay thế cho các ứng dụng bằng Flash hiện nay.

Giới thiệu

Home page: http://www.turnjs.com/

Download: http://www.turnjs.com/turn.min.js

  • Một “book” được tạo từ một thẻ html chứa các thẻ con bên trong. Mỗi thẻ con được coi là một page.
  • Một view bao gồm các page đang được hiển thị. View có thể là [1], [2,3], [3,4],…
  • Các page sẽ tự động được thêm class css là “turn-page”, thông thường bạn sẽ đặt width của turn-page bằng ½ của book. Ngoài ra, mỗi page sẽ được thêm một class css khác là p1, p2, p3,… tùy theo số thứ tự của nó.

Sử dụng

<html>
<head>

<style>
#book{
	width:600px;
	height:300px;
}
#book .turn-page{
	width:300px;
	height:300px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://www.turnjs.com/turn.min.js"></script>
<script>
$(function(){
	$("#book").turn();
	$("#previous, #next").click(function()
	{
		$("#book").turn($(this).text());
	});
});
</script>

</head>
<body>
<div align="center">
	<h1>turn.js</h1>
	<h3>The awesome paper-like effect made for HTML5</h3>
		<button id="previous">previous</button>
	<button id="next">next</button>
	<hr/>
	<div id='book'>
		<img src="Spring/img (1).jpg"/>
		<img src="Spring/img (2).jpg"/>
		<img src="Spring/img (3).jpg"/>
		<img src="Spring/img (4).jpg"/>
		<img src="Spring/img (5).jpg"/>
		<img src="Spring/img (6).jpg"/>
		<img src="Spring/img (7).jpg"/>
	</div>
	<hr/>

</div>
</body>
</html>

jQuery Plugin - Turnjs - paper-like effect -Example
 

Reference

Xem tại: http://www.turnjs.com/#reference

Constructor

Creates an instance of turn.

$('selector').turn({page:1});

Parameters:

  • options
    • page (type: number, default: 1)
    • shadows (type: boolean, default: true)
    • duration (type: number, default: 600)
    • acceleration (type: boolean, default: true)

$(‘selector’).turn(property | method [, parameters]);

Scheme used for calling methods or getting properties

————————————-

Properties

Name Description Example

page

Gets the current page.
alert($('selector').turn('page'));

view

Gets the current view.
alert($('selector').turn('view'));

————————————-

Methods

Name Description Example

page

Turns to a specific page.
$('selector').turn('page', 2);

next

Turns to the next view. This method does not turn to the next page, instead it turns to next view.
$('selector').turn('next');

previous

Turns to the previous view.
$('selector').turn('previous');

stop

Stops the current animation.
$('selector').turn('next').turn('stop');

resize

Resets the size of all the wrappers used by turn.
$('selector').turn('resize');

disable

Disables and enables the effect.
$('selector').turn('disable', true);

————————————-

Events

Name Description Example

turned

Is fired when a page has been turned.
$('selector').bind('turned', function(e, page, pageObj) {
        alert('Page turned to '+page);
});

start

Is fired when appears the folded page.
$('selector').bind('start', function(e, turn) {
        console.log('Is it turning?' + turn);
});

end

Is fired when disappears the folded page.
$('selector').bind('end', function(e) {  });

YinYang’s Programming Blog

 Chia sẻ qua: 
Hot!
Ý kiến bạn đọc

These items will be permanently deleted and cannot be recovered. Are you sure?

Gallery

image

Maecenas viverra rutrum pulvinar

Maecenas viverra rutrum pulvinar! Aenean vehicula nulla sit amet metus aliquam et malesuada risus aliquet. Vestibulum rhoncus, dolor sit amet venenatis porta, metus purus sagittis nisl, sodales volutpat elit lorem…

Read more

Text Links

Thiết kế logo chuyên nghiệp Insky
DAFABET
W88 w88b.com/dang-ky-tai-khoan-w88
W88
Copyright © 2011 - 2012 vietshare.vn by phamkhuong102@gmail.com doanhkisi2315@gmail.com. All rights reserved.