论坛 › 欢乐水吧 › 对面的小姐姐今天是你生日

亚伦影音工作室 发表于 2025-3-8 17:08

对面的小姐姐今天是你生日

本帖最后由 亚伦影音工作室 于 2025-10-23 11:43 编辑 <br /><br /><style>

#papa{left: -43%; top: 30%; width:1286px;position: relative; height:720px; border-radius:0px; border:0px solid #333;overflow: hidden; align-items: center; background:url(https://pic1.imgdb.cn/item/671af491d29ded1a8c8e7c58.jpg) center/100% 100%;}
#ppm{position: absolute; width: 100%; height: 100%; opacity:1;z-index: 1; mix-blend-mode: lighten;
background-image:url(https://pic1.imgdb.cn/item/64a52c121ddac507cc5fd3ac.gif ); border-radius: 0px;
bottom: 0; left:0px;
}
#ppcm{ position: absolute;width: 100%; height: 100%; opacity:0;z-index: 1;bottom: 0;background-image:url(https://pic1.imgdb.cn/item/67544ea7d0e0a243d4dfc9b3.png);mix-blend-mode: lighten; }
video {
    z-index: 2;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    /* object-fit: contain; */
    object-fit: scale-down;
    object-position: center center;
}

video::-webkit-media-controls {
    /* 去掉全屏时显示的自带控制条 */
    display: none !important;
}

.cover {z-index: 2;
   width: 100%;
    height: 100%;
    background-color: rgba(116, 116, 116, 0.3);
    position: absolute;
    left: 0;
    top: 0;
}

#playStatus {
    width: 44px;
    height: 48px;
    position: absolute;
    top: 50%; opacity:1;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(https://pic1.imgdb.cn/item/678f2717d0e0a243d4f60f3d.png)no-repeat center/100% 100%;;
}

.controls {
   width: 100%;
   
    background-image: linear-gradient(transparent, #50939b);
   position: absolute;
    bottom: 0;display: flex; justify-content: center; align-items:center;
   
}

#contPlayStatus {
    width: 20px;
    height: 26px;
    background: url(https://pic1.imgdb.cn/item/678f2710d0e0a243d4f60f3c.png)no-repeat center/100% 100%;;
   position: relative;
    top: 0px;left: 0px;
    /* border: 1px solid red; */
}

#currentTime {
    width: 84px;
    height: 64px;
    /* border: 1px solid red; */
    text-align: center;
    line-height: 64px;
    font-size: 14px;
    color: #fff;
}

#progressBar {
    /* 进度条样式 */
    -webkit-appearance: none;
    width: 72%;
    height: 5px;
    /* border: 0px solid red; */
    position: relative;
    top: -4px;
    background-color: #0000;
    border-radius: 25px;
}
#progressBar::-webkit-slider-container {
    height: 18px;border-radius:25px;
    overflow: hidden;
}
#progressBar::-webkit-slider-runnable-track {
    height: 4px;border-radius:25px;
    background: #eee;
}


#progressBar::-webkit-slider-thumb {
    /* 进度条滑块样式 */
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    cursor: pointer;
    background: none repeat scroll 0 0 #ff0000;

    border: 1px solid transparent;
    margin-top: -4px;
    border-image: linear-gradient(#ff0000,#ff0000) 0 fill / 4 11 4 0 / 0px 0px 0 2000px;
    border-radius: 26px;
}

#duration {
    width: 84px;
    height: 64px;
    /* border: 1px solid red; */
    text-align: center;
    line-height: 64px;
    font-size: 14px;
    color: #fff;
}

#volume {filter:invert(0%);
    width: 30px;
    height: 30px;
    /* border: 1px solid red; */
    position: relative;
    top: 0px;
    background: url(https://pic1.imgdb.cn/item/68e9c1d1c5157e1a88633eed.png)no-repeat center/100% 100%;
}

#volumeInput {transform:rotate(-90deg);
    width: 120px;
    height: 36px;
    position: absolute;
    left: 88%;
    top: -65px;
    display: none;
}


#volumeInputRange {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    outline: 0;
    background-color: transparent;
    width: 100%;
}
#volumeInputRange::-webkit-slider-runnable-track {
    height: 3px;border-radius: 20px;
    background: #eee;
}
#volumeInputRange::-webkit-slider-container {
    height: 18px;border-radius: 30px;
    overflow: hidden;
}
#volumeInputRange::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background:#f44336;
    border: 1px solid transparent;
    margin-top: -4px;
   border-image: linear-gradient(#f44336,#f44336) 0 fill / 4 11 4 0 / 0px 0px 0 2000px;
}

#volume:hover,#volumeInput{display: block;}
      

#fullscreen { opacity:1;position: relative;z-index: 40;
    top: 0px; width: 22px; height: 22px;   cursor: pointer;left:1%;}
#papa:hover #fullscreen { opacity:1;}

