兼容手机端的照片横向列表拖拽滚动滑动效果代码
代码语言:html
所属分类:加载滚动
代码描述:兼容手机端的照片横向列表拖拽滚动滑动效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { background: white; 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; } </style> </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="//repo.bfw.wiki/bfwrepo/image/5e0c6f2cae508.png" 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="//repo.bfw.wiki/bfwrepo/image/5e0c6f2cae508.png" 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="//repo.bfw.wiki/bfwrepo/image/5e0c6f2cae508.png" 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="//repo.bfw.wiki/bfwrepo/image/5e0c6f2cae508.png" 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="//repo.bfw.wiki/bfwrepo/image/5e0c6f2cae508.png" 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="//repo.bfw.wiki/bfwrepo/image/5e0c6f2cae508.png" 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="//repo.bfw.wiki/bfwrepo/image/5e0c6f2cae508.png" 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="//repo.bfw.wiki/bfwrepo/image/5e0c6f2cae508.png" 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="//repo.bfw.wiki/bfwrepo/image/5e0c6f2cae508.png" 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="//repo.bfw.wiki/bfwrepo/image/5e0c6f2cae508.png" alt=""></div> </div> </div> </div> </div> <script type="text/javascript" src="//repo..........完整代码请登录后点击上方下载按钮下载查看
网友评论0