jsで画像を左右にスライドさせる方法

この記事では、主にモバイル Web 画像の左右のスライド効果の JS 実装について詳しく紹介します。興味のある友人は参照してください。

私は現在、モバイル Web サイトに取り組んでいます。画像表示 効果:

1. 画像をクリックすると、左または右にスワイプして他の画像が表示されます。
2. スライドが一定の範囲を超えると、自動的に次の写真にスライドします。一定の範囲を超えない場合は、現在の写真の位置に戻ります。ここのスライド効果はアニメーション化する必要があります

実装:

各画像の外側に p があり、その幅は 100% に設定されます。最も外側のレイヤー [outerp という名前] に p があり、その幅は に設定されます。 : 合計画像量*100+'%'。一番外側の p に対して touchstart、touchmove、touchend イベントリスニング処理関数を設定します。touchmove では、移動する x 軸の距離に応じて、outerp の x 軸の距離を動的に変更し、画像のスライド効果を実現します。現在のスライド距離に基づいて次の画像が現在の画像位置に戻ります。

以前は、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、touchend

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

概要:

1 によって、アニメーション パラメータとエフェクトが動的に追加されます。 js、不要 事前に定義しておいてください
2.translate(x,y)などのパラメータを使用すると、移動時に画像が振動します
3.translateZ(0)でtranslateX()を使用すると、画像は通常通り移動します。 (0)、画像も振動します
4. フォーマットtranslateX(moveX) ranslateZ(0)を使用する場合、moveXが「50%」などのパーセント値を使用する場合、Androidモバイルではアニメーション効果はありません。携帯電話の自動ブラウザとUCブラウザでは、pxを使用してください。単位値は通常です

移動中の画像の揺れを防ぎ、アニメーション効果を確実にするために、translateX(100px) ranslateZ(0)、移動距離には px 値を使用します

上記は私が皆さんのためにまとめたものです。将来的に皆さんのお役に立てれば幸いです。

関連記事:

layui親子ウィンドウがパラメータを渡す方法の詳細な解釈

WeChatアプレットで画像コンポーネント画像適応表示を実装する方法

VUE Mobile Music WEBAPPでのクロスドメインリクエストの失敗について 質問

以上がjsで画像を左右にスライドさせる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。