ホームページ > 記事 > ウェブフロントエンド > カルーセル チャートの高さを調整する方法の詳細な例
あなたがそのようなニーズに遭遇したことがあるのか、あるいは同様の効果を見たことがあるかはわかりません。リストに入ってカルーセル画像を詳細に表示すると、指がカルーセル画像をスクロールすると、カルーセルの高さのコンテナーが適応します。コンテンツは上に絞り込まれ、スライド中に高さが計算され、手を離すと次の画像にスクロールします。また、対応する画像の高さを計算して、スローアニメーション効果を作成します。下の写真のようになります。
#上に画像コンテンツとテキストが表示され、カルーセルがスライドするにつれて高さが変化します。早速、コードに進みましょう。
実装方法
マウスの 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; }
注目に値する点がいくつかあります;
white-space
を使用する場合、サブセット要素の設定 display: inline-block
により、高さが異なると位置ずれが発生します。解決策は、vertical-align を追加することです。 : top
、具体的な理由については詳しく説明しません。 font-size: 0
を設定する必要があります。これを追加しない場合、2 つのサブセットの間にギャップが生じます。追加すると、ギャップは次のようになります。削除されました。 100%
に設定し、display: block
を追加するのが最善です。そうしないと、下部に隙間ができます。 上記の html
コンテナ部分とスタイルを記述した後、js
がどのように処理されるかを見てみましょう。
#Js 実装 #始める前に、まずこのカルーセルと適応性の高い問題を実装する方法について考えてみましょう。これはいくつかのステップに分かれています;
マウスが押されたとき、現在位置とその他の初期化情報を記録し、対応するマウス イベントを現在の親要素に追加する必要があります。
マウスを放すと、移動中に記録された距離情報を使用して左右にスライドしたかどうかを判断し、対応するインデックスを取得し、次の画像をスクロールする距離をインデックスから計算できます。 、リリース後に設定されます
初期化データ
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)
は、レンダリング後の各画像の高さに対応します。一般に、バックエンドに帯域幅を返させるのが最善です。高いため、これを処理するために 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) }
の座標と初期値を保存しておきます。 startOffset
これは、現在のインデックスと親の幅から計算されます。シナリオでは、2 番目の画像から 3 番目の画像にスクロールするときに、前の最初の画像からの距離も追加されます。計算エラーがある場合は、下にスライドするときにコードを確認してください。 また、モバイル側の互換性を目的として動きを監視する場合に
を追加します。 マウスが移動すると、
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 <h4 data-id="heading-6"> が境界線で処理されます。距離が 30 を超えると、スライドを続けることができなくなります。以前に保存した </h4>startOffset# の値を追加します。 ##, 得られるのは、具体的な移動距離です。 <p><code>マウスを離したとき</code></p><pre class="brush:php;toolbar:false">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 data.len) { data.currentIndex = data.len } const translatex = data.currentIndex * -data.width data.ele.style.transition = 'all .3s ease' data.ele.style.transform = `translate3d(${translatex}px, 0, 0)` data.ele.style.webkitTransform = `translate3d(${translatex}px, 0, 0)` window.removeEventListener(data.type ? 'touchmove' : 'mousemove', onMove, { passive: false }) window.removeEventListener(data.type ? 'touchend' : 'mouseup', onEnd, false) }スライド閾値を計算することで、離した後のインデックス、つまり親の幅の3分の1を超えた時点でマウスが離されることになります。次の画像に移動します。インデックスを取得した後、移動する最終距離を設定できます。イージング効果を作成するために、
上記の単純なカルーセル効果は完成しましたが、まだ欠けているものが 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
所以再滚动到下一张是就直接通过数据获取就可以了。
以上がカルーセル チャートの高さを調整する方法の詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。