最近在做一個手機(jī)端web站點(diǎn)，里面有一個圖片展示效果：

1、點(diǎn)擊任意圖片時圖片全屏展示，左右滑動能展示其他的圖片。
2、滑動超過一定范圍自動滑到下一張圖片，不超過則回退到當(dāng)前照片位置。此處的滑動要帶動畫效果

實(shí)現(xiàn)：

每張圖片外面一個div，將其寬度設(shè)置為100%，最外層有一個div[命名為outerDiv]，其寬度設(shè)為：總圖片數(shù)量*100+‘%'。給最外層div設(shè)置touchstart,touchmove,touchend事件監(jiān)聽處理函數(shù)，在touchmove中根據(jù)移動的x軸距離動態(tài)改變outerDiv的x軸距離即可實(shí)現(xiàn)圖片滑動效果，在touchend中根據(jù)當(dāng)前滑動的距離判斷滑動到下一張還是回退當(dāng)前圖片位置。

之前我們可以通過設(shè)置outerDiv的position屬性，然后改變left值實(shí)現(xiàn)移動效果，這里我用的是css3的動畫函數(shù)transform，簡單,且可以實(shí)現(xiàn)動畫效果

transform參數(shù)：

-webkit-transform:translate(100px,200px) tr //可以設(shè)置x、y軸方向移動距離-webkit-transform:translateX(100px) translateY(200px) translateZ(3000px) //可以設(shè)置x、y、z軸方向移動距離.3D效果-webkit-transition:.4s ease;//設(shè)置動畫時間

定義動畫時間：

.transition {  -webkit-transition:.4s ease;  -moz-transition:.4s ease;  -ms-transition:.4s ease;  -o-transition: .4s ease;  transition:.4s ease;}

關(guān)鍵代碼：

var touchOption={touchStartX:0,startTranslateX:0,moveDistance:0};

1、touchstart

outerDiv.addEventListener('touchstart',function(){$(this).removeClass('transition');//移除動畫效果，否則移動時圖片會顫動touchOption.touchStartX = e.touches[0].clientX;        if ($(this).css("-webkit-transform") == 'none') {          touchOption.startTranslateX = 0;        }        else {          //css-webkit-transform屬性值格式：matrix(1, 0, 0, 1, -4140, 0)          var transfrom_info = $('.sourcePhotoDiv').css("-webkit-transform").split(',')[4];//獲取當(dāng)前outerDiv的x軸坐標(biāo)          touchOption.startTranslateX = parseInt(transfrom_info);        }},false);

2、touchmove

outerDiv.addEventListener('touchmove',function(){       touchOption.moveDistance = (e.touches[0].clientX - touchOption.touchStartX);        var TranslateX = touchOption.startTranslateX + touchOption.moveDistance;        $(this).css('-webkit-transform', 'translateX('+ TranslateX +'px) translateZ(0)'); //移動圖片},false);

3、touchend

outerDiv.addEventListener('touchend',function(){      $(this).addClass('transition);//添加動畫效果       var moveX=100;//此處計(jì)算移動移動下一張圖片還是退貨當(dāng)前圖片代碼省略               $(this).css('-webkit-transform', 'translateX('+ moveX +'px) translateZ(0)'); //移動圖片},false);