马黑黑 发表于 2022-1-18 18:33

送几只小鸟给大猫咪玩玩

<style type="text/css">
.mBox {
/*        主窗体
        width 和 height 与图片统一尺寸
*/
        margin: 10px auto;
        width: 640px;
        height: 400px;
        position: relative;
        overflow: hidden;
        border: 1px solid navy;
        box-shadow: 2px 2px 4px 1px #444;
}
.pBox {
/*        图片盒子
        时长可修改， alternate不要就一直滚动
*/
        position: absolute;
        animation: Roll 25s linear infinite alternate;
        display: block;
}
.pBox:hover {
        cursor: pointer;
        animation-play-state: paused;
}
.pBox img {
/*        图片统一尺寸
        注意主窗体的尺寸和它一致
*/
        width: 640px;
        height: 400px;
        float: left;
}
@keyframes Roll {
        from { transform: translateY(0); }
        to { transform: translateY(-50%); }
}
</style>

<div class="mBox">
        <div id="pBox" class="pBox">
                <img alt="" src="https://638183.freep.cn/638183/Pic/10.jpg" /><br>
                <img alt="" src="https://638183.freep.cn/638183/Pic/9.jpg" /><br>
                <img alt="" src="https://638183.freep.cn/638183/Pic/8.jpg" /><br>
                <img alt="" src="https://638183.freep.cn/638183/Pic/7.jpg" /><br>
                <img alt="" src="https://638183.freep.cn/638183/Pic/6.jpg" /><br>
                <img alt="" src="https://638183.freep.cn/638183/Pic/5.jpg" /><br>
                <img alt="" src="https://638183.freep.cn/638183/Pic/4.jpg" /><br>
                <img alt="" src="https://638183.freep.cn/638183/Pic/3.jpg" /><br>
                <img alt="" src="https://638183.freep.cn/638183/Pic/2.jpg" /><br>
                <img alt="" src="https://638183.freep.cn/638183/Pic/1.jpg" />
        </div>
</div>
<audio id="ktv" src="http://www.kumeiwp.com/sub/filestores/2022/01/18/2f60a743661f8e837ac5d0166d53994b.mp3" loop="loop" autoplay="autoplay"></audio>

<script language="javascript">
var ktv = document.getElementById('ktv');
document.getElementById('pBox').onclick=function(){ ktv.paused ? ktv.play() : ktv.pause(); }
</script>

马黑黑 发表于 2022-1-18 18:35

源码分享：
<style type="text/css">
.mBox {
/*        主窗体
        width 和 height 与图片统一尺寸
*/
        margin: 10px auto;
        width: 640px;
        height: 400px;
        position: relative; /* 相对定位：不能没有这句 */
        overflow: hidden;
        border: 1px solid navy;
        box-shadow: 2px 2px 4px 1px #444;
}
.pBox {
/*        图片盒子
        时长可修改， alternate不要就一直滚动
*/
        position: absolute;
        animation: Roll 25s linear infinite alternate;
        display: block;
}
.pBox:hover {
        cursor: pointer;
        animation-play-state: paused;
}
.pBox img {
/*        图片统一尺寸
        注意主窗体的尺寸和它一致
*/
        width: 640px;
        height: 400px;
        float: left;
}
@keyframes Roll {
        from { transform: translateY(0); }
        to { transform: translateY(-50%); }
}
</style>

<div class="mBox">
        <div id="pBox" class="pBox">
                <img alt="" src="https://638183.freep.cn/638183/Pic/10.jpg" /><br>
                <img alt="" src="https://638183.freep.cn/638183/Pic/9.jpg" /><br>
                <img alt="" src="https://638183.freep.cn/638183/Pic/8.jpg" /><br>
                <img alt="" src="https://638183.freep.cn/638183/Pic/7.jpg" /><br>
                <img alt="" src="https://638183.freep.cn/638183/Pic/6.jpg" /><br>
                <img alt="" src="https://638183.freep.cn/638183/Pic/5.jpg" /><br>
                <img alt="" src="https://638183.freep.cn/638183/Pic/4.jpg" /><br>
                <img alt="" src="https://638183.freep.cn/638183/Pic/3.jpg" /><br>
                <img alt="" src="https://638183.freep.cn/638183/Pic/2.jpg" /><br>
                <img alt="" src="https://638183.freep.cn/638183/Pic/1.jpg" />
        </div>