#全屏{ width: 20px; height: 20px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;
}
#退出{ width: 20px; height: 20px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover; }

.lrc{
    width: 100%;
    height: 120px;z-index: 1;
    overflow: hidden;bottom: 0px;
    display: block; position:absolute;
    margin: 0px auto;}
.lrc #ullrc{
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
    margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 70px;
    line-height: 60px;
font-family:华文隶书;
    font-size: 0px;
    color: #000078;
    font-weight: normal;
    transition: .3s all ease;
    list-style-type: none;
    text-align: center;display: block;
    width: 100%;
    margin: 0 auto;}
/*动态歌词样式*/
.lrc #ullrc li.active{
    font-size: 40px;
    color: #ff0000;
text-align: center;text-align: center;color: transparent; background: repeating-linear-gradient(to right, gold, lightgreen, snow, lightgreen, orange) 50%/200px 60px; -webkit-background-clip: text;filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0); }
</style>
<div id="papa">

<div class="video">
<div id="ppm"></div>
<div id="ppcm" ></div>
    <!-- 视频播放区 -->
    <video id="video1" autoplay src="https://s2.ananas.chaoxing.com/sv-w8/audio/67/1f/43/86a1e74af709812aaae8a19fb58f8010/audio.mp3" loop></video>
<!-- 遮罩层 -->
    <div class="cover">
<!-- 居中的播放暂停状态 -->
      <div id="playStatus"></div>
      <!-- 控件部分 -->
      <div class="controls">
            <!-- 控件部分中的播放暂停状态 -->
            <div id="contPlayStatus"></div>
            <div id="currentTime">00:00:00</div>
            <!-- 进度条 -->
            <input id="progressBar" type="range" name="" min="0" max="1000" value="0">
            <div id="duration">00:00:00</div>
            <div id="volume"></div>
            <div id="volumeInput">
                <input id="volumeInputRange" type="range" name="" min="0" max="100" value="100">
            </div>
            <span id="fullscreen" title="全屏展示/退出全屏">
<div id="全屏"></div>
<div id="退出" ></div>
</span>
      </div>
</div>
</div>
<div class="lrc">
      <ul id="ullrc">
         </ul>
      </div>
</div>
</div>

<script>
// 需要获取的元素
var divVideo = document.getElementsByClassName("video");
var divCover = document.getElementsByClassName("cover");
var video1 = document.getElementById("video1");
var playStatus = document.getElementById("playStatus");
var controls = document.getElementsByClassName("controls");
var contPlayStatus = document.getElementById("contPlayStatus");
var currentTime = document.getElementById("currentTime");
var progressBar = document.getElementById("progressBar");
var duration = document.getElementById("duration");
var volume = document.getElementById("volume");


divVideo.addEventListener("mouseenter", function() {
    divCover.style.display = "block";
})

divVideo.addEventListener("mouseleave", function() {
    divCover.style.display = "none";
})

video1.addEventListener("play", function() {
    playStatus.style.backgroundImage = "url(https://pic1.imgdb.cn/item/678f2710d0e0a243d4f60f3c.png)";
    contPlayStatus.style.backgroundImage = "url(https://pic1.imgdb.cn/item/678f2710d0e0a243d4f60f3c.png)"
})

video1.addEventListener("pause", function() {
    playStatus.style.backgroundImage = "url(https://pic1.imgdb.cn/item/678f2717d0e0a243d4f60f3d.png)";
    contPlayStatus.style.backgroundImage = "url(https://pic1.imgdb.cn/item/678f2717d0e0a243d4f60f3d.png)";

})

playStatus.addEventListener("click", play_pause);
contPlayStatus.addEventListener("click", play_pause);

setInterval(function() {
    progressBar.value = video1.currentTime / video1.duration * 1000;
    currentTime.innerHTML = getTime(video1.currentTime);
    duration.innerHTML = getTime(video1.duration);
}, 1000)

progressBar.addEventListener("input", function() {
    video1.currentTime = video1.duration * (progressBar.value / 1000);
    video1.play();
})

var currVolume;

volume.addEventListener("click", function() {
    if (video1.volume != 0) {
      currVolume = video1.volume;
      video1.volume = 0;
      volumeInputRange.value = 0;
      this.style.backgroundImage = "url(https://pic1.imgdb.cn/item/68e9c0c2c5157e1a886337ae.png)";
    } else {
      video1.volume = currVolume;
      volumeInputRange.value = currVolume * 100;
      this.style.backgroundImage = "url(https://pic1.imgdb.cn/item/68e9c1d1c5157e1a88633eed.png)";
    }
})
video1.volume = 0.6;
volumeInputRange.value = 90;
volumeInputRange.addEventListener("input", function() {
    video1.volume = Number(this.value) / 100;
    volume.style.backgroundImage = video1.volume == 0 ? "url(https://pic1.imgdb.cn/item/68e9c0c2c5157e1a886337ae.png)" : "url(https://pic1.imgdb.cn/item/68e9c1d1c5157e1a88633eed.png)";
})
function play_pause() {
    if (video1.paused) {
      video1.play();
      audio1.pause();
      check_box.checked = false;
    } else {
      video1.pause();
    }
}

