VScode实现抖音功能

1、效果界面图

1.1完整效果

1.2 界面展示

1.2 暂停展示

1.3 使用css、js文件样式：

// 引用css文件字体样式

//引用swipe文件滑块模式

//引用swiper滑块样式文件

注释：swipe是滑动事件

2、index.html 设计

2.1、style设计：

<style>

body{padding: 0;margin: 0;background-color: #111;overflow: hidden;font-family: "微软雅黑 Light"}

.header{height: 100px;line-height: 100px;position:fixed;top: 0px;z-index: 1;background-color: #111;color: #fff;width: 100%}

.header li{list-style: none;line-height: 100px;display: block;float: left;margin: 0 10px;font-size: 20px;}

.header-add{width: 20px;height: 20px;margin: 40px auto;border: solid 2px #fff;border-radius: 50%;display: block;line-height: 16px;text-align: center}

.container{width:96%;margin: 0 auto}

.main{height: 490px;position: absolute;top: 100px;width: 100%;overflow: hidden}

.video-container{width: 100%;height: 490px;}

.footer {height: 80px;position: fixed;bottom: 0;color: #ffffff;width: 100%}

.footer li{list-style: none;line-height: 80px;display: block;float: left;margin: 0 18px;font-size: 18px;}

.footer li span{display: block;height: 20px;width: 40px;border-radius: 5px;border: 3px solid #ffffff;margin: 30px auto;line-height: 18px;text-align: center}

.player{height: 490px;z-index: 999;width: 100%;}

.player video{height: 480px;width: 100%}

.right{position: absolute;right: 0;top: 130px;z-index: 9999;width: 60px;height: 260px}

.header-u{border-radius: 50%;width: 40px;height: 40px;border: solid 2px #fff;overflow: hidden;margin: 4px}

.header-b{border-radius: 50%;width: 30px;height: 30px;border: solid 4px #777;overflow: hidden;margin-top: 80px}

.header-u img{margin-top: -20px}

.ops{width: 60px;text-align: center;height: 60px}

.bottom-s{position: absolute;bottom: 100px;z-index: 99999;width: 80%;height: 40px}

.bottom-s span{font-size: 14px;height: 20px}

.bottom-s p{font-size: 14px;}

@keyframes rotations {

100%{

transform: rotate(360deg);

}

.music2{

animation: rotations 3s linear 0s infinite;

/* animation-duration:reverse; */

/* animation-duration:alternate; */

animation-duration:alternate-reverse;

}

a { -webkit-tap-highlight-color: rgba(255, 255, 255, 0);}

.progress{

height: 2px;background: #777;width: 100%;position: absolute;z-index: 9999;bottom: 0px;overflow: hidden;

}

.progress .progress-in{

height: 3px;width: 20%;background-color: #fff;z-index: 999999;

}

</style>

2.2、body排版

<body>

</div>

</div>

</div>

</div>

</div>

<p style="line-height: 20px;padding-left: 10px">《古惑仔》是最佳拍档电影公司出品的香港黑帮题材系列电影，正传电影由刘伟强知道，郑伊健，陈小春等主演</p>

<p style="line-height: 30px;padding-left: 10px"><i class="iconfont music1 icon-music1"></i></i>@烟台传媒创作的原创原声-烟台传媒</p>

</div>

</a>

</div>

</div>

</div>

</div>

</div>

<p style="line-height: 20px;padding-left: 10px">《古惑仔》是最佳拍档电影公司出品的香港黑帮题材系列电影，正传电影由刘伟强知道，郑伊健，陈小春等主演</p>

<p style="line-height: 30px;padding-left: 10px"><i class="iconfont music1 icon-music1"></i></i>@烟台传媒创作的原创原声-烟台传媒</p>

</div>

</a>

</div>

</div>

</div>

</div>

</div>

<p style="line-height: 20px;padding-left: 10px">《古惑仔》是最佳拍档电影公司出品的香港黑帮题材系列电影，正传电影由刘伟强知道，郑伊健，陈小春等主演</p>

<p style="line-height: 30px;padding-left: 10px"><i class="iconfont music1 icon-music1"></i></i>@烟台传媒创作的原创原声-烟台传媒</p>

</div>

</a>

</div>

</div>

</body>

2.3、script设计：

let that=this;
    //获取视频信息列表
    let videos=document.querySelectorAll(".video-c");
    //获取播放面板
    let plays=document.querySelectorAll(".play_s");
    //获取音频对象
    let music=document.getElementById("emm");
    //获取进度条信息
    let progress=document.querySelectorAll(".progress-in");

music.play()

//添加video播放进度的监听事件
    videos[0].οntimeupdate=function (){
        //播放时间/总时间*100+%  就是当前进度
        progress[0].style.width= videos[0].currentTimeideos[0].duration*100+'%'
    }
    videos[1].οntimeupdate=function (){
        //播放时间/总时间*100+%  就是当前进度
        progress[1].style.width= videos[1].currentTimeideos[1].duration*100+'%'
    }
    videos[2].οntimeupdate=function (){
        //播放时间/总时间*100+%  就是当前进度
        progress[2].style.width= videos[2].currentTimeideos[2].duration*100+'%'
    }
    let mySwiper = new Swiper ('.main', {
        direction: 'vertical', // 垂直切换选项
        on:{
            /**
             * 滑动出发事件（当屏幕向上或者向下滑动，会触发当前函数）
             */
            slideChangeTransitionStart: function(){
                console.log(this.activeIndex)
                for (let i = 0; i < videos.length; i++) {
                    videos[i].currentTime=0  //清除上一次播放得时间，
                     videos[i].pause()  //停止上一次得播放
                    plays[i].style.display='none'//暂停按钮设置为不可见
                }
                music.play()
                //播放
                videos[this.activeIndex].play()
            },
        }

})

/**
     * 如果视频暂停，点击播放
     * 如果视频播放点击暂停
     * @param i
     */
    function play(i){
        if(videos[i].paused){
            videos[i].play();
            music.play()
            //暂停按钮设置为不可见
            plays[i].style.display='none'
        }else{
            videos[i].pause();
            music.pause()
            //暂停按钮设置为可见
            plays[i].style.display='block'
        }

}

</script>

3、flex.js 弹性布局文件

(function flexible (window, document) {

var docEl = document.documentElement

var dpr = window.devicePixelRatio || 1

// adjust body font size

function setBodyFontSize () {

if (document.body) {

document.body.style.fontSize = (12 * dpr) + 'px'

}

else {

document.addEventListener('DOMContentLoaded', setBodyFontSize)

}

setBodyFontSize();

// set 1rem = viewWidth / 10

function setRemUnit () {

var rem = docEl.clientWidth / 10

docEl.style.fontSize = rem + 'px'

}

setRemUnit()

// reset rem unit on page resize

window.addEventListener('resize', setRemUnit)

window.addEventListener('pageshow', function (e) {

if (e.persisted) {

setRemUnit()

}

})

// detect 0.5px supports

if (dpr >= 2) {

var fakeBody = document.createElement('body')

var testElement = document.createElement('div')

testElement.style.border = '.5px solid transparent'

fakeBody.appendChild(testElement)

docEl.appendChild(fakeBody)

if (testElement.offsetHeight === 1) {

docEl.classList.add('hairlines')

}

docEl.removeChild(fakeBody)

}

}(window, document))

4、项目内的文件：

5、操作方式：

1、单击右键——打开方式——谷歌运行，谷歌用起来更方便；
2、打开开发工具进行查看，快捷键，笔记本电脑：按 fn+F12 ；台式F12，，利用开发工具是使用手机端的方式查看，因为我是按照手机端的大小写的，如果不用这个的话，界面是乱的，就不会呈现效果形式；
3、按住鼠标滑动（像在手机刷抖音一样进行滑动）
4、单击鼠标控制视频的暂停播放——启动播放(音乐也会跟着被控制)

6、transform 思维导图：

7、animation思维导图：

由于网站不支持MP4文件，因此听不了音乐。如果有想要完整源码包或者css、js、swiper文件可以发我邮箱3088814424@qq.com。

VScode实现抖音功能相关推荐

抖音小程序拍抖音功能
1.首先要开通抖音短视频挂载功能登录自己的抖音开发者平台注意要符合开通条件评级达到A级及以上,信用分不低于90分小程序符合通用挂载准入类目了解详情小程序内不包含诱导分享,收集线索,引导致电等 ...
云控系统针对抖音和快手功能是一样的吗？
大家好,今天小朱来给大家讲解一下抖音云控和快手云控功能的区别在于哪. 第一点咱们就先说一说抖音的吧,云控系统对于抖音功能都有:点赞.评论.私信.关注.留言等30多个功能. 第二点吧,咱们就说一下快手云 ...
抖音开放平台授权登录PHP,抖音向第三方平台开放“一键发布”功能大疆、网易游戏等已接入...
9月6日,据记者了解,抖音已经开放了第三方App的内容分享至抖音的功能,这意味着用户在第三方平台发布的内容可以直接同步至抖音. 据抖音方面介绍,分享功能在2019年3月开始上线,目前除各种视频工具类应 ...
【方案分享】抖音平台新媒体百问百答：平台规则、爆款涨粉、运营技巧、内容变现.pdf（附下载链接）...
省时查报告-专业.及时.全面的行研报告库省时查方案-专业.及时.全面的营销策划方案库 [免费下载]2022年3月份热门报告合集[干货]2021社群运营策划方案.pptx 大萧条来临前的几大征兆大家 ...
搭建数据指标体系（抖音）
文章目录一.搭建指标体系的意义二.如何搭建指标体系 1. 选择关键指标(北极星指标) 2. 从AARRR模型出发搭建产品基本指标体系 3. 基于业务搭建指标 4.产品的功能模块指标三.抖音的数据 ...
视频号和抖音号的区别
是我,一剪哥. 今天周末,继续和大家聊一下关于视频号的那点事儿. 一句熟悉的话飘过耳边:2003年你错过了淘宝红利,2009年你错过了微博红利,2013年你错过了公众号红利,2018年你错过了抖音红利 ...
Autojs 抖音自动养号脚本+抖音直播控场脚本
程序猿日常今天出个成品app,大家一起学习参考! 功能描述一.抖音功能 1.垂直浏览 2.直播暖场 3.精准引流 4.粉丝留言 5.同城引流 6.取消关注 7.万能引流 8.精准截流 9.访客引流 ...
正式限制第三方链接，店宝宝：快手抖音的电商江湖来了！
美团正在广东.江浙沪密集拜访优势品牌商和产业带工厂,百度则悄然上线了"购物"频道.拼多多正面临着越来越多的"对手":美团百度微信--几乎每个有流量入口的平台都做 ...
为什么会显示服务器升级暂时,抖音服务器升级中，暂不支持本地区开播？在澳洲怎么开抖音直播？...
抖音服务器升级中,暂不支持本地区开播?在澳洲怎么开抖音直播? 近期,不少网友咨询:网上一些用户抱怨,我们的抖音营销才能培养这种理念吗?别着急,你来给我们答案吧!一.优化自然评价所谓自然评价,就是将用户 ...

VScode实现抖音功能

VScode实现抖音功能相关推荐

最新文章

热门文章