모바일 웹 그림의 좌우 슬라이딩을 구현하는 js를 설명하는 예

이 글은 주로 js가 모바일 웹 사진의 좌우 슬라이딩 효과를 구현하는 방법을 자세히 소개합니다. 관심 있는 친구들이 참고하면 좋을 것 같습니다.

최근에 사진 표시 효과가 있는 모바일 웹사이트를 작업하고 있습니다.

1. 사진을 클릭하면 다른 사진을 표시하려면 해당 사진이 전체 화면으로 표시됩니다.
2. 슬라이드가 특정 범위를 초과하면 자동으로 다음 사진으로 이동합니다. 슬라이드가 특정 범위를 초과하지 않으면 현재 사진 위치로 돌아갑니다. 여기서 슬라이딩 효과는 애니메이션화되어야 합니다

구현:

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

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

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、터치엔드

outerp.addEventListener('touchend',function(){
      $(this).addClass('transition);//添加动画效果
       var moveX=100;//此处计算移动移动下一张图片还是退货当前图片代码省略       
        $(this).css('-webkit-transform', 'translateX('+ moveX +'px) translateZ(0)'); //移动图片
},false);

요약:

1.outerp의 애니메이션 매개변수와 효과는 js에 의해 동적으로 추가되므로 미리 정의할 필요가 없습니다
2. 이동 시 그림이 진동합니다
3. moveX를 사용하면 '50%'와 같은 백분율 값을 사용할 경우 안드로이드 휴대폰 자동 브라우저 및 UC 브라우저에서는 애니메이션 효과가 없으며 px 단위의 값은 정상입니다

영상 재생 중 지터 현상을 방지하기 위해 이동 및 애니메이션 효과를 보장하려면 TranslateX(100px)를 사용하는 것이 좋습니다. ranslateZ(0)은 매개변수이고 이동 거리는 px 값을 사용합니다. _jquery

js를 클릭한 후의 사진 그룹은 WeChat 애플릿의 왼쪽 및 오른쪽 슬라이딩 기능을 구현합니다

WeChat 미니 프로그램에서 페이지를 전환하기 위해 왼쪽 및 오른쪽으로 슬라이드하는 방법에 대한 자세한 설명

위 내용은 모바일 웹 그림의 좌우 슬라이딩을 구현하는 js를 설명하는 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!