溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
最近在做一個手機端web站點，里面有一個圖片展示效果：
1、點擊任意圖片時圖片全屏展示，左右滑動能展示其他的圖片。
2、滑動超過一定范圍自動滑到下一張圖片，不超過則回退到當前照片位置。此處的滑動要帶動畫效果
實現：
每張圖片外面一個div，將其寬度設置為100%，最外層有一個div[命名為outerDiv]，其寬度設為：總圖片數量*100+‘%'。給最外層div設置touchstart,touchmove,touchend事件監聽處理函數，在touchmove中根據移動的x軸距離動態改變outerDiv的x軸距離即可實現圖片滑動效果，在touchend中根據當前滑動的距離判斷滑動到下一張還是回退當前圖片位置。
之前我們可以通過設置outerDiv的position屬性，然后改變left值實現移動效果，這里我用的是css3的動畫函數transform，簡單,且可以實現動畫效果
transform參數：
-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;
}
關鍵代碼：
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);
總結：
1、outerDiv的動畫參數和效果都是js動態添加的，不需要事先定義
2、用translate(x,y)這種參數時，圖片移動時會顫動
3、用translateX() 且帶translateZ(0)時圖片移動正常，不帶translateZ(0)同樣出現顫動
4、如果用的是translateX(moveX) ranslateZ(0)這種格式，如果moveX用的是百分比值,如‘50%'，在android手機自動瀏覽器和uc瀏覽器中則沒有動畫效果，用px單位值則正常
為防止圖片移動過程顫動和保證動畫效果，建議大家用translateX(100px) ranslateZ(0)這種參數，且移動距離用px值
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
