搜索

h5如何实现抖音上下滑动切换视频的效果？

html5 javascript

请问h5如何实现抖音上下滑动切换视频的效果？

网友回复

可以在一个div中放三个视频，第一个视频显示，第二第三个视频overflow：hidden，然后设置可滚动，对滚动进行scrolltop侦测，一旦发现到最后一个视频，就插入一个新视频video

实现滚动,示例代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        var autogo = false;
        var lastscrolltop = 0;
        bready(function() {
            play();
            $("#cont").scroll(function(event) {
                play();
            })
        });
        function play() {
            if (autogo) {
                return;
            }
            var scrolltop = $("#cont").scrollTop();
            var winheight = $(window).height();
            //获取第几个视频
            var indexvideo = Math.ceil(scrolltop/winheight);
            if (scrolltop < lastscrollt...

点击查看剩余70%

by thinkfuture

我知道答案，我要回答

我有问题

h5如何实现抖音上下滑动切换视频的效果？

如何将linux服务器的文件目录映射到windows电脑磁盘？

Docling 与 MarkItDown 两个库有啥不同？

豆包收费后国产其他ai软件也会跟进收费吗？

JPEG 与 HEIF图片格式区别？

centos7版本太旧无法安装python3.11，如何在docker中运行python3.11？

python如何做个RPA按键精灵的程序？

写一个windows的cmd的python代码如何在命令行中捕获获取复制粘贴的图片？

如何将别人爆款的抖音短视频短剧文案提取为seedance2的提示词？

阿里云域名dns云解析10万次日限额如何应对？

windows电脑如何提交上架ipa苹果应用？