marquee动画设计1[全控]
本帖最后由 亚伦影音工作室 于 2025-6-29 09:36 编辑 <br /><br /><style>#papa { margin: 10px -300px; width: 1186px;height: 620px;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b00bd68e548ae4437df7fc217308c8c4.jpg) no-repeat center/cover; box-shadow: 2px 2px 8px #000;overflow: hidden; z-index: 1; position: relative;}
.inmg{width:100%; height: 550px; position:absolute; TOP:12%;LEFT: 0%;}
.start{color: #000;position: absolute; top:74%; left: 22%;}
.end{color: #000;position: absolute;top:74%; left: 33%;}
#btn{background: url(https://pic.imgdb.cn/item/675813f6d0e0a243d4e14a48.png) no-repeat 0px 0px/cover;width:50px;height: 50px;left: 27%; top: 72%;position: absolute;z-index: 20;}
</style>
<div id="papa">
<div>
<marqueeid="m" behavior="alternate"scrollamount="5"height=620>
<img alt="" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b00bd68e548ae4437df7fc217308c8c4.jpg" title="" style="width: 1186px;height: 620px;" /><img alt="" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b00bd68e548ae4437df7fc217308c8c4.jpg" title="" style="width: 1186px;height: 620px; transform: rotateY(180deg);"/><img alt=""src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b00bd68e548ae4437df7fc217308c8c4.jpg" title="" style="width: 1186px;height: 620px;" /><img alt="" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b00bd68e548ae4437df7fc217308c8c4.jpg" title=""style=" width: 1186px;height: 620px;transform: rotateY(180deg);" /><img alt=""src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b00bd68e548ae4437df7fc217308c8c4.jpg" title="" style="width: 1186px;height: 620px;"/><img alt=""src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b00bd68e548ae4437df7fc217308c8c4.jpg" title=""style=" width: 1186px;height: 620px;transform: rotateY(180deg); "/><img alt="" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b00bd68e548ae4437df7fc217308c8c4.jpg" title="" style="width: 1186px;height: 620px;" /><img alt="" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b00bd68e548ae4437df7fc217308c8c4.jpg" title=""style=" width: 1186px;height: 620px;transform: rotateY(180deg);" />
</marquee>
</div>
<marquee height="550"class="inmg" scrollamount="7" scrolldelay="30" id="m1"><imgsrc="https://pic1.imgdb.cn/item/685fad0b58cb8da5c87a8db7.png" title="" width="360" /></marquee>
<marquee height="550" class="inmg" scrollamount="6" scrolldelay="30" id="m2"><imgsrc="https://pic1.imgdb.cn/item/685fad0b58cb8da5c87a8db7.png" title="" width="360" /></marquee>
<marquee height="550" class="inmg" scrollamount="5" scrolldelay="30"id="m3"><imgsrc="https://pic1.imgdb.cn/item/685fad0b58cb8da5c87a8db7.png" title="" width="360" /></marquee>
<marquee height="550" class="inmg" scrollamount="4" scrolldelay="30" id="m4"><imgsrc="https://pic1.imgdb.cn/item/685fad0b58cb8da5c87a8db7.png" title="" width="360" /></marquee>
<marquee height="550" class="inmg" scrollamount="3" scrolldelay="30"id="m5" ><imgsrc="https://pic1.imgdb.cn/item/685fad0b58cb8da5c87a8db7.png" title="" width="360" /></marquee>
<marquee height="550" class="inmg"scrollamount="2" scrolldelay="30" id="m6"style="width: 100%; height: 550px;"><imgsrc="https://pic1.imgdb.cn/item/685fad0b58cb8da5c87a8db7.png" title="" width="360" /></marquee>
<span class="start">00:00</span><p id="btn"></p><span class="end">00:00</span>
</div>
<audio id="aud" src="https://img2.oldkids.cn/upload/2025/02/02/blog_260848378_20250202090932040.mp3" autoplay loop ></audio>
<script>
var music = document.getElementById('aud');
var m= document.getElementById('m');
var m1 = document.getElementById('m1');var m2 = document.getElementById('m2');var m3 = document.getElementById('m3');var m4 = document.getElementById('m4');var m5= document.getElementById('m5');var m6= document.getElementById('m6');
var btn = document.getElementById('btn');
btn.onclick = function() {
if (aud.paused) {
aud.play();
m.start();m1.start();m2.start();m3.start();m4.start();m5.start();m6.start();
btn.style.background = 'url(https://pic.imgdb.cn/item/675813f6d0e0a243d4e14a48.png) no-repeat 0px 0px/cover';
} else {
aud.pause();m.stop();m1.stop();m2.stop();m3.stop();m4.stop();m5.stop();m6.stop();
btn.style.background = 'url(https://pic.imgdb.cn/item/675813e7d0e0a243d4e14a18.png) no-repeat 0px 0px/cover';
}
};
const start = document.querySelector('.start')
const end= document.querySelector('.end')
function conversion (value) {
let minute = Math.floor(value / 60)
minute = minute.toString().length === 1 ? ('0' + minute) : minute
let second = Math.round(value % 60)
second = second.toString().length === 1 ? ('0' + second) : second
return `${minute}:${second}`
}
aud.onloadedmetadata = function () {
end.innerHTML = conversion(aud.duration)
start.innerHTML = conversion(aud.currentTime)
}
setInterval(() => {
start.innerHTML = conversion(aud.currentTime)
}, 1000)
</script> 欣赏老师的动画设计，很美！
漂亮！谢谢亚伦老师精彩分享{:4_191:} 这样的图片滚动很奇特，还有层叠的感觉呢。不同的滚动速度，造成如此奇妙的效果。
欣赏亚伦老师好帖{:4_199:} 一般用这个命令都是文字滚动呢，图片的倒是少，被亚伦老师灵活运用了{:4_187:} 美不胜收！ 每贴总做得最精致！
页:
[1]