195400 发表于 2022-9-28 08:30

戏曲人物

<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(data/attachment/forum/202209/21/112043y2l52kmd8t773w2b.jpg);
                background-size:500px 1000px;
                transform-origin: 0%100%;
        }
</style>
<div id="vWindow"></div>
<audio src="http://link.hhtjim.com/kw/146284665.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;" />
<script type="text/javascript">

var imgSet = [
"data/attachment/forum/202209/21/112043y2l52kmd8t773w2b.jpg",
"data/attachment/forum/202209/21/112043eccnv0hfntvvdqdv.jpg",
"data/attachment/forum/202209/21/112043bckwsjiuu0djucpj.jpg",
"data/attachment/forum/202209/21/112044juw6f8joujog3wuj.jpg",
"data/attachment/forum/202209/21/112044gdll1ggfulvwvgkp.jpg",
"data/attachment/forum/202209/21/112044t9ydt0ugc1bsrssr.jpg",
"data/attachment/forum/202209/21/112044ak1cairuhabk4a1u.jpg",
"data/attachment/forum/202209/21/112044xoxtfs7m5fbxpu65.jpg",
"data/attachment/forum/202209/21/112044btp42c2sjtnhpghh.jpg",
"data/attachment/forum/202209/21/112044ptitbjiexcxpxcii.jpg",
"data/attachment/forum/202209/21/112044e64ah6sxxsgupw0w.jpg",
"data/attachment/forum/202209/21/112045exxbmi7e4s12rm71.jpg",
"data/attachment/forum/202209/21/112045ay5yxl8vtg8jbn5y.jpg",
"data/attachment/forum/202209/21/112045qyaknu48axpuqq9l.jpg",
"data/attachment/forum/202209/21/112045q57b72cbqm2d22wa.jpg",
"data/attachment/forum/202209/21/112045xr7bf17y9jvr0dbq.jpg",
"data/attachment/forum/202209/21/112045p7x4ork70w9o9v23.jpg",
"data/attachment/forum/202209/21/112045j74y3hnhu7ypqn57.jpg"
];

var Keyframes = [
        [{transform: 'rotateX(90deg)', opacity:'0.4'},
        {offset: 0.6, transform: 'rotateX(0deg)', opacity:'1'}],
       
        [{opacity:'0'},{opacity:'1'}]
];
var EffectTiming = {duration: 8000, fill: 'forwards'};
var imgIdx = 0, lastIdx = imgSet.length - 1;
var imgBlock, items, aniObj, chkImg, aniImg;
var vWindow = document.getElementById('vWindow');
        function initTrun()        {
                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();
        }
       
        function 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();
        }
        initTrun();
</script>

红枫 发表于 2022-9-28 15:22

好帖，欣赏，学习，收藏了。感谢分享！！！

195400 发表于 2022-9-28 15:34

红枫 发表于 2022-9-28 15:22
好帖，欣赏，学习，收藏了。感谢分享！！！

http://www.yinhuabbs.cn/data/attachment/forum/201912/20/123001hstspbnsskb1sb2s.gif

蓝魔 发表于 2022-9-28 23:29

欣赏一下。谢谢。

195400 发表于 2022-9-29 07:45

蓝魔 发表于 2022-9-28 23:29
欣赏一下。谢谢。

http://www.yinhuabbs.cn/data/attachment/forum/201912/21/084215njp5lwls4o0j7pno.gif

非常开心 发表于 2022-10-24 21:42

欣赏楼主的新作，点赞[]多谢分享！
页: [1]
查看完整版本: 戏曲人物