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

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

Bài này đã được đăng trong HTML / CSS / XML, jQuery và được gắn thẻ . Đánh dấu đường dẫn tĩnh.

1 bình luận về “jQuery plugin – Turn.js: Hiệu ứng lật trang cho HTML5”

Đã đóng bình luận.