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

灵动

<style type="text/css">
.mBox {
        margin: 10px auto;
        width: 1200px;
        height: 600px;
        position: relative;
        left: -304px;
        top: 80px;
        overflow: hidden;
        border: 1px solid navy;
        box-shadow: 2px 2px 4px 1px #444;
        position: relative;
}
.pBox {
        position: absolute;
        animation: Roll 25s linear infinite;
        display: flex;
}
.pBox:hover {
        cursor: pointer;
        animation-play-state: paused;
}
.pBox img {
        width: 1200px;
        height:600px;
        float: left;
}
@keyframes Roll {
        from { transform: translateX(0); }
        to { transform: translateX(-50%); }
}
</style>

<div class="mBox">
        <div id="pBox" class="pBox">
                <img alt="" src="https://638183.freep.cn/638183/Pic/xuehua.jpg" />
                <img alt="" src="https://638183.freep.cn/638183/Pic/瀑布.jpg" />
                <img alt="" src="https://638183.freep.cn/638183/Pic/greatwall.jpeg" />
                <img alt="" src="https://638183.freep.cn/638183/Pic/dalandong.jpg" />
                <img alt="" src="https://638183.freep.cn/638183/Pic/mmexport1633565988039.jpg" />
                <img alt="" src="https://pic.imgdb.cn/item/61e439062ab3f51d91709901.jpg" />
                <img alt="" src="https://638183.freep.cn/638183/Pic/mmexport1633565956399.jpg" />
                <img alt="" src="https://638183.freep.cn/638183/75ed2e0a12a6fc4dc5571555de9b808c.jpeg" />
        </div>
</div>
<audio id="ktv" src="http://www.kumeiwp.com/sub/filestores/2021/11/19/6a87950b4ddc7a3aa1f9f828a0c69b0d.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 09:34

滑鼠滑动到图片，图片会停止，滑鼠移开，图片继续循环；点击图片可以暂停音乐。

代码及解释在这里：https://www.huachaowang.com/forum.php?mod=viewthread&tid=56172

红影 发表于 2022-1-18 09:53

这个用来做清明上河图的长卷最适合呢，可以练习看着画面滚动，想仔细看看的时候，把鼠标移上去就能停止了，多好{:4_173:}

红影 发表于 2022-1-18 09:58

这个帖子真好，音乐和滚动都能和鼠标关联，完全可以自己控制{:4_187:}

马黑黑 发表于 2022-1-18 11:16

红影 发表于 2022-1-18 09:58
这个帖子真好，音乐和滚动都能和鼠标关联，完全可以自己控制

教程有详细说明

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

红影 发表于 2022-1-18 09:53
这个用来做清明上河图的长卷最适合呢，可以练习看着画面滚动，想仔细看看的时候，把鼠标移上去就能停止了， ...

主意不错。

顺便提一下，我放有一张你那个沙漠眼的图片，它没能显示出来，不知何因

小辣椒 发表于 2022-1-18 12:40

红影 发表于 2022-1-18 09:53
这个用来做清明上河图的长卷最适合呢，可以练习看着画面滚动，想仔细看看的时候，把鼠标移上去就能停止了， ...

亲爱的，我刚那边回帖说可以清明上河图用，哈哈{:4_173:}

小辣椒 发表于 2022-1-18 12:41

黑黑，发现css真的无所不能，太厉害了{:4_199:}

马黑黑 发表于 2022-1-18 12:43

小辣椒 发表于 2022-1-18 12:41
黑黑，发现css真的无所不能，太厉害了

功能丰富，但不是无所不能{:4_170:}

红影 发表于 2022-1-18 14:51

马黑黑 发表于 2022-1-18 11:16
教程有详细说明

是的，看到了你的标注，很详细{:4_199:}

红影 发表于 2022-1-18 14:52

马黑黑 发表于 2022-1-18 11:18
主意不错。

顺便提一下，我放有一张你那个沙漠眼的图片，它没能显示出来，不知何因

不知道啊，我传到冬小雨分享的那个上传图像的地方的。

红影 发表于 2022-1-18 14:52

小辣椒 发表于 2022-1-18 12:40
亲爱的，我刚那边回帖说可以清明上河图用，哈哈

哈哈，咱俩想到一起去了{:4_173:}

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

红影 发表于 2022-1-18 14:52
不知道啊，我传到冬小雨分享的那个上传图像的地方的。

不管他了

大猫咪 发表于 2022-1-18 20:27

特别喜欢这音乐，应该是彝族舞曲吧，

这个好玩，老黑厉害，猫也要学习{:4_187:}

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

大猫咪 发表于 2022-1-18 20:27
特别喜欢这音乐，应该是彝族舞曲吧，

这个好玩，老黑厉害，猫也要学习

期待大猫咪的精美作品

红影 发表于 2022-1-18 22:30

马黑黑 发表于 2022-1-18 17:35
不管他了

嗯嗯，今天看到向上滚动的了，都好看呢{:4_187:}

马黑黑 发表于 2022-1-19 08:53

红影 发表于 2022-1-18 22:30
嗯嗯，今天看到向上滚动的了，都好看呢

根据需要设置吧

红影 发表于 2022-1-19 10:36

马黑黑 发表于 2022-1-19 08:53
根据需要设置吧

这个鼠标滑过图片停止，鼠标点击音乐也停止。很巧妙{:4_187:}

马黑黑 发表于 2022-1-19 12:44

红影 发表于 2022-1-19 10:36
这个鼠标滑过图片停止，鼠标点击音乐也停止。很巧妙

图片暂停是CSS控制，音乐是JS控制，各管各的，只是功能好像都集中在图片上

红影 发表于 2022-1-19 12:58

马黑黑 发表于 2022-1-19 12:44
图片暂停是CSS控制，音乐是JS控制，各管各的，只是功能好像都集中在图片上

是啊，不过这个也很不错，想仔细欣赏时，用鼠标去悬停了，音乐还在，嫌吵就可以直接关闭音乐，读者完全可以自己操控。
页: [1] 2
查看完整版本: 灵动