js에서 사진을 좌우로 슬라이드하는 방법

이 글은 주로 모바일 웹 그림의 좌우 슬라이딩 효과에 대한 js 구현을 자세히 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.

저는 현재 모바일 웹 사이트를 운영하고 있습니다. 사진 표시 효과:

1. 사진을 클릭하면 다른 사진을 표시하려면 왼쪽이나 오른쪽으로 스와이프하세요.
2. 슬라이드가 특정 범위를 초과하면 자동으로 다음 사진으로 이동합니다. 슬라이드가 특정 범위를 초과하지 않으면 현재 사진 위치로 돌아갑니다. 여기서 슬라이딩 효과는 애니메이션화되어야 합니다

구현:

각 그림 외부에 p가 있고 너비는 100%로 설정되어 있습니다. 가장 바깥쪽 레이어 [outerp]에 p가 있고 너비는 다음과 같이 설정됩니다. : 전체 사진 수량*100+'%'. 최외곽 p에 대한 touchstart, touchmove 및 touchend 이벤트 청취 처리 기능을 설정합니다. touchmove에서 이동 x축 거리에 따라 outp의 x축 거리를 동적으로 변경하여 touchend에서 슬라이딩 효과를 결정합니다. 현재 슬라이딩 거리에 따른 거리. 다음 사진은 여전히 ​​현재 사진 위치로 돌아갑니다.

이전에는 Outerp의 위치 속성을 설정한 다음 왼쪽 값을 변경하여 이동 효과를 얻을 수 있었습니다. 여기서는 간단하고 애니메이션 효과를 얻을 수 있는 CSS3 애니메이션 함수 변환을 사용합니다. 애니메이션 시간 정의:

-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;
}

1, touchstart

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

2, touchmove

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);

3, touchend

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);

요약:

1에 의해 애니메이션 매개변수와 효과가 동적으로 추가됩니다. js에서는 미리 정의할 필요가 없습니다2.translate(x,y)와 같은 매개변수를 사용하면 그림이 움직일 때 진동합니다3. (0), 사진도 진동합니다

4. moveX(moveX) ranslateZ(0) 형식을 사용하는 경우 moveX가 '50%'와 같은 백분율 값을 사용하면 Android 모바일에서는 애니메이션 효과가 없습니다. 휴대폰 자동브라우저와 UC브라우저는 px를 사용하세요 단위값은 정상입니다

이동시 이미지 흔들림을 방지하고 애니메이션 효과를 확실하게 보장하기 위해서는 moveX(100px) ranslateZ(0), 그리고 이동 거리에 px 값을 사용하세요

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.

관련 기사:

layui 상위-하위 창에서 매개변수를 전달하는 방법에 대한 자세한 해석

WeChat 애플릿에서 이미지 구성 요소 그림 적응형 디스플레이를 구현하는 방법

VUE 모바일 뮤직 WEBAPP의 도메인 간 요청 실패 정보 질문

위 내용은 js에서 사진을 좌우로 슬라이드하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!