"/>

视频背景自定义滚动条制作

视频背景自定义滚动条制作

 

视频背景自定义滚动条制作代码

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>dhgsahdls;asa</title>

<script type="text/javascript" src="http://7fvk4m.com1.z0.glb.clouddn.com/roll.js"></script>

<style>

.ss{height:100%/*inherit*/;

         overflow: hidden;

         position: fixed;

         top: 0;

         left:0;

         width: 100%;

         }

.shade{ width:100%;

        height:100%;

                   position:fixed;

                   top:0;

                   left:0;

                   z-index:1;

                   background:url(ss.webp) repeat;}

.sp{ visibility: visible;

             width: 115%;

             position: absolute;

             top:50%;

             left:50%;

    transform: translate(-50%, -50%);

   -webkit-transform: translate(-50%, -50%);}

.con{height:2000px; position:relative;}

.banner{background:#fff; height:1000px;}

.content1{ width:1000px;

          height:1000px;

                     margin:0 auto;

                     background:rgba(0,0,0,.5)}

                    

/**滚动条**/

body{margin: 0px;

                   padding: 0px;

                   background: #222;

                   position: absolute;

                   width: 100%;

                   height: 100%;

                   pointer: default;

                   overflow:hidden;

                   }

#screen {

                   position: absolute;

                   left: 0;

                   height: 100%;

                   top: 0;

                   width: 100%;

                   overflow: auto;

                   color: #fff;

         }

 

#screen2 {                  position: absolute;

                   left: 20%;

                   height: 30%;

                   width: 60%;

                   top: 60%;

                   overflow: auto;

                   background: #111;

                   color: #fff;

         }

.content {

                   position:relative;

                   font-size: 0.8em;

                   font-family: verdana;

                   color: #fff;

                   padding: 1em;

                   height: 100%;

         }

a {

                   text-decoration: none;

                   color:#ff8000;

         }

a:hover    {

                   text-decoration: none;

                   background:#ff8000;

                   color:#ffffff;

         }

a:visited {

                   text-decoration: none;

                   color:#ff8000;

         }

a:visited:hover {

                   text-decoration: none;

                   background:#ff8000;

                   color:#ffffff;

         }

/**滚动条的样式**/

.cds_scrollbar {

                   position: absolute;

                   background: #555 url(/divgundong/12476505130.webp);

                   right: 0px;

                   cursor: pointer;

         }

/**选中的样式**/

.cds_scrollbar_over {

                   background: #aaa url(/divgundong/12476497481.webp);

         }

/**点击的样式拖动**/

.cds_scrollbar_pushed {

                   background: #fff url(/divgundong/12476497480.webp);

         }

/**未经过的样式**/

.cds_track {

                   position: absolute;

                   background: #222 url(/divgundong/12476497482.webp);

                   right: -1px;

                   top: 0px;

                   height: 100%;

                   cursor: pointer;

         }

/**上箭头的样式**/

.cds_up {

                   position: absolute;

                   background: #f60 url(/divgundong/12476497483.webp);

                   right: 0px;

                   top: 0px;

                   cursor: pointer;

         }

/**下箭头的样式**/

.cds_down {

                   position: absolute;

                   background: #f60 url(/divgundong/12476497483.webp);

                   right: 0px;

                   bottom: 0px;

                   cursor: pointer;

         }

 

</style>

</head>

 

<body>

        <div class="ss">

             <div class="shade"></div>

 

              <video src="http://qiniucdn.activity.sonkwo.com/20170117/video/00_1_2.mp4" autoplay loop  class="sp">

                   <source src="http://qiniucdn.activity.sonkwo.com/20170117/video/00_1_2.mp4" type="video/mp4">

             </video>

      </div>

    <div class="con" id="screen">

       <div class="banner"></div>

       <div class="content1">

         djsalk'

       </div>

    </div>

    <div >

</div>

 

</div>

</body>

</html>

推荐阅读