图片左右二面展开背景是哔哩哔哩
本帖最后由 普陀申木 于 2026-4-18 17:57 编辑 <br /><br /><style>@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
#papa {margin:100px 0 30px calc(50% - 681px);width: 1286px;height: 720px;background:#1a2933 url("") no-repeat center/cover;position: relative;z-index: 1;overflow: hidden;font-family: "Ma Shan Zheng","SimHei", "Arial", "sans-serif";--state:running;}
#pa {margin: 350px 74px;width: 600px;height: 280px;position: relative;z-index: 1;transform: perspective(600px) rotateY(10deg)rotatex(0deg);overflow:hidden;}
#photos img{float:right;width:600px;height: 280px;position:relative;LEFT:0px;top:0px;overflow:hidden;z-index: 1;}
#photos {position: absolute;z-index:1; width: calc(800% * 9);
opacity: 1;animation:animate20s linear infinite;}
#paa{margin: -630px 630px;width: 600px;height: 280px;position:relative;z-index: 1;transform: perspective(600px) rotateY(170deg)rotatex(0deg);overflow:hidden;}
#photoss img{float:right;width:600px;height: 280px;position:relative;LEFT:0px;top:0px;overflow:hidden;z-index: 1;}
#photoss{position: absolute;z-index:1; width: calc(800% * 9);
opacity: 1;
animation:animate20s linear infinite;}
@keyframes animate {
0%,20% { right:-800%;}
25%,30% { right: -700%; }
35%,40% { right: -600%;}
45%,50% { right:-500%; }
55%,60% { right:-400%; }
65%,70% { right:-300%; }
75%,80% { right:-200%; }
85%,90% { right:-100%;}
95%,100% { right: 0%;}
}
</style>
<div id="papa">
<div style="width:1280px;height:720px;position:absolute;left:50%;transform:translate(-50%);margin-top:0px;">
<iframe src="https://player.bilibili.com/player.html?isOutside=true&aid=116168262160773&bvid=BV1ysPNzLEcY&cid=36436642342&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style=" width:1280px;height:720px;"></iframe>
</div>
<div id="pa" >
<divid="photos" >
<img src="https://pic1.imgdb.cn/item/69ce75596ccec478dfad15da.jpg" />
<img src="https://pic1.imgdb.cn/item/69ce75896ccec478dfad1629.jpg" />
<img src="https://pic1.imgdb.cn/item/69ce75b66ccec478dfad1678.jpg" />
<img src="https://pic1.imgdb.cn/item/69ce72e96ccec478dfad1202.jpg" />
<img src="https://pic1.imgdb.cn/item/69ce72e96ccec478dfad1201.jpg" />
<img src="https://pic1.imgdb.cn/item/69ce72e96ccec478dfad1206.jpg" />
<img src="https://pic1.imgdb.cn/item/69ce72e96ccec478dfad1205.jpg" />
<img src="https://pic1.imgdb.cn/item/69ce72e96ccec478dfad1203.jpg" />
<img src="https://pic1.imgdb.cn/item/69ce72e96ccec478dfad1204.jpg" />
</div>
</div>
<divid="paa">
<divid="photoss">
<img src="https://pic1.imgdb.cn/item/69ce75596ccec478dfad15da.jpg" />
<img src="https://pic1.imgdb.cn/item/69ce75896ccec478dfad1629.jpg" />
<img src="https://pic1.imgdb.cn/item/69ce75b66ccec478dfad1678.jpg" />
<img src="https://pic1.imgdb.cn/item/69ce72e96ccec478dfad1202.jpg" />
<img src="https://pic1.imgdb.cn/item/69ce72e96ccec478dfad1201.jpg" />
<img src="https://pic1.imgdb.cn/item/69ce72e96ccec478dfad1206.jpg" />
<img src="https://pic1.imgdb.cn/item/69ce72e96ccec478dfad1205.jpg" />
<img src="https://pic1.imgdb.cn/item/69ce72e96ccec478dfad1203.jpg" />
<img src="https://pic1.imgdb.cn/item/69ce72e96ccec478dfad1204.jpg" />
</div>
</div>
<div id="testImg" >
<script>
// Audiotimeupdate
aud.addEventListener("timeupdate",function(){
///
var percent= aud.currentTime / aud.duration
//,*,100%
var sp = 600 / 100 ;
//width
var swidth =(percent * 100 * sp) + "px";
console.log(percent*100,swidth)
//
document.getElementById("playProgressBar").style.width = swidth;
const now = document.querySelector('.now')//
progressBar.addEventListener('click', function (event) {
let coordStart = this.getBoundingClientRect().left
let coordEnd = event.pageX
now.style.width = p.toFixed(3) * 100 + '%'
})
progressBar.onclick = (e) => { aud.currentTime = aud.duration * e.offsetX / progressBar.offsetWidth; }//})
//2λС
document.getElementById("ptxt").innerText = ((percent*100).toFixed(2))+"%"
})
//
const start = document.querySelector('.start')
const end = document.querySelector('.end')
function conversion (value) {
let minute = Math.floor(value / 60)
minute = minute.toString().length === 1 ? ('0' + minute) : minute
let second = Math.round(value % 60)
second = second.toString().length === 1 ? ('0' + second) : second
return `${minute}<img src="static/image/smiley/default/shy.gif" smilieid="8" border="0" alt="" />{second}`
}
aud.onloadedmetadata = function () {
end.innerHTML = conversion(aud.duration)
start.innerHTML = conversion(aud.currentTime)
}
setInterval(() => {
start.innerHTML = conversion(aud.currentTime)
now.style.width = aud.currentTime / aud.duration.toFixed(3) * 100 + '%'
}, 1000)
console.dir(aud);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
image=document.getElementById('testImg');
player.onclick = () => aud.paused ? (aud.play(),player.style.animationPlayState = 'running',image.classList.remove('stop'),photos.style.animationPlayState = 'running',photoss.style.animationPlayState = 'running') <img src="static/image/smiley/default/sad.gif" smilieid="2" border="0" alt="" /> aud.pause(),player.style.animationPlayState = 'paused',image.classList.add('stop'),photos.style.animationPlayState = 'paused',photoss.style.animationPlayState = 'paused');
</script> 音画图片对开漂亮，谢谢老师分享！{:4_199:} 好漂亮，非常旖旎的场景。
欣赏普陀申木老师好帖{:4_199:} 精美制作，拍案叫绝！
页:
[1]