カルーセル チャートの高さを調整する方法の詳細な例

この記事はフロントエンドに関する関連知識を提供します。主にカルーセルの適応高さを作成する方法を紹介します。興味のある友人は以下を参照してください。すべての人に役立つことを願っています。

あなたがそのようなニーズに遭遇したことがあるのか​​、あるいは同様の効果を見たことがあるかはわかりません。リストに入ってカルーセル画像を詳細に表示すると、指がカルーセル画像をスクロールすると、カルーセルの高さのコンテナーが適応します。コンテンツは上に絞り込まれ、スライド中に高さが計算され、手を離すと次の画像にスクロールします。また、対応する画像の高さを計算して、スローアニメーション効果を作成します。下の写真のようになります。

#上に画像コンテンツとテキストが表示され、カルーセルがスライドするにつれて高さが変化します。早速、コードに進みましょう。

実装方法

マウスの mounse または指のスライド touch イベントをリッスンすることで画像を制御できます。記事のみ 高度な適応性を実現する方法に焦点を当てて、カルーセル機能を実装するアイデアについて話しましょう。

テキストを直接開始して、最初に HTML コード構造を見てみましょう。

html 構造

<div>
  <div>
    <div>
      <div>
        <img  alt="カルーセル チャートの高さを調整する方法の詳細な例" >
      </div>
      <div>
        <img  alt="カルーセル チャートの高さを調整する方法の詳細な例" >
      </div>
      <div>
        <img  alt="カルーセル チャートの高さを調整する方法の詳細な例" >
      </div>
    </div>
  </div>
  <div>这是一段内容</div>
</div>

css スタイル

.container {
  width: 100%;
  overflow: hidden;
}.wrapper {
  width: 100%;
}.swiper {
  font-size: 0;
  white-space: nowrap;
}.item {
  display: inline-block;
  width: 100%;
  vertical-align: top; // 一定要使用顶部对齐，不然会出现错位的情况
}.item img {
  width: 100%;
  height: auto;
  display: block;
}.content {
  position: relative;
  z-index: 9;
  font-size: 14px;
  text-align: center;
  padding-top: 20px;
  background-color: #fff;
  height: 200px;
}

注目に値する点がいくつかあります;

1. 親の white-space を使用する場合、サブセット要素の設定 display: inline-block により、高さが異なると位置ずれが発生します。解決策は、vertical-align を追加することです。 : top 、具体的な理由については詳しく説明しません。
2. さらに、親も font-size: 0 を設定する必要があります。これを追加しない場合、2 つのサブセットの間にギャップが生じます。追加すると、ギャップは次のようになります。削除されました。
3. img 画像を高さ適応、幅 100% に設定し、display: block を追加するのが最善です。そうしないと、下部に隙間ができます。

上記の html コンテナ部分とスタイルを記述した後、js がどのように処理されるかを見てみましょう。

#Js 実装 #始める前に、まずこのカルーセルと適応性の高い問題を実装する方法について考えてみましょう。これはいくつかのステップに分かれています;

マウスが押されたとき、現在位置とその他の初期化情報を記録し、対応するマウス イベントを現在の親要素に追加する必要があります。

1. マウスが移動すると、現在のリアルタイム
が移動したときの
2. ポイントと、 が押されたときの ポイントを減算して、マウスの距離と位置を取得する必要があります。親要素はそのスタイル transform の位置を設定し、途中でその他の境界線の処理も実行し、もちろん高さを変更します。 マウスを放すと、移動中に記録された距離情報を使用して左右にスライドしたかどうかを判断し、対応するインデックスを取得し、次の画像をスクロールする距離をインデックスから計算できます。 、リリース後に設定されます
transition
3. アニメーションをトランジションするだけです。
想像したアイデアに従って、テキストを開始します;

初期化データ

const data = {
  ele: null,
  width: 0,
  len: 0,
  proportion: .3,
  type: false,
  heights: [500, 250, 375],
  currentIndex: 0,
  startOffset: 0,
  clientX: 0,
  distanceX: 0,
  duration: 30,
  touching: false
}

const wrapper = data.ele = document.querySelector('.wrapper')
const items = document.querySelectorAll('.item')
data.width = wrapper.offsetWidth
data.len = items.length - 1
wrapper.addEventListener('touchstart', onStart)
wrapper.addEventListener('mousedown', onStart)

ここで高さを行う前に、画像を待つ必要があることに注意してください各要素の高さについては、怠惰を避けるためにここでは特定のコードは書きませんでした。上記の

heights

は、レンダリング後の各画像の高さに対応します。一般に、バックエンドに帯域幅を返させるのが最善です。高いため、これを処理するために onload を使用する必要はありません。 マウスを押したとき

