《心中的拉姆》- 降玛•扎西东珠
<style>
.myBox {
left: -302px;
width: 1200px;
height: 600px;
box-shadow: 2px 2px 4px gray;
position: relative;
}
.reflect {
width: 600px;
height: 600px;
background: url('https://pic.imgdb.cn/item/6291a69009475431292a099b.jpg') no-repeat;
box-reflect: right;
-webkit-box-reflect: right;
}
.tube {
display: flex;
justify-content: center;
width: 10px;
height: 100px;
left: 415px; top: 50px;
background-color: #eee;
background: linear-gradient(#aaa 1px, #eee 1px);
background-size: 8px 10px;
box-shadow: 0 -8px 0 0 red, 0 18px 0 0 red;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
position: relative;
}
.meter {
position: absolute;
width: 4px;
height: 0;
background: rgba(255,0,0,.65);
bottom: 0;
}
</style>
<div class="myBox">
<div class="reflect">
<div class="tube">
<div class="meter"></div>
</div>
</div>
</div>
<audio id="aud" src="https://www.joy127.com/url/90574.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let tube = document.querySelector('.tube'), meter = document.querySelector('.meter'), aud = document.querySelector('#aud');
let current, task;
aud.addEventListener('timeupdate', function(){
task = aud.duration;
current = aud.currentTime;
setProgress(task,current);
});
tube.onclick = () =>{ aud.paused ? aud.play() : aud.pause(); };
function setProgress(tt,cc) {
if(tt <= 0 || cc <= 0) return false;
let prog = 100 * cc / tt;
meter.style.height = prog + '%';
circle.setAttribute('data-per', prog.toFixed(2) + '%');
}
</script>
@马黑黑 帮着看看，好像有点毛病呢？ 加林森 发表于 2022-5-28 12:42
@马黑黑 帮着看看，好像有点毛病呢？
没毛病，反射就是酱紫，一切都是反的 马黑黑 发表于 2022-5-28 12:49
没毛病，反射就是酱紫，一切都是反的
哦，那就是说成功了？ 加林森 发表于 2022-5-28 12:50
哦，那就是说成功了？
不是成了吗？细节自己慢慢弄 马黑黑 发表于 2022-5-28 12:51
不是成了吗？细节自己慢慢弄
好的。谢谢！ 队长做的文字也反了呢。图片最好根据你选择的图图设置高度，现在这个横向被剪切，纵向有个空出来的边{:4_173:} 队长每个都去做尝试，这点很赞的{:4_199:} 红影 发表于 2022-5-28 15:45
队长做的文字也反了呢。图片最好根据你选择的图图设置高度，现在这个横向被剪切，纵向有个空出来的边{:4_17 ...
就是，我制作出来才发现的。 红影 发表于 2022-5-28 15:45
队长每个都去做尝试，这点很赞的
谢谢！ 醉美水芙蓉 发表于 2022-5-28 18:24
祝贺队长制作成功！
谢谢水芙蓉。你制作的翻书也很漂亮的。
页:
[1]