iT邦幫忙

3

[jQuery plugin.] iPhone slide plugin

其實是自己寫好玩的東西,所以我也不知道大家會不會感興趣 :P
Live Demo
GitHub

可以設定的方式大概是這樣:

$('#album').iphoneSlide({
	// Page items handler, default: the first child of the $('album').
	handler: undefined,
	// Pages handler, default: the children of the handler.
	pageHandler : undefined,
	// Drag area handler, default: full page area.
	slideHandler : undefined,
	// You can define an element to handle this event(default: click) slide to next page.
	nextPageHandler : '.nextPage',
	// You can define an element to handle this event(default: click) slide to previous page.
	prevPageHandler : '.prevPage',
	// The friction of slide page.
	friction : 0.325,
	// When drag&drop page, the point length must be larger than this value which event will be fire.
	sensitivity : 20,
	// Slow down the page shift speed(ms).
	extrashift : 500,
	// If drag&drop over this time(ms), there will always slide 1 page.
	touchduring : 800,
	// Direction of slide, there are three directions you can choose(horizontal, vertical and matrix).
	direction : 'horizontal',
	// Max slide page.
	maxShiftPage : 5,
	// It's only for dynamic page(s).
	pageshowfilter : false,
	// Support jquery easing plugin, via http://gsgd.co.uk/sandbox/jquery/easing/
    easing: "swing",
    // Turn on/off default animate effect "bounce".
    bounce: true,
	autoPlay: false,
	cancelAutoPlayOnResize: true,
    autoCreatePager: false,
	pager: {
		pagerType: "dot",
        selectorName: ".banner_pager",
        childrenOnClass: "on",
		slideToAnimated: true
	},
	autoPlayTime: 3000,
	// When slide page completed, fire this.
	onShiftComplete : function(elem, page) {
		// this is parent of the handler.
		// elem is nowPage's page item.
		// page is "nowPage".
	}
});

有趣的地方是,寫這個 Plugin 讓我學到很多,只是 JS 還是寫得很不好就是了 XDD


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
wordsmith
iT邦高手 1 級 ‧ 2012-04-11 00:09:03

hinablue大大,提醒你一下,要參加JS忍之道要從http://ithelp.ithome.com.tw/js-ninja/articles這裡發問,或是自帶比賽專用的tag才會算到比賽的文章中哦(就會出現在首頁下方的JS忍之道專區),徽章也才會算進去。

再提醒一點,發文之前也要先報名哦。

這個plugin感覺還不錯哦~

閃光洽 iT邦新手 3 級 ‧ 2012-04-11 11:16:11 檢舉

感謝您,我加上去了 :P

我要留言

立即登入留言