function onStart(event) {
  if (event.type === 'mousedown' && event.which !== 1) return
  if (event.type === 'touchstart' && event.touches.length > 1) return
  data.type = event.type === 'touchstart'
  const events = data.type ? event.touches[0] || event : event

  data.touching = true
  data.clientX = events.clientX
  data.startOffset = data.currentIndex * -data.width

  data.ele.style.transition = `none`
  window.addEventListener(data.type ? 'touchmove' : 'mousemove', onMove, { passive: false })
  window.addEventListener(data.type ? 'touchend' : 'mouseup', onEnd, false)
}

上記のコードではPCとモバイル端末に対応させていますので、計画通り、

clientX

の座標と初期値を保存しておきます。 startOffset これは、現在のインデックスと親の幅から計算されます。シナリオでは、2 番目の画像から 3 番目の画像にスクロールするときに、前の最初の画像からの距離も追加されます。計算エラーがある場合は、下にスライドするときにコードを確認してください。 また、モバイル側の互換性を目的として動きを監視する場合に

passive: false

を追加します。 マウスが移動すると、

function onMove(event) {
  event.preventDefault()
  if (!data.touching) return
  const events = data.type ? event.touches[0] || event : event

  data.distanceX = events.clientX - data.clientX

  let translatex = data.startOffset + data.distanceX
  if (translatex > 0) {
    translatex = translatex > 30 ? 30 : translatex
  } else {
    const d = -(data.len * data.width + 30)
    translatex = translatex < d ? d : translatex
  }

  data.ele.style.transform = `translate3d(${translatex}px, 0, 0)`
  data.ele.style.webkitTransform = `translate3d(${translatex}px, 0, 0)`
}

が境界線で処理されます。距離が 30 を超えると、スライドを続けることができなくなります。以前に保存した

startOffset# の値を追加します。 ##, 得られるのは、具体的な移動距離です。

マウスを離したとき

function onEnd() {
  if (!data.touching) return
  data.touching = false

  // 通过计算 proportion 滑动的阈值拿到释放后的索引
  if (Math.abs(data.distanceX) > data.width * data.proportion) {
    data.currentIndex -= data.distanceX / Math.abs(data.distanceX)
  }
  if (data.currentIndex < 0) {
    data.currentIndex = 0
  } else if (data.currentIndex > data.len) {
    data.currentIndex = data.len
  }
  const translatex = data.currentIndex * -data.width

  data.ele.style.transition = &#39;all .3s ease&#39;
  data.ele.style.transform = `translate3d(${translatex}px, 0, 0)`
  data.ele.style.webkitTransform = `translate3d(${translatex}px, 0, 0)`

  window.removeEventListener(data.type ? &#39;touchmove&#39; : &#39;mousemove&#39;, onMove, { passive: false })
  window.removeEventListener(data.type ? &#39;touchend&#39; : &#39;mouseup&#39;, onEnd, false)
}

スライド閾値を計算することで、離した後のインデックス、つまり親の幅の3分の1を超えた時点でマウスが離されることになります。次の画像に移動します。インデックスを取得した後、移動する最終距離を設定できます。イージング効果を作成するために、

transition

を忘れずに追加してください。最後に、イベント リスナーを削除することを忘れないでください。

上記の単純なカルーセル効果は完成しましたが、まだ欠けているものが 1 つあり、それはこの記事で説明する必要がある適応高さです。理解を容易にするために、それについては個別に説明します。 適応性が高い

移動時に関連するコードを整理できます次のコードを

onMove 関数に追加して、リアルタイムの高さを取得します。

const index = data.currentIndex
const currentHeight = data.heights[index]
    
// 判断手指滑动的方向拿到下一张图片的高度
let nextHeight = data.distanceX > 0 ? data.heights[index - 1] : data.heights[index + 1]
let diffHeight = Math.abs((nextHeight - currentHeight) * (data.distanceX / data.width))
let realHeight = currentHeight + (nextHeight - currentHeight > 0 ? diffHeight : -diffHeight) 
 data.ele.style.height = `${realHeight}px`

这里是移动时的高度变化，另外还需要在释放时也要处理， onEnd 函数里加上以下代码。

// ... 因为上面已经拿到了下一张的索引 currentIndex
const currentHeight = data.heights[data.currentIndex]

data.ele.style.height = `${currentHeight}px`

因为上面已经拿到了下一张的索引 currentIndex 所以再滚动到下一张是就直接通过数据获取就可以了。

推荐学习：《web前端开发视频教程》

以上がカルーセル チャートの高さを調整する方法の詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。