モバイルWeb画像の左右スライドを実現するjsの解説例

この記事では、js がモバイル Web 画像の左右のスライド効果を実現する方法を主に詳しく紹介します。興味のある方はぜひ参考にしてください。

最近、画像表示効果のあるモバイル Web サイトに取り組んでいます。

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

実装:

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

outerp の位置属性を設定し、左の値を変更して動きの効果を実現する前に、ここでは 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

りー

3、タッチエンド

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. アニメーションパラメータとouterpのエフェクトはjsによって動的に追加されるため、事前に定義する必要はありません
2.translate(x,y)などのパラメータを使用する場合、移動時に画像が振動します
3 .translateZ(0) を使用した場合、translateZ(0) を使用しない場合、画像も振動します。 moveX がパーセンテージを使用する場合に使用されます。「50%」などの値は、Android 携帯電話の自動ブラウザーと UC ブラウザーではアニメーション効果がなく、ピクセル単位の値は通常です

画像の移動中のジッターを防ぐため、およびアニメーション効果を確実にするには、ranslateZ(0) のようなtranslateX(100px)パラメータを使用することをお勧めします。移動距離にはpx値を使用します

関連推奨事項:

グループの左右にスライドするためのjQuery実装コード_jqueryをクリックした後の写真

jsはWeChatアプレットの左右スライド機能を実装します

WeChatミニプログラムで左右にスライドしてページを切り替える方法を詳しく説明します

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