</div>
<audio id="ktv" src="http://www.kumeiwp.com/sub/filestores/2022/01/18/2f60a743661f8e837ac5d0166d53994b.mp3" loop="loop" autoplay="autoplay"></audio>

<script language="javascript">
var ktv = document.getElementById('ktv');
document.getElementById('pBox').onclick=function(){ ktv.paused ? ktv.play() : ktv.pause(); }
</script>

马黑黑 发表于 2022-1-18 18:38

@大猫咪 可不要把这些小可爱吃了 {:4_170:}

马黑黑 发表于 2022-1-18 18:38

里面有一只是我养的，不过他现在鸟喙变黑了

大猫咪 发表于 2022-1-18 18:52

舍不得吃，我猜那只文鸟上老黑养的，要不就是那只黑八。。。

这个好，图片可以慢慢游览，猫得学习。谢谢老黑，晚上好 ！

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

马黑黑 发表于 2022-1-18 19:39

大猫咪 发表于 2022-1-18 18:52
舍不得吃，我猜那只文鸟上老黑养的，要不就是那只黑八。。。

这个好，图片可以慢慢游览，猫得学习。谢谢 ...

黑八，黑八{:4_170:}

马黑黑 发表于 2022-1-18 19:40

里面有一只跟我养的猪建立了友情，大家猜猜看是哪一只

大猫咪 发表于 2022-1-18 19:42

马黑黑 发表于 2022-1-18 19:39
黑八，黑八

想想就知道 {:4_170:} 我以前养过鹩哥，被人拐走了   {:5_106:}

老黑这会说几句话啊

马黑黑 发表于 2022-1-18 19:42

大猫咪 发表于 2022-1-18 18:52
舍不得吃，我猜那只文鸟上老黑养的，要不就是那只黑八。。。

这个好，图片可以慢慢游览，猫得学习。谢谢 ...

嗯嗯，饿饿肚子保持苗条 {:4_170:}

马黑黑 发表于 2022-1-18 19:45

大猫咪 发表于 2022-1-18 19:42
想想就知道我以前养过鹩哥，被人拐走了   

老黑这会说几句话啊

嗯嗯，等下要去陪小三看八点档 {:4_170:}

大猫咪 发表于 2022-1-18 19:46

马黑黑 发表于 2022-1-18 19:45
嗯嗯，等下要去陪小三看八点档

反正老黑就黄金时间狠忙{:4_170:}

马黑黑 发表于 2022-1-18 19:47

大猫咪 发表于 2022-1-18 19:46
反正老黑就黄金时间狠忙

喝个花酒总应该的吧{:4_189:}

大猫咪 发表于 2022-1-18 19:49

马黑黑 发表于 2022-1-18 19:47
喝个花酒总应该的吧

嗯嗯    应该的    回去跪榴莲{:4_170:}

马黑黑 发表于 2022-1-18 19:49

大猫咪 发表于 2022-1-18 19:49
嗯嗯    应该的    回去跪榴莲

免
{:4_170:}

加林森 发表于 2022-1-18 20:38

好漂亮的制作，谢谢老黑！{:4_191:}

红影 发表于 2022-1-18 21:15

前面还在说是不是有竖向滚动的图图，黑黑这么快就做出来了，厉害{:4_199:}

马黑黑 发表于 2022-1-18 21:17

红影 发表于 2022-1-18 21:15
前面还在说是不是有竖向滚动的图图，黑黑这么快就做出来了，厉害

我在那里也有答复的

红影 发表于 2022-1-18 21:25

这个到底了还能反向循环，好看{:4_187:}

加林森 发表于 2022-1-18 21:35

老黑帮忙啊，我这里又出问题了。
《来跳舞》海来阿木 送大家！ - 欢乐水吧 - 花潮论坛 - Powered by Discuz!
https://www.huachaowang.com/forum.php?mod=viewthread&tid=56195&extra=page%3D1

马黑黑 发表于 2022-1-18 21:49

加林森 发表于 2022-1-18 21:35
老黑帮忙啊，我这里又出问题了。
《来跳舞》海来阿木 送大家！ - 欢乐水吧 - 花潮论坛 - Powered by Discu ...

你这个连编辑按钮都找不到了。你可以在后台删掉它。
这是西瓜视频，我写的JS按钮控制不了它的
页: [1] 2 3 4
查看完整版本: 送几只小鸟给大猫咪玩玩