最近在做一個(gè)手機(jī)端web站點(diǎn)，里面有一個(gè)圖片展示效果：
1、點(diǎn)擊任意圖片時(shí)圖片全屏展示，左右滑動(dòng)能展示其他的圖片。
2、滑動(dòng)超過一定范圍自動(dòng)滑到下一張圖片，不超過則回退到當(dāng)前照片位置。此處的滑動(dòng)要帶動(dòng)畫效果
實(shí)現(xiàn)：
每張圖片外面一個(gè)div，將其寬度設(shè)置為100%，最外層有一個(gè)div[命名為outerDiv]，其寬度設(shè)為：總圖片數(shù)量*100+‘%'。給最外層div設(shè)置touchstart,touchmove,touchend事件監(jiān)聽處理函數(shù)，在touchmove中根據(jù)移動(dòng)的x軸距離動(dòng)態(tài)改變outerDiv的x軸距離即可實(shí)現(xiàn)圖片滑動(dòng)效果，在touchend中根據(jù)當(dāng)前滑動(dòng)的距離判斷滑動(dòng)到下一張還是回退當(dāng)前圖片位置。
之前我們可以通過設(shè)置outerDiv的position屬性，然后改變left值實(shí)現(xiàn)移動(dòng)效果，這里我用的是css3的動(dòng)畫函數(shù)transform，簡單,且可以實(shí)現(xiàn)動(dòng)畫效果
transform參數(shù)：
-webkit-transform:translate(100px,200px) tr //可以設(shè)置x、y軸方向移動(dòng)距離-webkit-transform:translateX(100px) translateY(200px) translateZ(3000px) //可以設(shè)置x、y、z軸方向移動(dòng)距離.3D效果-webkit-transition:.4s ease;//設(shè)置動(dòng)畫時(shí)間
定義動(dòng)畫時(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');//移除動(dòng)畫效果，否則移動(dòng)時(shí)圖片會(huì)顫動(dòng)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)'); //移動(dòng)圖片},false);3、touchend
outerDiv.addEventListener('touchend',function(){ $(this).addClass('transition);//添加動(dòng)畫效果 var moveX=100;//此處計(jì)算移動(dòng)移動(dòng)下一張圖片還是退貨當(dāng)前圖片代碼省略 $(this).css('-webkit-transform', 'translateX('+ moveX +'px) translateZ(0)'); //移動(dòng)圖片},false);總結(jié)：
1、outerDiv的動(dòng)畫參數(shù)和效果都是js動(dòng)態(tài)添加的，不需要事先定義
2、用translate(x,y)這種參數(shù)時(shí)，圖片移動(dòng)時(shí)會(huì)顫動(dòng)
3、用translateX() 且?guī)ranslateZ(0)時(shí)圖片移動(dòng)正常，不帶translateZ(0)同樣出現(xiàn)顫動(dòng)
4、如果用的是translateX(moveX) ranslateZ(0)這種格式，如果moveX用的是百分比值,如‘50%'，在android手機(jī)自動(dòng)瀏覽器和uc瀏覽器中則沒有動(dòng)畫效果，用px單位值則正常
為防止圖片移動(dòng)過程顫動(dòng)和保證動(dòng)畫效果，建議大家用translateX(100px) ranslateZ(0)這種參數(shù)，且移動(dòng)距離用px值
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
