<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="css/BeerSlider.css">
<!-- Bottom of body -->
<script src="js/BeerSlider.js"></script>
<style>
body{background-color: #272727}
.m {
width: 1800px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="m">
<div id="imgs" class="beer-slider" data-beer-label="before">
<img src="imgs/1.png" alt="">
<div class="beer-reveal" data-beer-label="after">
<img src="imgs/2.png" alt="">
</div>
</div>
</div>
<script>
new BeerSlider(document.getElementById('imgs'));
</script>
</body>
</html>
利用轻量级js插件Beer Slider实现新老图片的实时对比
需积分: 29 20 浏览量
2022-11-29
11:18:27
上传
评论
收藏 6.07MB ZIP 举报
Beer Slider一款轻量级的图片对比插件.zip （6个子文件） 
Beer Slider一款轻量级的图片对比插件 css 
BeerSlider.css 3KB
index.html 754B js BeerSlider.js 25KB .DS_Store 6KB imgs 
1.png 2.93MB 2.png 3.13MB资源评论
