あなたがそのようなニーズに遭遇したことがあるのか、あるいは同様の効果を見たことがあるかはわかりません。リストに入ってカルーセル画像を詳細に表示すると、指がカルーセル画像をスクロールすると、カルーセルの高さのコンテナーが適応します。コンテンツは上に絞り込まれ、スライド中に高さが計算され、手を離すと次の画像にスクロールします。また、対応する画像の高さを計算して、スローアニメーション効果を作成します。下の写真のようになります。
#上に画像コンテンツとテキストが表示され、カルーセルがスライドするにつれて高さが変化します。早速、コードに進みましょう。
実装方法
マウスのmounseまたは指のスライドtouchイベントをリッスンすることで画像を制御できます。記事のみ 高度な適応性を実現する方法に焦点を当てて、カルーセル機能を実装するアイデアについて話しましょう。
テキストを直接開始して、最初に HTML コード構造を見てみましょう。
html 構造
![カルーセル チャートの高さを調整する方法の詳細な例]()
![カルーセル チャートの高さを調整する方法の詳細な例]()
![カルーセル チャートの高さを調整する方法の詳細な例]()
这是一段内容
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 < d ? d : translatex } data.ele.style.transform = `translate3d(${translatex}px, 0, 0)` data.ele.style.webkitTransform = `translate3d(${translatex}px, 0, 0)` }
マウスを離したとき
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 = '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) }
上記の単純なカルーセル効果は完成しましたが、まだ欠けているものが 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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
