+
95
-

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

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

网友回复

+
15
-

可以在一个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%

我知道答案,我要回答