摘要：<!DOCTYPEhtml><htmllang="en"><head>??<metacharset="UTF-8">??<metahttp-equiv="X-UA-Compatible"content="IE=edge">??<metaname="viewp
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>抖音</title>
? ? <link rel="stylesheet" href="https://blog.csdn.net/m0_51785393/article/details/index.css">
? ? <link rel="stylesheet" href="https://blog.csdn.net/m0_51785393/article/details/iconfont/iconfont.css">
? ? <link rel="stylesheet" href="https://blog.csdn.net/m0_51785393/article/details/swiper-bundle.min.css">
? ? <script src="https://blog.csdn.net/m0_51785393/article/details/swiper-bundle.min.js"></script>
? ? <script src="https://blog.csdn.net/m0_51785393/article/details/flexable.js"></script>
</head>
<body>
? ? <div id="app">
? ? ? ? <!-- 推荐区域 -->
? ? ? ? <header id="top-bar">
? ? ? ? ? ? <div class="left">
? ? ? ? ? ? ? ? <i class="iconfont icon-video"></i>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="center">
? ? ? ? ? ? ? ? <span>关注</span>
? ? ? ? ? ? ? ? <span class="iconfont icon-shuxian"></span>
? ? ? ? ? ? ? ? <span>推荐</span>
? ? ? ? ? ? ? ? <span class="iconfont icon-shuxian"></span>
? ? ? ? ? ? ? ? <span>附近</span>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="right">
? ? ? ? ? ? ? ? <i class="iconfont icon-search"></i>
? ? ? ? ? ? </div>
? ? ? ? </header>
? ? ? ? <!-- 视频翻页 -->
? ? ? ? <div class="swiper-container">
? ? ? ? ? ? <div class="swiper-wrapper">
? ? ? ? ? ? ? ? <div class="swiper-slide">
? ? ? ? ? ? ? ? ? ? <!-- 播放按钮 -->
? ? ? ? ? ? ? ? ? ? <img class="play-btn" src="https://blog.csdn.net/m0_51785393/article/details/img/play.png" alt="">
? ? ? ? ? ? ? ? ? ? <!-- 播放区功能交互区 -->
? ? ? ? ? ? ? ? ? ? <div class="interactive">
? ? ? ? ? ? ? ? ? ? ? ? <div class="avatar">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <img src="https://blog.csdn.net/m0_51785393/article/details/img/avatar.png" alt="">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <i class="iconfont icon-plus add-friend" style="color:red"></i>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? <div class="stars">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <i class="iconfont icon-star"></i>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? <div class="comment">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <i class="iconfont icon-comment"></i>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? <div class="share">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <i class="iconfont icon-share"></i>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? <!-- 文字区 -->
? ? ? ? ? ? ? ? ? ? <div class="video-msg">
? ? ? ? ? ? ? ? ? ? ? ? <div class="word-msg">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <p class="uid">@淘气的猫</p>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <p class="desc">《古惑仔》是最佳拍档电影公司出品的香港黑帮题材系列电影，正传电影由刘伟强执导，郑伊健、陈小春等主演</p>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <p class="author">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <i class="iconfont icon-music1"></i>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? @烟台融媒创作的原创原声-烟台传媒
? ? ? ? ? ? ? ? ? ? ? ? ? ? </p>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? <div class="disk-area">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="rotate-disk">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <img src="https://blog.csdn.net/m0_51785393/article/details/img/avatar.png" alt="">
? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? <!-- loop:循环播放 -->
? ? ? ? ? ? ? ? ? ? <video loop id="video_0"
? ? ? ? ? ? ? ? ? ? ? ? src="https://blog.csdn.net/m0_51785393/article/details/video/1.mp4">
? ? ? ? ? ? ? ? ? ? </video>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <div class="swiper-slide">
? ? ? ? ? ? ? ? ? ? <!-- 播放按钮 -->
? ? ? ? ? ? ? ? ? ? <img class="play-btn" src="https://blog.csdn.net/m0_51785393/article/details/img/play.png" alt="">
? ? ? ? ? ? ? ? ? ? <!-- 播放区功能交互区 -->
? ? ? ? ? ? ? ? ? ? <div class="interactive">
? ? ? ? ? ? ? ? ? ? ? ? <div class="avatar">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <img src="https://blog.csdn.net/m0_51785393/article/details/img/avatar.png" alt="">
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? <div class="stars">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <i class="iconfont icon-star"></i>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? <div class="comment">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <i class="iconfont icon-comment"></i>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? <div class="share">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <i class="iconfont icon-share"></i>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? <!-- 文字区 -->
? ? ? ? ? ? ? ? ? ? <div class="video-msg">
? ? ? ? ? ? ? ? ? ? ? ? <div class="word-msg">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <p class="uid">@淘气的猫</p>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <p class="desc">《古惑仔》是最佳拍档电影公司出品的香港黑帮题材系列电影，正传电影由刘伟强执导，郑伊健、陈小春等主演</p>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <p class="author">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <i class="iconfont icon-music1"></i>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? @烟台融媒创作的原创原声-烟台传媒
? ? ? ? ? ? ? ? ? ? ? ? ? ? </p>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? <div class="disk-area">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="rotate-disk">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <img src="https://blog.csdn.net/m0_51785393/article/details/img/avatar.png" alt="">
? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? <video loop id="video_1"
? ? ? ? ? ? ? ? ? ? ? ? src="https://blog.csdn.net/m0_51785393/article/details/video/2.mp4">
? ? ? ? ? ? ? ? ? ? </video>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <div class="swiper-slide">
? ? ? ? ? ? ? ? ? ? <!-- 播放按钮 -->
? ? ? ? ? ? ? ? ? ? <img class="play-btn" src="https://blog.csdn.net/m0_51785393/article/details/img/play.png" alt="">
? ? ? ? ? ? ? ? ? ? <!-- 播放区功能交互区 -->
? ? ? ? ? ? ? ? ? ? <div class="interactive">
? ? ? ? ? ? ? ? ? ? ? ? <div class="avatar">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <img src="https://blog.csdn.net/m0_51785393/article/details/img/avatar.png" alt="">
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? <div class="stars">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <i class="iconfont icon-star"></i>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? <div class="comment">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <i class="iconfont icon-comment"></i>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? <div class="share">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <i class="iconfont icon-share"></i>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? <!-- 文字区 -->
? ? ? ? ? ? ? ? ? ? <div class="video-msg">
? ? ? ? ? ? ? ? ? ? ? ? <div class="word-msg">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <p class="uid">@淘气的猫</p>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <p class="desc">《古惑仔》是最佳拍档电影公司出品的香港黑帮题材系列电影，正传电影由刘伟强执导，郑伊健、陈小春等主演</p>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <p class="author">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <i class="iconfont icon-music1"></i>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? @烟台融媒创作的原创原声-烟台传媒
? ? ? ? ? ? ? ? ? ? ? ? ? ? </p>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? <div class="disk-area">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="rotate-disk">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <img src="https://blog.csdn.net/m0_51785393/article/details/img/avatar.png" alt="">
? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? <video loop id="video_2"
? ? ? ? ? ? ? ? ? ? ? ? src="https://blog.csdn.net/m0_51785393/article/details/video/3.mp4">
? ? ? ? ? ? ? ? ? ? </video>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? ? ? <!-- 底部导航栏 -->
? ? ? ? <footer id="tab-bar">
? ? ? ? ? ? <div class="item active">
? ? ? ? ? ? ? ? <span>首页</span>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="item">
? ? ? ? ? ? ? ? <span>朋友</span>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="item">
? ? ? ? ? ? ? ? <div class="plus">
? ? ? ? ? ? ? ? ? ? <i class="iconfont icon-plus"></i>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="item">
? ? ? ? ? ? ? ? <span>消息</span>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="item">
? ? ? ? ? ? ? ? <span>我</span>
? ? ? ? ? ? </div>
? ? ? ? </footer>
? ? </div>
? ? <script src="https://blog.csdn.net/m0_51785393/article/details/index.js"></script>
</body>
<script>
</script>
</html>
* {
? padding: 0;
? margin: 0;
}
html,
body,
#app {
? width: 100%;
? height: 100%;
}
body {
? overflow: hidden;
? background-color: #111;
? padding: 0;
? margin: 0;
? overflow: hidden;
}
#top-bar {
? height: 1.2rem;
? width: 100%;
? font-weight: 200;
? color: #fff;
? font-size: 0.533333rem;
? display: flex;
? position: fixed;
? left: 0;
? line-height: 1.2rem;
? top: 0.533333rem;
? justify-content: space-around;
? z-index: 99999;
}
#top-bar i {
? font-size: 25px;
}
.interactive {
? width: 1.333333rem;
? position: absolute;
? right: 0;
? top: 30%;
? display: flex;
? flex-direction: column;
}
.interactive div {
? margin: 0.266667rem -0.266667rem;
? color: #fee;
}
.interactive .avatar {
? height: 1.333333rem;
? width: 1.333333rem;
? border-radius: 50%;
? border: 2px solid #fff;
? overflow: hidden;
}
.interactive .avatar img {
? height: 1.333333rem;
? width: 1.333333rem;
}
.interactive div i {
? font-size: 1.333333rem;
}
.interactive div .add-friend {
? position: relative;
? top: -50px;
? left: 10px;
? font-size: 10px;
}
.video-msg {
? height: 3.333333rem;
? width: 100%;
?
? position: absolute;
? left: 0;
? bottom: 1.2rem;
? overflow: hidden;
? display: flex;
}
.video-msg .word-msg {
? padding-left: 10px;
? color: #fee;
?
? width: 80%;
? overflow: hidden;
}
.video-msg .word-msg p {
? padding: 3px 0;
}
.video-msg .word-msg .uid {
? font-size: 16px;
}
.video-msg .word-msg .desc {
? font-size: 14px;
}
.video-msg .word-msg .author {
? font-size: 12px;
}
.video-msg .disk-area {
? width: 20%;
? position: relative;
?
}
@keyframes disk-rotate {
? from {
? ? transform: rotate(0deg);
? }
? to {
? ? transform: rotate(359deg);
? }
}
.video-msg .disk-area .rotate-disk {
? height: 40px;
? width: 40px;
? border: 15px solid #444;
? border-radius: 50%;
? position: absolute;
? right: 4px;
? bottom: 8px;
? overflow: hidden;
? animation: disk-rotate 10s linear infinite;
}
.video-msg .disk-area .rotate-disk img {
? height: 40px;
? width: 40px;
}
#tab-bar {
? height: 1.2rem;
? width: 100%;
? background-color: #000;
? font-weight: 200;
? color: #fff;
? font-size: 0.533333rem;
? display: flex;
? position: fixed;
? left: 0;
? line-height: 1.2rem;
? bottom: 0;
? justify-content: space-around;
? z-index: 99999;
}
#tab-bar .item .plus {
? position: relative;
? top: 8px;
? line-height: 30px;
? height: 30px;
? width: 40px;
? border: 2px solid #fee;
}
#tab-bar .item .plus i {
? padding-left: 10px;
}
#tab-bar .item.active {
? border-bottom: 0.026667rem solid #fff;
}
.swiper-container {
? height: 100%;
}
.swiper-slide {
?
? overflow: hidden;
}
.swiper-slide video {
? width: 100%;
? height: 100%;
? outline: none;
}
.play-btn {
? display: block;
}
.play-btn {
? width: 100px;
? height: 100px;
? position: absolute;
? left: 50%;
? top: 50%;
? margin-left: -50px;
? margin-top: -75px;
? opacity: 0.5;
? z-index: 50;
? display: none;
}
const app = document.querySelector('#app');
const slides = document.querySelectorAll('.swiper-slide');
const slideswiper = new Swiper('.swiper-container',{
? ? direction: 'vertical',
? ? on:{
? ? ? ? slideChangeTeansitionEnd: function () {
? ? ? ? },
? ? },
})
var lastIndex=0;
var currentIndex=0;
var play = true;
function switchVideo(){
? ? var playBtn = document.querySelectorAll(".play-btn")[currentIndex];
? ? document.querySelector("#video_"+lastIndex).pause();
? ? document.querySelector("#video_"+currentIndex).play();
? ? playBtn.style.display = "none";
}
for (let index = 0; index < slides.length; index++) {
? ? var element = slides[index];
? ? element.addEventListener('click',function(){
? ? ? ? var playvideo = document.querySelector("#video_"+index);
? ? ? ? var playBtn = document.querySelectorAll(".play-btn")[currentIndex];
? ? ? ? if(play){
? ? ? ? ? ? playvideo.pause();
? ? ? ? ? ? play=false;
? ? ? ? ? ? playBtn.style.display = "block";
? ? ? ? }else{
? ? ? ? ? ? playvideo.play();
? ? ? ? ? ? play=true;
? ? ? ? ? ? playBtn.style.display = "none";
? ? ? ? }
? ? })
}
