近朱者赤 发表于 2022-7-28 11:06

学习实践马黑黑老师代码测试002

本帖最后由 近朱者赤 于 2022-7-29 17:07 编辑 <br /><br /><style>
#papa { left: -214px; width: 1024px; height: 620px; background: teal url('https://638183.freep.cn/638183/t22/81.jpg') no-repeat center / cover; perspective: 2000px; box-shadow: 4px 4px 24px #000; position: relative; }

#drawer { position: absolute; width: 700px;; height: 500px; left: calc(50%- 275px); top: calc(50% - 255px); box-shadow: inherit; overflow: hidden; }
.mypic { position: absolute; top: -100%; width: 100%; height: 100%; transition: top 1.5s;}

#wrapper { position: relative; width: 15px; height: 15px; left: 8%; top: 75%; transform-style: preserve-3d; transform: rotateX(-20deg) rotateY(-20deg); cursor: pointer; }
#mypic { position: absolute; width: 50px; height: 50px; transform: translateZ(15px) translateY(30px) translateX(15px); }
#wrapper>span:nth-child(1) { transform: translateZ(40px); background: teal; }
#wrapper>span:nth-child(2) { transform: translateZ(-40px); background: lightgreen; }
#wrapper>span:nth-child(3) { transform: translateX(-40px) rotateY(90deg); background: aquamarine; }
#wrapper>span:nth-child(4) { transform: translateX(40px) rotateY(90deg); background: green; }
#wrapper>span:nth-child(5) { transform: translateY(-40px) rotateX(90deg); background: olive; }
#wrapper>span:nth-child(6) { transform: translateY(40px) rotateX(90deg); background: tan; }
.panel { position: absolute; width: 80px; height: 80px; text-align: center; opacity: 0.25;}
//.panel { position: absolute; width: 80px; height: 80px; text-align: center; transition: all 2s; }
</style>

<div id="papa">
        <div id="drawer"></div>
<div id="wrapper">
                <span class="panel"></span>
                <span class="panel"></span>
                <span class="panel"></span>
                <span class="panel"></span>
                <span class="panel"></span>
                <span class="panel"></span>
                <img id="mypic" src="https://365.tf/disk/tf/1659165192.gif" alt="" />
        </div>

</div>

<script>
let step = 1, start = 0, ani = 100, last;
let pics = [
        'https://638183.freep.cn/638183/Pic/38/1.jpg',
        'https://638183.freep.cn/638183/Pic/38/2.jpg',
        'https://638183.freep.cn/638183/Pic/38/3.jpg',
        'https://638183.freep.cn/638183/Pic/38/4.jpg',
        'https://638183.freep.cn/638183/Pic/38/5.jpg'
];

for(pic of pics) {
        let ele = document.createElement('img');
        ele.src = pic;
        ele.alt = '';
        ele.title = pic;
        ele.className = 'mypic';
        drawer.appendChild(ele);
}

let picAr = document.querySelectorAll('.mypic');

picAni(0, picAr.length - 1);

let timer = setInterval(() => { picAni(0, picAr.length - 1); },3000);

function picAni(n1, n2) {
        if(last != undefined) picAr.style.top= ani + '%';
        let temp = start;
        last = temp;
        ani = step < 0 ? -100 : 100;
        picAr.style.top = '0%';
        start += step;
        if(start == n1 || start == n2) step = -step;
}
</script>

<script>
let aud = new Audio();
let lastX = 0, canMove = false;
let panelAr = document.querySelectorAll('.panel');
aud.loop = true;
aud.src = 'https://music.163.com/song/media/outer/url?id=408532087.mp3';

wrapper.onclick = () => {
        canMove = !canMove;
        if(canMove) {
                for(ele of panelAr) ele.style.opacity = '0';
                wrapper.style.transform = 'rotateX(0) rotateY(0)';
                aud.play();
        } else {
                for(ele of panelAr) ele.style.opacity = '1';
                wrapper.style.transform = 'rotateX(-20deg) rotateY(-20deg)';
                mypic.style.left = '45%';
                mypic.style.top = '40%';
                mypic.style.transform = mypic.offsetLeft > 0 ? 'rotateY(0deg)' : 'rotateY(180deg)';
                aud.pause();
        }
}

document.addEventListener('click', (e) => {
        if(canMove == false) return false;
        e = event || window.event;
        let x = e.pageX, y = e.pageY,
                w = document.body.clientWidth, h = document.body.clientHeight,
                bw = mypic.offsetWidth, bh = mypic.offsetHeight;
        x = x - calcOffset(wrapper).x;
        y = y - calcOffset(wrapper).y;
        if(x + bw >= w) x = w - bw;
        if(y + bh >= h) y = h - bh;
        mypic.style.transform = x > lastX ? 'rotateY(180deg)' : 'rotateY(0deg)';
        lastX = x;
        mypic.style.left = x + 'px';
        mypic.style.top = y + 'px';
});

let calcOffset = (ele) => {
        let x = ele.offsetLeft, y = ele.offsetTop, pa = ele.offsetParent;
        while(pa != null) {
                x += pa.offsetLeft;
                y += pa.offsetTop;
                pa = pa.offsetParent;
        }
        return {x, y};
}
</script>




近朱者赤 发表于 2022-7-28 11:08

感谢马黑黑老师提供代码 让我们在实践中学习熟悉代码{:4_205:}

加林森 发表于 2022-7-28 11:37

论坛有点歪了呢？可能你的代码要修改。

加林森 发表于 2022-7-28 11:41

</td></tr></td></tr></table>
这个结尾删掉才行。

近朱者赤 发表于 2022-7-28 16:09

加林森 发表于 2022-7-28 11:41
这个结尾删掉才行。

我也是乱搞一气，我试着重新编辑下{:4_190:}

加林森 发表于 2022-7-28 17:05

近朱者赤 发表于 2022-7-28 16:09
我也是乱搞一气，我试着重新编辑下

现在就对了。

马黑黑 发表于 2022-7-28 18:15

多重代码柔和在一个帖子里，厉害了

红影 发表于 2022-7-28 23:49

二合一，这个制作有趣{:4_187:}

近朱者赤 发表于 2022-7-29 17:16

马黑黑 发表于 2022-7-28 18:15
多重代码柔和在一个帖子里，厉害了

老师代码给力！加入小鸟修改了立方体透明度，初始呈现效果又不一样了{:4_172:}

近朱者赤 发表于 2022-7-29 17:18

红影 发表于 2022-7-28 23:49
二合一，这个制作有趣

马黑黑老师代码给力，试着瞎玩{:4_173:}

马黑黑 发表于 2022-7-29 18:15

近朱者赤 发表于 2022-7-29 17:16
老师代码给力！加入小鸟修改了立方体透明度，初始呈现效果又不一样了

对，任何有意识的改变，都会产生可能是意想不到的的效果

红影 发表于 2022-7-29 23:12

近朱者赤 发表于 2022-7-29 17:18
马黑黑老师代码给力，试着瞎玩

修改得很棒的{:4_187:}
页: [1]
查看完整版本: 学习实践马黑黑老师代码测试002