《星光背后》（镜像反射制作）
本帖最后由 加林森 于 2022-5-30 07:58 编辑 <br /><br /><div class="t_fsz"><table cellspacing="0" cellpadding="0">
<style>
.myBox {
left: -300px;
width: 1200px;
height: 600px;
box-shadow: 2px 2px 4px gray;
position: relative;
}
.reflect {
width: 600px;
height: 600px;
background: url('https://pic.imgdb.cn/item/62937b5c0947543129a31b10.jpg') no-repeat;
box-reflect: right;
-webkit-box-reflect: right;
}
.tube {
display: flex;
justify-content: center;
width: 10px;
height: 100px;
left: 604px; top: 182px;
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;
z-index: 100;
}
.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="http://www.kumeiwp.com/sub/filestores/2022/05/29/2b85d86deffbbfe22537e8b7516566af.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>
</td></tr></table>
这个完美
那个播放控制器，其实可以只出现一个 马黑黑 发表于 2022-5-29 22:06
这个完美
那个播放控制器，其实可以只出现一个
哦。有点明白了。 加林森 发表于 2022-5-29 22:09
哦。有点明白了。
调整HTML代码，让体温针不在被反射的元素内：
<div class="myBox">
<div class="reflect">
<div class="tube">
<div class="meter"></div>
</div>
</div>
</div>
改为:
<div class="myBox">
<div class="tube">
<div class="meter"></div>
</div>
<div class="reflect"></div>
</div>
马黑黑 发表于 2022-5-29 22:20
调整HTML代码，让体温针不在被反射的元素内：
我修改了，老黑你再看看。 马黑黑 发表于 2022-5-29 22:20
调整HTML代码，让体温针不在被反射的元素内：
怎么跑出去了啊？ 这个图片对称的，很漂亮。那个温度计貌似跑到图片外面了呢。{:4_204:} 红影 发表于 2022-5-29 22:26
这个图片对称的，很漂亮。那个温度计貌似跑到图片外面了呢。
我正在查 加林森 发表于 2022-5-29 22:25
怎么跑出去了啊？
这要看基本功了，position及其具体定位 加林森 发表于 2022-5-29 22:27
我正在查
而且底板和图片错位了。 红影 发表于 2022-5-29 22:34
而且底板和图片错位了。
啥意思？ 因为 .reflect 选择器没有进行定位，它是按自然语句流布排的，它占满父容器的左边，右边是它的镜像复制。这时候，如果让播放器在HTML那里脱离 reflect 元素，则需要播放器绝对定位（红色语句），并根据需要具体定位到指定处（蓝色语句），同时，提高其层级令其显现（红紫色语句）：
.tube {
display: flex;
justify-content: center;
width: 10px;
height: 100px;
left: 604px; top: 182px;
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: absolute;
z-index: 100;
}
我强调理解代码，不主张生搬硬套，基本上就是为了能够在组织代码上有自主能力、可以改造别人代码的结构而不是总是套用。
12楼改进的代码，能让体温针插在山尖尖上 马黑黑 发表于 2022-5-29 22:49
因为 .reflect 选择器没有进行定位，它是按自然语句流布排的，它占满父容器的左边，右边是它的镜像复制。这 ...
谢谢老黑。 马黑黑 发表于 2022-5-29 22:50
12楼改进的代码，能让体温针插在山尖尖上
现在插上去了。谢谢老黑，你辛苦了。我去收藏了。 加林森 发表于 2022-5-29 22:57
现在插上去了。谢谢老黑，你辛苦了。我去收藏了。
理解原理你就会在下次心中有数 本帖最后由 马黑黑 于 2022-5-29 23:08 编辑
红影 发表于 2022-5-29 22:34
而且底板和图片错位了。
它的原理是：
重新布置了HTML结构后，播放控制器与reflect选择器指向的元素是并列关系，按文档流的自然结构组织元素的位置，播放控制器虽小但在文档流里它的父元素也占爷爷元素留给的整体宽度，所以你能看的“错位”的现象，实际上并不是错位。
所以要定位体温针的父元素，最好用绝对定位（absolute），绝对定位不会让该元素在自然文档流中占据排版空间，虽然它仍然会占用它自己尺寸的空间。另外，absolute也会使得元素自身在其上一层元素也定位的情况下更容易在基于上层元素的空间里进行定位。 加林森 发表于 2022-5-29 22:57
现在插上去了。谢谢老黑，你辛苦了。我去收藏了。
这样的效果就比较有灵气了，尽管还可以微调一下下。
从中，你应该能体会到的不仅仅是技术问题，更多的是一种做帖子的思路。 马黑黑 发表于 2022-5-29 23:11
这样的效果就比较有灵气了，尽管还可以微调一下下。
从中，你应该能体会到的不仅仅是技术问题，更多的 ...
谢谢啦。明天再上来好好研究一下。现在准备睡觉了。明天见。 我再来研究、学习。
页:
[1]