手機網頁, 網頁設計

手機網頁教學-仿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>

[範例預覽] [範例下載]
UAG軍規iPhone防摔殼