最近在做一個手機端web站點，里面有一個圖片展示效果：

安次網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、APP開發(fā)、響應式網(wǎng)站建設等網(wǎng)站項目制作，到程序開發(fā)，運營維護。成都創(chuàng)新互聯(lián)公司自2013年起到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設就選成都創(chuàng)新互聯(lián)公司。

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

實現(xiàn)：

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

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

transform參數(shù)：

-webkit-transform:translate(100px,200px) tr //可以設置x、y軸方向移動距離
-webkit-transform:translateX(100px) translateY(200px) translateZ(3000px) 

//可以設置x、y、z軸方向移動距離.3D效果
-webkit-transition:.4s ease;//設置動畫時間

定義動畫時間：

.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];//獲取當前outerDiv的x軸坐標
          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;//此處計算移動移動下一張圖片還是退貨當前圖片代碼省略       
        $(this).css('-webkit-transform', 'translateX('+ moveX +'px) translateZ(0)'); //移動圖片
},false);

總結(jié)：

1、outerDiv的動畫參數(shù)和效果都是js動態(tài)添加的，不需要事先定義
2、用translate(x,y)這種參數(shù)時，圖片移動時會顫動
3、用translateX() 且?guī)ranslateZ(0)時圖片移動正常，不帶translateZ(0)同樣出現(xiàn)顫動
4、如果用的是translateX(moveX) ranslateZ(0)這種格式，如果moveX用的是百分比值,如‘50%'，在android手機自動瀏覽器和uc瀏覽器中則沒有動畫效果，用px單位值則正常

為防止圖片移動過程顫動和保證動畫效果，建議大家用translateX(100px) ranslateZ(0)這種參數(shù)，且移動距離用px值

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

當前文章：js實現(xiàn)手機web圖片左右滑動效果
URL網(wǎng)址：http://www.rwnh.cn/article6/jsdjig.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供面包屑導航、商城網(wǎng)站、標簽優(yōu)化、軟件開發(fā)、網(wǎng)站建設、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)