《香巴拉并不遥远》- 格格
本帖最后由 加林森 于 2022-5-29 17:32 编辑 <br /><br /><style>.outer {
left: -214px;
width: 1024px;
height: 640px;
background: #ccc url('https://pic.imgdb.cn/item/6292fadb0947543129e629f8.jpg') no-repeat;
cursor: pointer;
position: relative;
}
.wrap {
left: 10px; top: calc(100% - 60px);
width: 70px;
height: 60px;
position: relative;
}
.sskey {
width: 6px;
height: 0px;
background-color: rgba(255,0,0,.6);
display: inline-block;
position: relative;
}
</style>
<div class="outer">
<div class="wrap"></div>
<audio id="aud" src="https://www.joy127.com/url/90583.mp3" autoplay="autoplay" loop="loop"></audio>
</div>
<script>
let wrap = document.querySelector('.wrap'), aud = document.querySelector('#aud');
let getnum = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
Array.from({length: 10}).forEach((ele) => {
ele = document.createElement('span');
ele.className = 'sskey';
ele.style.backgroundColor = `rgba(${getnum(0,255)},${getnum(0,255)},${getnum(0,255)},.6)`;
wrap.appendChild(ele);
});
let sskey = document.querySelectorAll('.sskey');
wrap.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('timeupdate', () => {
Array.from(sskey).forEach((ele) => {
ele.style.height = getnum(20, 60) + 'px';
});
});
</script>
香巴拉并不遥远-格格
有一个美丽的地方
人们都把它向往
有一个美丽的地方
人们都把它向往
有一个美丽的地方
人们都把它向往
那里四季常青
那里鸟语花香
那里没有痛苦
那里没有忧伤
它的名字叫香巴拉
传说是神仙居住的地方
它的名字叫香巴拉
传说是神仙居住的地方
啊... 香巴拉并不遥远
啊... 香巴拉并不遥远
它就是我们 我们的家乡
它就是我们 我们的家乡
有一个神奇的地方
人们都把它向往
有一个神奇的地方
人们都把它向往
有一个神奇的地方
人们都把它向往
那里夜朗风清
那里一片安宁
那里人儿善良
那里一片清香
它的名字叫香巴拉
传说是神仙居住的地方
它的名字叫香巴拉
传说是神仙居住的地方
啊... 香巴拉并不遥远
啊... 香巴拉并不遥远
它就是我们 我们的家乡
它就是我们 我们的家乡
它就是我们 我们的家乡 香格里拉又叫香巴拉，位于云南省迪庆藏族自治州，这里曾经与世界隔绝，不通路，没有电，与外界相连的只有一条险峻的山路。2007年，藏族“愚公”斯那定珠终于为生他养他的大山开辟了一条新路。“香巴拉”是藏语的音译，又译为“香格里拉”，其意为“极乐园”，是藏传佛教徒向往追求的理想净土即：“极乐世界”、“人间仙境”、也称“坛城”。 这幅画面好壮观哦！通过三楼的简介使俺对香格里拉有了一个初步的了解。 本帖最后由 加林森 于 2022-5-29 13:43 编辑
2022-5-29 13:41
老梦去过没有呢？ 还是底下不固定的啊。 红影 发表于 2022-5-29 14:31
还是底下不固定的啊。
没事的啊。老黑说了自己的东西自己去调整。 加林森 发表于 2022-5-29 13:42
老梦去过没有呢？
没有，没去过。 梦油 发表于 2022-5-29 15:09
没有，没去过。
挺漂亮的地方。我去过的。 加林森 发表于 2022-5-29 15:38
挺漂亮的地方。我去过的。
是的。我家大孙子和他的几个同伴也去过，还在那里过夜，他们给我看视频，确实很美。 梦油 发表于 2022-5-29 16:03
是的。我家大孙子和他的几个同伴也去过，还在那里过夜，他们给我看视频，确实很美。
是的。我去的时候不通交通，自己翻山越岭去的。 醉美水芙蓉 发表于 2022-5-29 16:09
挺漂亮的！
很有气势的地方。 加林森 发表于 2022-5-29 16:05
是的。我去的时候不通交通，自己翻山越岭去的。
嗬，那可不容易。 梦油 发表于 2022-5-29 17:28
嗬，那可不容易。
那个时候我还很年轻的。 加林森 发表于 2022-5-29 17:30
那个时候我还很年轻的。
说起年轻，我也想起我的一段往事，大约五十年前，我曾在爬华山，到了西峰下起了小雪，我就冒着雪返回的。到了宾馆，我真后怕。 梦油 发表于 2022-5-29 17:46
说起年轻，我也想起我的一段往事，大约五十年前，我曾在爬华山，到了西峰下起了小雪，我就冒着雪返回的。 ...
年轻就不怕这些的。 香格里拉，我的故乡 马黑黑 发表于 2022-5-29 19:07
香格里拉，我的故乡
嗯嗯。老黑我怎么装不进去啊？
这个是代码：
<style>
.mama { left: -280px; width: fit-content; height: fit-content; position: absolute; cursor: pointer; }
.wrap { width: 60px; height: 60px;box-reflect: right; -webkit-box-reflect: right; position: relative; }
.mama meter { width: 120px; height: 120px; position: relative; }
.wrap span { --ww: 6px; width: var(--ww); height: -160px; bottom: -6px; background-color: rgba(255,0,0,.6); display: inline-block; position: absolute; }
.wrap span:nth-child(2) { left: var(--ww); }
.wrap span:nth-child(3) { left: calc(var(--ww) * 2); }
.wrap span:nth-child(4) { left: calc(var(--ww) * 3); }
.wrap span:nth-child(5) { left: calc(var(--ww) * 4); }
.wrap span:nth-child(6) { left: calc(var(--ww) * 5); }
.wrap span:nth-child(7) { left: calc(var(--ww) * 6); }
.wrap span:nth-child(8) { left: calc(var(--ww) * 7); }
.wrap span:nth-child(9) { left: calc(var(--ww) * 8); }
.wrap span:nth-child(10) { left: calc(var(--ww) * 9); }
</style>
<div class="mama">
<div class="wrap"></div>
<img src="https://pic.imgdb.cn/item/629328e809475431292ced67.jpg">
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/04/25/815b49884a9187d670f65a8385e40355.mp3" autoplay="autoplay" loop="loop"></audio>
</div>
<script>
let mama = document.querySelector('.mama'), wrap = document.querySelector('.wrap'), aud = document.querySelector('#aud'), meter = document.querySelector('#meter');
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min, prog = (tt, cc) => 100 * cc / tt;
Array.from({length: 10}).forEach((ele) => {
ele = document.createElement('span');
ele.className = 'sskey';
ele.style.backgroundColor = `rgba(${num(0,255)},${num(0,255)},${num(0,255)},.95)`;
wrap.appendChild(ele);
})
let sskey = document.querySelectorAll('.sskey');
mama.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('timeupdate', () => {
Array.from(sskey).forEach((ele) => {
ele.style.height = num(10, 60) + 'px';
})
meter.value = prog(aud.duration, aud.currentTime);
})
</script> 加林森 发表于 2022-5-29 19:23
嗯嗯。老黑我怎么装不进去啊？
这个是代码：
这是换零件的问题。我弄了一下，你自己去比较：
<style>
.outer {
left: -214px;
width: 1024px;
height: 640px;
background: #ccc url('https://pic.imgdb.cn/item/6292fadb0947543129e629f8.jpg') no-repeat;
cursor: pointer;
position: relative;
}
.wrap { width: 60px; height: 60px;box-reflect: right; -webkit-box-reflect: right; position: relative; }
.mama meter { width: 120px; height: 20px; position: relative; }
.wrap span { --ww: 6px; width: var(--ww); height: 60px; bottom: -6px; background-color: rgba(255,0,0,.6); display: inline-block; position: absolute; }
.wrap span:nth-child(2) { left: var(--ww); }
.wrap span:nth-child(3) { left: calc(var(--ww) * 2); }
.wrap span:nth-child(4) { left: calc(var(--ww) * 3); }
.wrap span:nth-child(5) { left: calc(var(--ww) * 4); }
.wrap span:nth-child(6) { left: calc(var(--ww) * 5); }
.wrap span:nth-child(7) { left: calc(var(--ww) * 6); }
.wrap span:nth-child(8) { left: calc(var(--ww) * 7); }
.wrap span:nth-child(9) { left: calc(var(--ww) * 8); }
.wrap span:nth-child(10) { left: calc(var(--ww) * 9); }
</style>
<div class="outer">
<div class="mama">
<div class="wrap"></div>
<meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="70"></meter>
<audio id="aud" src="https://www.joy127.com/url/90583.mp3" autoplay="autoplay" loop="loop"></audio>
</div>
</div>
<script>
let mama = document.querySelector('.outer'), wrap = document.querySelector('.wrap'), aud = document.querySelector('#aud'), meter = document.querySelector('#meter');
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min, prog = (tt, cc) => 100 * cc / tt;
Array.from({length: 10}).forEach((ele) => {
ele = document.createElement('span');
ele.className = 'sskey';
ele.style.backgroundColor = `rgba(${num(0,255)},${num(0,255)},${num(0,255)},.95)`;
wrap.appendChild(ele);
})
let sskey = document.querySelectorAll('.sskey');
mama.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('timeupdate', () => {
Array.from(sskey).forEach((ele) => {
ele.style.height = num(20, 60) + 'px';
})
meter.value = prog(aud.duration, aud.currentTime);
})
</script>
页:
[1]
2