本文主要為大家詳細介紹了js實現手機web圖片左右滑動效果,具有一定的參考價值,有興趣的朋友們可以參考一下,希望能幫助到大家。
最近在做一個手機端web站點,裡面有一個圖片展示效果:
1、點擊任意圖片時圖片全螢幕展示,左右滑動能展示其他的圖片。
2、滑動超過一定範圍自動滑到下一張圖片,不超過則回退到目前照片位置。此處的滑動要帶動畫效果
實作:
每張圖片外面一個p,將其寬度設定為100%,最外層有一個p[命名為outerp],其寬度設為:總圖片數量*100+'%'。給最外層p設定touchstart,touchmove,touchend事件監聽處理函數,在touchmove中根據移動的x軸距離動態改變outerp的x軸距離即可實現圖片滑動效果,在touchend中根據當前滑動的距離判斷滑動到下一張還是回退目前圖片位置。
之前我們可以透過設定outerp的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
#
outerp.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 = $('.sourcePhotop').css("-webkit-transform").split(',')[4];//获取当前outerp的x轴坐标 touchOption.startTranslateX = parseInt(transfrom_info); } },false);2、touchmove
#
outerp.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
#
outerp.addEventListener('touchend',function(){ $(this).addClass('transition);//添加动画效果 var moveX=100;//此处计算移动移动下一张图片还是退货当前图片代码省略 $(this).css('-webkit-transform', 'translateX('+ moveX +'px) translateZ(0)'); //移动图片 },false);
總結:
2、用translate(x,y)這種參數時,圖片移動時會顫動
3、用translateX( ) 且帶translateZ(0)時圖片移動正常,不帶translateZ(0)同樣出現顫動
4、如果用的是translateX(moveX) ranslateZ(0)這種格式,如果moveX用的是百分比值,如'50%',在android手機自動瀏覽器和uc瀏覽器中則沒有動畫效果,用px單位值則正常
jQuery點擊後一組圖片左右滑動的實作程式碼_jquery
以上是實例講解js實作手機web圖片左右滑動的詳細內容。更多資訊請關注PHP中文網其他相關文章!