let fs= true;
fullscreen.onclick = () => {
      fs ? (papa.requestFullscreen(),全屏.style.opacity= '0',退出.style.opacity = '1') : ( document.exitFullscreen(),全屏.style.opacity = '1',退出.style.opacity = '0');
      fs = !fs;
}



function getTime(time) {
    let hour = Math.floor(time / 3600) < 10 ? "0" + Math.floor(time / 3600) : Math.floor(time / 3600);
    let min = Math.floor(time % 3600 / 60) < 10 ? "0" + Math.floor(time % 3600 / 60) : Math.floor(time % 3600 / 60);
    var sec = Math.floor(time % 60) < 10 ? "0" + Math.floor(time % 60) : Math.floor(time % 60);
    return hour + ":" + min + ":" + sec;
}

playStatus.onclick =contPlayStatus.onclick = () => video1.paused ? (ppcm.style.opacity= '1',ppm.style.opacity = '0') : (ppcm.style.opacity= '0',ppm.style.opacity = '1');
</script>

<script >
var lrc = `对面的小姐姐（DJ何鹏版） - 崔伟立
作词：刘海东
作曲：刘海东、刘亦敏
出品：金色梦想（安徽）文化传媒有限公司
发行人：一阳
对面的小姐姐
你从哪里来
你就像一朵情花
可是为我开
对面的小姐姐
你不要在徘徊
请你听听听听我
内心的告白
对面的小姐姐
请相信我的爱
我就是你要找的
那个小男孩
这么多天来
我天天在等待
等着你一双大眼睛
羞答答看过来
对面的小姐姐
你从哪里来
你就像一朵情花
可是为我开
对面的小姐姐
你不要在徘徊
请你听听听听我
内心的告白
对面的小姐姐
请相信我的爱
我就是你要找的
那个小男孩
这么多天来
我天天在等待
等着你一双大眼睛
羞答答看过来
对面的小姐姐
请相信我的爱
我就是你要找的
那个小男孩
这么多天来
我天天在等待
等着你一双大眼睛
羞答答看过来
等到春暖花开时
我就娶你来

`;
function $(id) {
    return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
    var parts = lrc.split("\n");
    for (let index = 0; index < parts.length; index++) {
      parts = getLrcObj(parts);
    }
    return parts;

    function getLrcObj(content) {
      var twoParts = content.split("]");
      var time = twoParts.substr(1);
      var timeParts = time.split(":");
      var seconds = +timeParts;
      var min = +timeParts;
      seconds = min * 60 + seconds;
      var words = twoParts;
      return{
            seconds: seconds,
            words: words,
      };
    }
}
var lrcArray = getLrcArray();
function inputLrc() {
    for (let index = 0; index < lrcArray.length; index++) {
      var li = document.createElement("li");
      li.innerText = lrcArray.words;
      $("ullrc").appendChild(li);
    }
}
inputLrc();
function setPosition() {
    var index = getLrcIndex();
    if (index == -1) {
      return;
    }
   var lrc_li_height = 70, lrc_ul_height = 60;/*动态歌词显示的位置：250：第三行变色增大。160：在第二行变化。50：在第一行变化 */
    var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
    if (top < 0) {
      top = 0;
    }
    $("ullrc").style.marginTop = -top + "px";
    var activeLi = $("ullrc").querySelector(".active");
    if(activeLi){
      activeLi.classList.remove("active");
    }
    $("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
    var time = $("video1").currentTime + turn;
    for (var index = 0; index < lrcArray.length; index++) {
      if (lrcArray.seconds > time) {
            return index - 1;
      }
    }
}
$("video1").ontimeupdate = setPosition;
</script >

老谟深虑 发表于 2025-3-8 18:05

         欣赏老师的佳作，祝论坛的女同胞三八节快乐！

红影 发表于 2025-3-8 18:23

这个是把竖版的AI动图拼成横版图图么，很漂亮的制作，欣赏亚伦老师好帖{:4_187:}

红影 发表于 2025-3-8 18:41

那位小姐姐是今天的生日啊，这么巧，今天是所有女性的节日呢{:4_173:}

红影 发表于 2025-3-8 18:42

应该是把节日两字打成了生日吧。欣赏亚伦老师好帖，同祝所有的小姐姐们节日快乐{:4_187:}{:4_177:}

杨帆 发表于 2025-3-8 19:45

漂亮！谢谢亚伦老师精彩分享{:4_191:}

梦油 发表于 2025-3-9 09:36

祝花潮女士节日快乐！

查看完整版本: 对面的小姐姐今天是你生日