逍遥阁

长图转视频

关键词: 视频

长图转视频

```
<html>
<title>index</title>
<style>
    body {
        margin: 0;
    }

#box {
        background-color: white;
        padding: 100px 0; /*上下留出一定的距离出来，防止画面被挡住*/
    }

#child {
        background-color: white;
        height: 760px; /*录制的尺寸是540*960，上下的距离扣除后剩余的高度*/
        overflow: hidden;
    }
</style>
<body>
<div id="box">
    <div id="child">
        <div id="scroll"><img src="2.jpg" width="100%" alt=""></div>
    </div>
</div>
<script>
    function scroll() {
        const h = window.setInterval(function () {
            const scroll = document.getElementById("scroll");
            let old = 0;
            if (scroll.style.marginTop) {
                old = parseInt(scroll.style.marginTop);
            }
            /*图片等比率缩放后的高度减去child的高度*/
            if (old + (1847.5 - 760) <= 0) {
                window.clearInterval(h);
            }
            scroll.style.marginTop = (old - 1) + "px";
        }, 10);
    }

//先停留多少毫秒再滚动
    window.setTimeout(scroll, 15000);
</script>
</body>
</html>
```

admin
2022-02-20 23:04:34
html

文章分类

文章标签

文章归档

友情链接

长图转视频