视频背景自定义滚动条制作代码 <!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> |
