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

2019-09-10 郑州网站建设  

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

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>dhgsahdls;asa</title>

<script type="text/javascript" src=http://www.divcss5.com/html/"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.png) 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.gif);

                   right: 0px;

                   cursor: pointer;

         }

/**选中的样式**/

.cds_scrollbar_over {

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

         }

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

.cds_scrollbar_pushed {

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

         }

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

.cds_track {

                   position: absolute;

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

                   right: -1px;

                   top: 0px;

                   height: 100%;

                   cursor: pointer;

         }

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

.cds_up {

                   position: absolute;

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

                   right: 0px;

                   top: 0px;

                   cursor: pointer;

         }

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

.cds_down {

                   position: absolute;

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

                   right: 0px;

                   bottom: 0px;

                   cursor: pointer;

         }

 

</style>

</head>

 

<body>

        <div class="ss">

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

 


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/seo/1816.html转载请标明出处,谢谢合作!
标签:
  • 代码
  • 视频
  • 滚动
  • 背景
  • 制作
  • 定义
  • !