最近公司需要做手機網(wǎng)站項目，在腳本js框架上我們采用了輕量級的js框架zepto.js，今天我們就來說下使用zepto.js實現(xiàn)手機網(wǎng)站焦點圖觸屏劃動效果，有興趣的朋友可以先進這個網(wǎng)站“http://zeptojs.com/”，本程序是一個測試程序，可以左右無限制的劃動。查看地址：dome 推薦使用非IE瀏覽器查看效果。下面提出焦點圖切換源碼：
<!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="" 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 id="wrap">
<div id="slider">
<div>
<div><img src="img/drag1.jpg"/></div>
<div><img src="img/drag2.jpg"/></div>
<div><img src="img/drag3.jpg"/></div>
<div><img src="img/drag4.jpg"/></div>
</div>
<div>
<div><img src="img/drag1.jpg"/></div>
<div><img src="img/drag2.jpg"/></div>
<div><img src="img/drag3.jpg"/></div>
<div><img src="img/drag4.jpg"/></div>
</div>
<div>
<div><img src="img/drag1.jpg"/></div>
<div><img src="img/drag2.jpg"/></div>
<div><img src="img/drag3.jpg"/></div>
<div><img src="img/drag4.jpg"/></div>
</div>
</div>
</div>
<div id="picNo"></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);
/* 設(shè)置每個圖片的寬度 */
var img_w = $("#wrap").width();
$(".item img").width( img_w + "px" );
var pic_num = $(".items .item").length/3; /* 每組圖片的數(shù)量 */
$("#slider").css("margin-left", -1*(img_w * pic_num) +"px"); /* 默認(rèn)顯示中間那一組的第一個圖片 */
$("#msg").text("pic.width:" + img_w);
//觸摸部分
var touch = {};
var scrollSupressionThreshold = 1; /* 觸發(fā)touchmove的敏感度 */
var verticalDistanceThreshold = 60; /* swipe的觸發(fā)水平方向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"); /* 最原始的坐標(biāo)值 */
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 = {};
}
/* 顯示當(dāng)前是第幾張圖 */
function showPicNo(){
/* 得到當(dāng)前是第幾張圖 */
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(){
/* 處理循環(huán)的問題(此處是為了處理無限左移或無限右移的問題) */
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();
});
}
/* 設(shè)置定時變換圖片 */
var timer = "";
function setTimer(){
timer = setInterval("changePicTimer()", 4000);
}
setTimer();
showPicNo();
</script>
</body>
</html>