存图帖
本帖最后由 起个网名好难 于 2022-10-25 08:31 编辑长假快乐
本帖最后由 起个网名好难 于 2022-11-23 18:14 编辑 <br /><br /><!--
-->
<img src="forum.php?mod=attachment&aid=NDM1NTB8OWE2YmZiYjN8MTY2NjY1NDA1NHw3NTgxfDYzNTI0&noupdate=yes¬humb=yes" />
<img src="forum.php?mod=attachment&aid=NDM1NDl8NjMyM2Q3YWF8MTY2NjY1NDA1NHw3NTgxfDYzNTI0&noupdate=yes¬humb=yes" />
<img src="forum.php?mod=attachment&aid=NDM1NDh8MzI5OGQ3Mzl8MTY2NjY1NDA1NHw3NTgxfDYzNTI0&noupdate=yes¬humb=yes" />
<img src="forum.php?mod=attachment&aid=NDM1NDd8Zjc5ZTEzM2F8MTY2NjY1NDA1NHw3NTgxfDYzNTI0&noupdate=yes¬humb=yes" />
<img src="forum.php?mod=attachment&aid=NDM1NDZ8Mjc0MWJlNDh8MTY2NjY1NDA1NHw3NTgxfDYzNTI0&noupdate=yes¬humb=yes" />
<img src="forum.php?mod=attachment&aid=NDM1NDR8NmU5MjZjYjV8MTY2NjY1NDA1NHw3NTgxfDYzNTI0&noupdate=yes¬humb=yes" />
<img src="forum.php?mod=attachment&aid=NDM1NDN8OTlkMmU5OTJ8MTY2NjY1NDA1NHw3NTgxfDYzNTI0&noupdate=yes¬humb=yes" />
<img src="forum.php?mod=attachment&aid=NDM1NDJ8YmIzNWYyZjl8MTY2NjY1NDA1NHw3NTgxfDYzNTI0&noupdate=yes¬humb=yes" />
<img src="forum.php?mod=attachment&aid=NDM1NDF8ZWFlZWMxOWZ8MTY2NjY1NDA1NHw3NTgxfDYzNTI0&noupdate=yes¬humb=yes" />
<img src="forum.php?mod=attachment&aid=NDM1Mzl8OTliYThkOTl8MTY2NjY1NDA1NHw3NTgxfDYzNTI0&noupdate=yes¬humb=yes" />
<img src="forum.php?mod=attachment&aid=NDM1Mzh8YTZlMjJlZWJ8MTY2NjY1NDA1NHw3NTgxfDYzNTI0&noupdate=yes¬humb=yes" />
<img src="forum.php?mod=attachment&aid=NDM1Mzd8MDIwN2MyMmV8MTY2NjY1NDA1NHw3NTgxfDYzNTI0&noupdate=yes¬humb=yes" />
<img src="forum.php?mod=attachment&aid=NDM1NDB8MzUxMzUyYTl8MTY2NjY1NDA1NHw3NTgxfDYzNTI0&noupdate=yes¬humb=yes" />
<img src="forum.php?mod=attachment&aid=NDM1NDV8MTFjMTAyNjh8MTY2NjY1NDA1NHw3NTgxfDYzNTI0&noupdate=yes¬humb=yes" />
戏曲人物
本帖最后由 起个网名好难 于 2022-10-25 11:39 编辑 <br /><br /><style type="text/css">#vWindow {
width:500px;
height:1000px;
border:thick brown ridge;
margin: 12px auto;
background-image:url(https://z3.ax1x.com/2021/06/17/2jJr0P.jpg);
background-size:cover;
}
#vWindow .itemy {
width:500px;
height:100px;
background-image:url(https://s3.bmp.ovh/imgs/2022/10/25/5a9df07037122f0c.jpg);
background-size:500px 1000px;
transform-origin: 0%100%;
}
</style>
<div id="vWindow"></div>
<audio src="https://www.qqmc.com/up/kwlink.php?id=635015&.mp3" loop autoplay controls
onmouseover="this.style.opacity=0.8" onmouseout="this.style.opacity=0.1"
style="display:grid; place-items:center; opacity:0.1;margin:2px auto;"></audio>
<script type="text/javascript">
(function() {
let imgSet = [
"forum.php?mod=attachment&aid=NDM1NTB8OWE2YmZiYjN8MTY2NjY1NDA1NHw3NTgxfDYzNTI0&noupdate=yes¬humb=yes",
"forum.php?mod=attachment&aid=NDM1NDl8NjMyM2Q3YWF8MTY2NjY1NDA1NHw3NTgxfDYzNTI0&noupdate=yes¬humb=yes",
"forum.php?mod=attachment&aid=NDM1NDh8MzI5OGQ3Mzl8MTY2NjY1NDA1NHw3NTgxfDYzNTI0&noupdate=yes¬humb=yes",
"forum.php?mod=attachment&aid=NDM1NDd8Zjc5ZTEzM2F8MTY2NjY1NDA1NHw3NTgxfDYzNTI0&noupdate=yes¬humb=yes",
"forum.php?mod=attachment&aid=NDM1NDZ8Mjc0MWJlNDh8MTY2NjY1NDA1NHw3NTgxfDYzNTI0&noupdate=yes¬humb=yes",
"forum.php?mod=attachment&aid=NDM1NDR8NmU5MjZjYjV8MTY2NjY1NDA1NHw3NTgxfDYzNTI0&noupdate=yes¬humb=yes",
"forum.php?mod=attachment&aid=NDM1NDN8OTlkMmU5OTJ8MTY2NjY1NDA1NHw3NTgxfDYzNTI0&noupdate=yes¬humb=yes",
"forum.php?mod=attachment&aid=NDM1NDJ8YmIzNWYyZjl8MTY2NjY1NDA1NHw3NTgxfDYzNTI0&noupdate=yes¬humb=yes",
"forum.php?mod=attachment&aid=NDM1NDF8ZWFlZWMxOWZ8MTY2NjY1NDA1NHw3NTgxfDYzNTI0&noupdate=yes¬humb=yes",
"forum.php?mod=attachment&aid=NDM1Mzl8OTliYThkOTl8MTY2NjY1NDA1NHw3NTgxfDYzNTI0&noupdate=yes¬humb=yes",
"forum.php?mod=attachment&aid=NDM1Mzh8YTZlMjJlZWJ8MTY2NjY1NDA1NHw3NTgxfDYzNTI0&noupdate=yes¬humb=yes",
"forum.php?mod=attachment&aid=NDM1Mzd8MDIwN2MyMmV8MTY2NjY1NDA1NHw3NTgxfDYzNTI0&noupdate=yes¬humb=yes",
"forum.php?mod=attachment&aid=NDM1NDB8MzUxMzUyYTl8MTY2NjY1NDA1NHw3NTgxfDYzNTI0&noupdate=yes¬humb=yes",
"forum.php?mod=attachment&aid=NDM1NDV8MTFjMTAyNjh8MTY2NjY1NDA1NHw3NTgxfDYzNTI0&noupdate=yes¬humb=yes"
];
var Keyframes = [
[{transform: 'rotateX(90deg)', opacity:'0.4'},
{offset: 0.6, transform: 'rotateX(0deg)', opacity:'1'}],
[{opacity:'0'},{opacity:'1'}]
];
let EffectTiming = {duration: 8000, fill: 'forwards'};
let imgIdx = 0, lastIdx = imgSet.length - 1;
let imgBlock, items, aniObj, chkImg, aniImg;
let vWindow = document.getElementById('vWindow');
for(i = 0 ; i < 20; i++) {
let itemy = document.createElement('div');
itemy.style.backgroundPositionY = -(i * 50) +'px';
itemy.style.height = '50px';
itemy.classList.add('itemy');
vWindow.appendChild(itemy);
}
aniObj = new Array();
imgBlock = document.getElementById('vWindow');
items = document.getElementsByClassName('itemy');
//chkImg = document.getElementById('chkImg');
for (j = 0 ; j < items.length; j++) {
aniObj = items.animate(Keyframes, EffectTiming);
aniObj.pause();
}
//aniImg = chkImg.animate(Keyframes, EffectTiming);
//aniImg.pause();
aniObj.onfinish = chg_cur_pic;
chg_cur_pic();
let chg_cur_pic = () => {
//chkImg.src = imgSet;
for(i = 0; i < items.length; i++) {
items.style.backgroundImage = "url(" + imgSet + ")";
}
imgBlock.style.backgroundImage = "url(" + imgSet + ")";
console.log(imgBlock.style.backgroundImage);
lastIdx = imgIdx;
imgIdx++;
imgIdx %= imgSet.length;
for (j = 0 ; j < items.length; j++) {
aniObj.play();
}
aniImg.play();
}
})();
</script>
页:
[1]