动态效果
使用到的文件
better-scroll.min.js
html代码
<div class="book-list-wrapper" id="bookListWrapper">
<div class="book-list">
<div class="book-item">
<div class="book-image">
<img src="./images/middle-age/book1.jpg" alt="book1">
<div class="arrow-icon">
<img src="./images/arrow.png" alt="">
</div>
</div>
<div class="book-info">
<h3 class="book-title">《生命的重建》</h3>
<p class="book-desc">跟随现代人的心灵导师露易丝·海，一起穿越生命痛苦与孤独，解放你的心灵，找到生命的价值，给你一次重建美好人生的机会。</p>
</div>
</div>
<div class="book-item">
<div class="book-image">
<img src="./images/middle-age/book1.jpg" alt="book1">
<div class="arrow-icon">
<img src="./images/arrow.png" alt="">
</div>
</div>
<div class="book-info">
<h3 class="book-title">《生命的重建》</h3>
<p class="book-desc">跟随现代人的心灵导师露易丝·海，一起穿越生命痛苦与孤独，解放你的心灵，找到生命的价值，给你一次重建美好人生的机会。</p>
</div>
</div>
<div class="book-item">
<div class="book-image">
<img src="./images/middle-age/book1.jpg" alt="book1">
<div class="arrow-icon">
<img src="./images/arrow.png" alt="">
</div>
</div>
<div class="book-info">
<h3 class="book-title">《生命的重建》</h3>
<p class="book-desc">跟随现代人的心灵导师露易丝·海，一起穿越生命痛苦与孤独，解放你的心灵，找到生命的价值，给你一次重建美好人生的机会。</p>
</div>
</div>
<div class="book-item">
<div class="book-image">
<img src="./images/middle-age/book1.jpg" alt="book1">
<div class="arrow-icon">
<img src="./images/arrow.png" alt="">
</div>
</div>
<div class="book-info">
<h3 class="book-title">《生命的重建》</h3>
<p class="book-desc">跟随现代人的心灵导师露易丝·海，一起穿越生命痛苦与孤独，解放你的心灵，找到生命的价值，给你一次重建美好人生的机会。</p>
</div>
</div>
<div class="book-item">
<div class="book-image">
<img src="./images/middle-age/book1.jpg" alt="book1">
<div class="arrow-icon">
<img src="./images/arrow.png" alt="">
</div>
</div>
<div class="book-info">
<h3 class="book-title">《生命的重建》</h3>
<p class="book-desc">跟随现代人的心灵导师露易丝·海，一起穿越生命痛苦与孤独，解放你的心灵，找到生命的价值，给你一次重建美好人生的机会。</p>
</div>
</div>
<div class="book-item">
<div class="book-image">
<img src="./images/middle-age/book1.jpg" alt="book1">
<div class="arrow-icon">
<img src="./images/arrow.png" alt="">
</div>
</div>
<div class="book-info">
<h3 class="book-title">《生命的重建》</h3>
<p class="book-desc">跟随现代人的心灵导师露易丝·海，一起穿越生命痛苦与孤独，解放你的心灵，找到生命的价值，给你一次重建美好人生的机会。</p>
</div>
</div>
<!-- 更多书籍项可以按相同结构添加 -->
</div>
</div>
css
.book-list-wrapper {
width: 100%;
overflow: hidden;
position: relative;
-webkit-overflow-scrolling: touch;
touch-action: pan-x;
}
.book-list {
display: flex;
white-space: nowrap;
margin-top: px2rem(80);
will-change: transform;
transform: translateZ(0);
width: max-content; // 确保内容可以横向延伸
.book-item {
display: inline-block;
margin-right: px2rem(30);
width: px2rem(533);
&:hover {
.arrow-icon {
transform: scale(1.1);
}
}
.book-image {
position: relative;
width: px2rem(533);
height: px2rem(747);
img {
width: 100%;
height: 100%;
object-fit: cover;
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
user-select: none;
pointer-events: none; /* 禁止图片接收鼠标事件 */
}
.arrow-icon {
position: absolute;
right: px2rem(27);
bottom: px2rem(27);
width: px2rem(80);
height: px2rem(80);
background: rgba(255, 255, 255, 0.9);
border-radius: px2rem(40);
border: px2rem(1) solid #E6E6E6;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s;
img {
width: px2rem(20);
height: auto;
object-fit: cover;
}
}
}
.book-info {
margin-top: px2rem(25);
width: px2rem(533);
.book-title {
font-family: "Noto Sans SC";
font-weight: 600;
font-size: px2rem(27);
color: #333333;
margin-bottom: px2rem(15);
}
.book-desc {
font-family: "Noto Sans SC";
font-weight: 400;
font-size: px2rem(19);
color: #333333;
line-height: px2rem(32);
text-align: left;
width: 100%;
white-space: normal; // 允许正常换行
word-wrap: break-word; // 长单词换行
word-break: break-all; // 允许在任意字符间断行
}
}
}
}
js
<script>
// 等待DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
let wrapper = document.getElementById("bookListWrapper");
let scroll = BetterScroll.createBScroll(wrapper, {
scrollX: true, // 开启横向滚动
scrollY: false, // 禁用纵向滚动
momentum: true, // 开启惯性滚动
eventPassthrough: 'vertical', // 保留原生的垂直滚动
probeType: 3, // 实时派发scroll事件
click: true, // 允许点击事件
bounce: true, // 回弹效果
// 可选：显示滚动条
scrollbar: {
fade: true,
interactive: false
}
});
// 可选：监听滚动事件
scroll.on('scroll', function(pos) {
console.log(pos.x, pos.y);
});
});
</script>
演示文件下载
相关文件下载地址
购买成功后，如无法下载请联系微信:17331886870
