手機網頁 網頁開發

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


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