首頁 > 其他

焦點圖觸屏划動處理

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本程式是一個測試程式，仿照百度的http://m.baidu.com/app (用android手機訪問)中推薦焦點圖做的效果。可以左右無限制的划動。 本文用到了zepto.js.

zepto地址: http://zeptojs.com/

<!DOCTYPE HTML>
<html>
  <head>
    <title>test</title>
    <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"/>
    <script src="js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
<style>
    *{padding:0px; margin:0px;}
    .touchBox{
        white-space:nowrap;
        overflow:hidden;
    }
    .items{
        display:inline-block;
        white-space:nowrap;
        overflow:hidden;
    }
    .item{
        display:inline-block;
        white-space:nowrap;
    }
</style>
</head>
<body>
<div style="overflow:hidden;" id="wrap">
    <div class="touchBox" id="slider">
      <div class="items">
          <div class="item"><img src="img/drag1.jpg"/></div>
          <div class="item"><img src="img/drag2.jpg"/></div>
          <div class="item"><img src="img/drag3.jpg"/></div>
          <div class="item"><img src="img/drag4.jpg"/></div>
      </div>
      <div class="items">
          <div class="item"><img src="img/drag1.jpg"/></div>
          <div class="item"><img src="img/drag2.jpg"/></div>
          <div class="item"><img src="img/drag3.jpg"/></div>
          <div class="item"><img src="img/drag4.jpg"/></div>
      </div>
      <div class="items">
          <div class="item"><img src="img/drag1.jpg"/></div>
          <div class="item"><img src="img/drag2.jpg"/></div>
          <div class="item"><img src="img/drag3.jpg"/></div>
          <div class="item"><img src="img/drag4.jpg"/></div>
      </div>
  </div>
</div>
<div id="picNo" style="font-size:24px;color:#fff;position:absolute;right:20px;margin-top:-30px;"></div>

<div id="msg"></div>
<script>
/*去空格和換行(代碼中的空格和換行會在瀏覽器解析時，解析成一個空格，造成位置運算有偏差)*/
var hm = $("#slider").html();
var b = hm.replace(/\n|\r/g,"").replace(/>\s*</g,'><').replace(/\s*</g,"<");
$("#slider").html( b);

/* 設定每個圖片的寬度 */
var img_w =  $("#wrap").width();
$(".item img").width( img_w + "px" );

var pic_num = $(".items .item").length/3;                        /* 每組圖片的數量 */
$("#slider").css("margin-left", -1*(img_w * pic_num) +"px");    /* 預設顯示中間那一組的第一個圖片 */
$("#msg").text("pic.width:" + img_w);

//觸摸部分
var touch = {};
var scrollSupressionThreshold = 1;        /* 觸發touchmove的敏感度 */
var verticalDistanceThreshold = 60;        /* swipe的觸發水平方向move必須大於這個距離 */

// add touch start listener
var canvas = document.getElementById("slider");
canvas.addEventListener("touchstart", touchStart, false);
canvas.addEventListener("touchmove", touchMove, false);
canvas.addEventListener("touchend", touchEnd, false);
canvas.addEventListener("touchcancel", touchCancel, false);

function touchStart(event){
    var tc = event.touches[0];
    touch.marginLeft = $("#slider").css("margin-left");        /* 最原始的座標值 */
    
    touch.x = tc.pageX;
    
    touch.x1 = tc.pageX;
    
    /* 清除定時 */
    clearInterval(timer);
}
function touchMove(event){
    if(touch.length == 0) return;
    var tc = event.touches[0];
    touch.x2 = tc.pageX;
    
    if(Math.abs( touch.x1 - touch.x2 ) > scrollSupressionThreshold){
        event.preventDefault();
        
        var a = $("#slider").css("margin-left");
        $("#slider").css("margin-left", (parseInt(a) + (touch.x2-touch.x1)) + "px");
        
        touch.x1 = touch.x2;
    }
}
function touchEnd(event){
    var movePos = touch.x2-touch.x;        /* 每次移動的距離 */
    
    /* 判斷是否換圖片 */
    if( Math.abs(movePos) > verticalDistanceThreshold){
        /* 判斷左移一張還是右移一張 */
        var c = 1;
        if(movePos<0){
            c = -1;
        }
        
        var m_left = parseInt(touch.marginLeft) + c*img_w;    /* 本次要移動到的位置 */
        
        /* 動畫切換圖片 */
        aninateChangePic(m_left, 100);
        
    }else{
        /* 移動的距離不夠，讓圖片還原到移動前的位置 */
        $("#slider").animate( {"margin-left":touch.marginLeft},200, 'ease', function(){ showPageNo(); } );
        
        $("#msg").text( "reset  "  + touch.x);
    }
    
    touch = {};
    
    /* 重新啟動定時 */
    setTimer();
}

function touchCancel(event){
    touch = {};
}

/* 顯示當前是第幾張圖 */
function showPicNo(){
    /* 得到當前是第幾張圖 */
    var a = $("#slider").css("margin-left");
    var b = Math.abs(parseInt(a));
    var seq = parseInt(b/img_w  ) % pic_num  + 1;
    
    $("#picNo").text(seq + "/" + pic_num);
}

/* 定時換圖 */
function changePicTimer(){
    var a = $("#slider").css("margin-left");
    var m_left = parseInt(a) - img_w;    /* 本次要移動到的位置 */

    /* 動畫切換圖片 */
    aninateChangePic(m_left, 400);
        
}

/* 動畫切換圖片  */
function aninateChangePic(m_left, timeout){
    /* 動畫移動 */
    $("#slider").animate( {"margin-left": m_left + "px"}, timeout, 'ease', function(){  
    
        /* 處理迴圈的問題(此處是為了處理無限左移或無限右移的問題) */
        if(m_left==0  || Math.abs(m_left)>= img_w*pic_num*2 ){
            $("#slider").css("margin-left", "-" + (img_w * pic_num) +"px");
            $("#msg").text("reset ok!");
        }
        showPicNo();
    });
}

/* 設定定時變換圖片 */
var timer = "";
function setTimer(){
    timer = setInterval("changePicTimer()", 4000);
}
setTimer();

showPicNo();

</script>
</body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More