HTML+CSS+JS实现 ❤️H5图片列表滑动特效❤️
生活随笔
收集整理的這篇文章主要介紹了
HTML+CSS+JS实现 ❤️H5图片列表滑动特效❤️
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
🍅 作者主頁：Java李楊勇?
🍅 簡介：Java領(lǐng)域優(yōu)質(zhì)創(chuàng)作者🏆、【java李楊勇】公號作者? ?簡歷模板、學(xué)習(xí)資料、面試題庫、技術(shù)互助【關(guān)注我，都給你】
🍅 歡迎點(diǎn)贊 👍 收藏 ?留言 📝 ??
效果演示：?文末獲取源碼
代碼目錄：
主要代碼實現(xiàn)：
CSS樣式：
html, body {height: 100%;width: 100%;overflow: hidden;padding: 0;margin: 0; }.slider {cursor: -webkit-grab;cursor: grab;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;width: 85vw;height: 100vh;display: -webkit-box;display: flex;-webkit-box-align: center;align-items: center;margin-left: auto;margin-right: auto; }.slider__slides {display: -webkit-box;display: flex; }.slide {--h: 35vw;--w: calc(var(--h) * var(--m));display: -webkit-box;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;flex-direction: column;margin-right: 6rem;overflow: hidden; }.slide__inner {position: relative;height: var(--h);width: var(--w);overflow: hidden; }.slide__img {position: absolute;top: 0;left: -50px;right: -50px;bottom: 0;background-color: rgba(255, 255, 255, 0.1); }.slide__img img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;-o-object-fit: cover;object-fit: cover;pointer-events: none; }JavaScript代碼 :
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>H5圖片列表滑動特效</title><link rel="stylesheet" href="css/style.css"></head><body><div class="slider | js-slider"><div class="slider__slides | js-slides"><div class="slide | js-slide" style="--m: 1.6;"><div class="slide__inner"><div class="slide__img | js-slide-img"><img src="img/1.jpg" alt=""></div></div></div><div class="slide | js-slide" style="--m: 1;"><div class="slide__inner"><div class="slide__img | js-slide-img"><img src="img/2.jpg" alt=""></div></div></div><div class="slide | js-slide" style="--m: 0.85;"><div class="slide__inner"><div class="slide__img | js-slide-img"><img src="img/3.jpg" alt=""></div></div></div><div class="slide | js-slide" style="--m: 1.5;"><div class="slide__inner"><div class="slide__img | js-slide-img"><img src="img/2.jpg" alt=""></div></div></div><div class="slide | js-slide" style="--m: 1.25;"><div class="slide__inner"><div class="slide__img | js-slide-img"><img src="img/1.jpg" alt=""></div></div></div><div class="slide | js-slide" style="--m: 1.6;"><div class="slide__inner"><div class="slide__img | js-slide-img"><img src="img/3.jpg" alt=""></div></div></div><div class="slide | js-slide" style="--m: 1;"><div class="slide__inner"><div class="slide__img | js-slide-img"><img src="img/1.jpg" alt=""></div></div></div><div class="slide | js-slide" style="--m: 0.85;"><div class="slide__inner"><div class="slide__img | js-slide-img"><img src="img/2.jpg" alt=""></div></div></div><div class="slide | js-slide" style="--m: 1.5;"><div class="slide__inner"><div class="slide__img | js-slide-img"><img src="img/3.jpg" alt=""></div></div></div><div class="slide | js-slide" style="--m: 1.25;"><div class="slide__inner"><div class="slide__img | js-slide-img"><img src="img/1.jpg" alt=""></div></div></div></div></div><script src='js/gsap.min.js'></script><script src='js/lodash.min.js'></script><script src="js/script.js"></script></body></html>上面的圖片可以自己替換成喜歡的樣子
源碼獲取
大家點(diǎn)贊、收藏、關(guān)注、評論我啦 、查看博主主頁或下方微信公眾號獲取更多~！
打卡 文章 更新?51??/? 100天
精彩推薦更新中：
HTML5大作業(yè)實戰(zhàn)案例《100套》
Java畢設(shè)項目精品實戰(zhàn)案例《100套》?
總結(jié)
以上是生活随笔為你收集整理的HTML+CSS+JS实现 ❤️H5图片列表滑动特效❤️的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： php 邮箱开发教程,php开发中表单验
- 下一篇： java游戏猿人时代_学习java编程就