绿叶清舟 发表于 2022-7-7 21:42

同花顺


<style>
#papa { left: -214px; width: 1000px; height: 700px; background: #ccc url('https://pic.imgdb.cn/item/62c6e0e3f54cd3f937e727f5.jpg') no-repeat center/cover; position: relative; }
.piece { position: absolute; left: 160px; bottom: 100px; width: 160px; height: 200px; background: #eee; box-shadow: 0 2px 4px #ccc; transform-origin: bottom; transition: all 1s; }
.piece:hover { box-shadow: 2px 2px 34px #fff; cursor: pointer; }
#papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
#papa p { margin: 0; padding: 0; }
.playbox { position: absolute; left: 10px; top: 10px; padding: 10px; font: normal 1em sans-serif; color: snow; background: transparent;border-radius: 8px; overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,.15); z-index: 1; }
.playbox::before { position: absolute;content: '';margin: -20px;left: 0; top: 0; right: 0; bottom: 0;background: rgba(255,255,255,.45);filter: blur(2px); z-index: -1; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
</style>

<div id="papa">
       
        <audio id="aud" src="http://music.163.com/song/media/outer/url?id=4872687.mp3" autoplay="autoplay" loop="loop"></audio>
</div>

<script>
let flags = [...Array(6)].map((x,y) => y*0);
let zIdx = 0, slip = 0;
let picAr = [
        'https://pic.imgdb.cn/item/62c6e127f54cd3f937e78998.jpg',
        'https://pic.imgdb.cn/item/62c6e13ff54cd3f937e7adeb.jpg',
        'https://pic.imgdb.cn/item/62c6e153f54cd3f937e7cbfa.jpg',
        'https://pic.imgdb.cn/item/62c6e167f54cd3f937e7e75e.jpg',
        'https://pic.imgdb.cn/item/62c6e178f54cd3f937e80056.jpg',
];

let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;

Array.from({length: 5}).forEach((item,key) => {
        item = document.createElement('img');
        item.className = 'piece';
        item.src = picAr;
        item.style.zIndex = key + 1;
        item.style.transform = 'rotate(' + (key*30-75) + 'deg)';
        papa.appendChild(item);
});

let img = document.querySelectorAll('.piece');

img.forEach((item,key) => {
        item.onclick = () => {
                flag = flags;
                if(flag == 0) {
                        item.style.zIndex = zIdx;
                        item.style.transform = 'translate(525px, 50px) scale(2.5)';
                        flags = 1;
                        zIdx ++;
                } else {
                        item.style.zIndex = key + 1;
                        item.style.transform = 'translate(0,0) rotate(' + (key*30-75) + 'deg)';
                        flags = 0;
                        zIdx --;
                }
        }
});



let toMin = (val) => {
        if(!val) return '0:0';
        val = Math.floor(val);
        return parseInt(val / 60) + ':' +parseFloat(val % 60);
}
</script>

马黑黑 发表于 2022-7-7 21:46

这个速度，一个字，太快了
{:4_199:}

马黑黑 发表于 2022-7-7 21:47

这是一手好牌！{:4_170:}

马黑黑 发表于 2022-7-7 21:47

王炸的说{:5_106:}

绿叶清舟 发表于 2022-7-7 21:48

马黑黑 发表于 2022-7-7 21:47
王炸的说

无敌了吧{:4_189:}

马黑黑 发表于 2022-7-7 21:54

绿叶清舟 发表于 2022-7-7 21:48
无敌了吧

我一对王咋办

红影 发表于 2022-7-7 21:56

这个好玩，清舟的小脑袋太灵光了{:4_173:}

绿叶清舟 发表于 2022-7-7 21:57

马黑黑 发表于 2022-7-7 21:54
我一对王咋办

把牌偷了{:4_189:}

红影 发表于 2022-7-7 21:57

把那扇形小图变成了同花顺，这个思路太好玩了{:4_189:}

马黑黑 发表于 2022-7-7 21:58

绿叶清舟 发表于 2022-7-7 21:57
把牌偷了

出老千呀

绿叶清舟 发表于 2022-7-7 22:04

红影 发表于 2022-7-7 21:57
把那扇形小图变成了同花顺，这个思路太好玩了

形状很拿着牌啊，一搜还真有这歌的了{:4_189:}

绿叶清舟 发表于 2022-7-7 22:04

马黑黑 发表于 2022-7-7 21:58
出老千呀

赢了就行啊

马黑黑 发表于 2022-7-7 22:08

绿叶清舟 发表于 2022-7-7 22:04
赢了就行啊

这不合法

绿叶清舟 发表于 2022-7-7 22:11

马黑黑 发表于 2022-7-7 22:08
这不合法

牌桌上哪有法的啊

马黑黑 发表于 2022-7-7 22:16

绿叶清舟 发表于 2022-7-7 22:11
牌桌上哪有法的啊

家有家规，牌有牌法。出老千要砍手的

大猫咪 发表于 2022-7-7 23:17

好创意，真漂亮！歌也特别好听，清舟好制作！ 赞！

{:4_204:}{:4_199:}

绿叶清舟 发表于 2022-7-8 11:41

马黑黑 发表于 2022-7-7 22:16
家有家规，牌有牌法。出老千要砍手的

隔壁老王偷的，砍吧{:4_189:}

绿叶清舟 发表于 2022-7-8 11:42

大猫咪 发表于 2022-7-7 23:17
好创意，真漂亮！歌也特别好听，清舟好制作！ 赞！

猫中午好，一起来斗地主{:4_189:}

马黑黑 发表于 2022-7-8 12:11

绿叶清舟 发表于 2022-7-8 11:41
隔壁老王偷的，砍吧

背后的主使者也要受罚

大猫咪 发表于 2022-7-8 13:59

绿叶清舟 发表于 2022-7-8 11:42
猫中午好，一起来斗地主

嗯嗯来了   空了组织下，赢点老黑的钱 {:4_170:}
页: [1] 2
查看完整版本: 同花顺