手機網頁, 網頁設計

手機網頁教學-仿Yhaoo!利用滑動手勢切換圖文

梅干 2012/08/16
梅問題-手機網頁教學-仿Yhaoo!利用滑動手勢切換圖文(jquery.cycle&jquery.touchwipe)
  用過智慧型手機的朋友,應該很習慣,透過手指頭,來螢幕左右滑動,切換照片或文章,而這個左右滑動,已是目前大家所習慣的操控模式,因此有不少的手機網頁,也把這個元素加到網頁中,最常見的例子就是奇摩的手機頁面,當進到手機頁面時,上方的新聞部分,就可透過左右滑動來切換上下則,或是直接點二旁的左右鈕,也可進行新聞的切換,而這看似很酷操控行為,其實作法相當的簡單,只要透過二個jQuery套件,jquery.cycle與jquery.touchwipe立即就可完成喔!現在就一塊來看看吧!

使用套件:
#1
套件名稱:jquery.touchwipe
套件功用:自動偵測手指滑動
套件網址:http://www.netcu.de/jquery-touchwipe-iphone-ipad-library
#2
套件名稱:jquery.cycle
套件功用:圖片輪播
套件網址:http://jquery.malsup.com/cycle/

有看過奇摩手機頁面的朋友,應該對於這區塊不感陌生,透過手指頭左右滑動,就可直接切換上下則新聞。
梅問題-手機網頁教學-仿Yhaoo!利用滑動手勢切換圖文(jquery.cycle&jquery.touchwipe)
接著進到二個官方網站,將外掛套件的js給下載回來,然後把二隻js放在同一目錄下,再將下方的語法貼到網頁中,之後若要新增圖片,只要在<div id="imagegallery">~</div>中增加就會自動抓了,夠簡單吧!
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.touchwipe.1.1.1.js"></script>
<script src="jquery.cycle.all.min.js"></script>
<script>
$(function(){
	//參數設定:
	//wipeLeft 向左滑動
	//wipeRight 向右滑動
	//wipeUp 向上滑動
	//wipeDown 向下滑動
	//min_move_x 水平移動最小像
	//min_move_y 垂直移動最小像素
	/*
	$("#imagegallery").touchwipe({
		 wipeLeft: function() { alert("left"); },
		 wipeRight: function() { alert("right"); },
		 wipeUp: function() { alert("up"); },
		 wipeDown: function() { alert("down"); },
		 min_move_x: 20,
		 min_move_y: 20,
		 preventDefaultEvents: true
	});*/

	
	$('#imagegallery').cycle({
		timeout: 0,
		fx: 'scrollHorz',
		next: '#next',
		prev: '#prev' 
	});
 
	$("#imagegallery").touchwipe({
 		wipeLeft: function() {
 	 		$("#imagegallery").cycle("next");
			
 		},
 		wipeRight: function() {
 	 		$("#imagegallery").cycle("prev");			
 		}
	});
})

</script>
<style>
body {
	margin:0;
	padding:0;
	background:#ccc;
}
#wrap {
	position:relative;
	width:310px;
	height:207px;
	margin:0 auto;
	overflow:hidden;
}
#imagegallery {
	width:310px;
	height:207px;
	background:#fff;
	margin:0 auto;
	margin-top:10px;
	overflow:hidden;
	text-align:center;
}
#imagegallery a {
	text-decoration:none;
	color:#333333;
}
#nav {
	width:310px;
	height:50px;
	position:absolute;
	top:75px;
	z-index:100;
}
#nav a {
	display:block;
	line-height:60px;
	width:60px;
	background:rgba(0,0,0,0.4);
	text-align:center;
	text-decoration:none;
	font-size:21px;
	color:#fff;
	font-family:Arial, Helvetica, sans-serif;
	border-radius: 17px;
}
#prev {
	float:left;
	margin-left:-15px;
}
#next {
	float:right;
	margin-right:-15px;
}
</style>
</head>
<body>
<div id="wrap">
  <div id="imagegallery"> 
      <img src="img01.jpg"> 
      <img src="img02.jpg">
      <img src="img03.jpg">
      <img src="img04.jpg"> 
      <img src="img05.jpg"> 
   </div>
  <div id="nav"><a id="prev" href="#"><</a> <a id="next" href="#">></a></div>
</div>

[範例預覽] [範例下載]