jquery实现视频播放页面滚动悬浮右下角继续播放效果代码

代码语言:html

所属分类:多媒体

代码描述:jquery实现视频播放页面滚动悬浮右下角继续播放效果代码

代码标签: 播放 页面 滚动 悬浮 右下角 继续 播放 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
    <style>
        * {
      box-sizing: border-box;
    }
    
    body {
      font-family: sans-serif;
      background: #121314;
    }
    
    #site {
      width: 600px;
      margin: 50px auto;
    }
    
    #bloc {
      display: block;
      position: static;
      overflow: hidden;
    }
    
    .box {
      margin: 10px;
    }
    
    #videoBox {
      border: 10px solid #212223;
      transition: 0.5s;
    }
    
    #commentsBox {
      float: left;
      width: 340px;
    }
    
    #suggBox {
      float: left;
      width: 220px;
    }
    
    #commentsBox > div,
    #suggBox > div {
      background: #212223;
      margin-bottom: 20px;
      padding: 20px 30px;
    }
    
    #suggBox p span {
      width: 100%;
      display: block;
      background: #924;
      height: 8px;
      margin: 10px 0;
    }
    
    #suggBox p:before {
      width: 30%;
      content: ' ';
      display: block;
      background: #121314;
      height: 8px;
      margin: 10px 0;
    }
    
    #suggBox p:after {
      width: 70%;
      content: ' ';
      display: block;
      background: #999;
      height: 8px;
      margin: 10px 0;
    }
    
    #commentsBox p span {
      width: 100%;
      display: block;
      background: #eee;
      height: 6px;
      margin: 15px 0;
    }
    
    #commentsBox p:before {
      width: 30%;
      content: ' ';
      display: block;
      b.........完整代码请登录后点击上方下载按钮下载查看

网友评论0