送几只小鸟给大猫咪玩玩

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

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 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>