js_图片生成的滚动条

她让我换网名
她让我换网名 发布于 2017-01-11 17:45:37 浏览:236 类型:原创 - 教程 分类:JavaScript - css3代码 二维码: 作者原创 版权保护
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript">
    
    var cds = {
	O  : [],
	ok : false,
	ym : 0,
	N  : 0,
	fo : 0,
	sc : 0,
	sp : 0,
	to : 0,
	/* on mouse move */
	m_move : function(e) {
		if (!e) e = window.event;
		/* release drag outside of the window - IE only */
		if (cds.fo.sg && !cds.w3c && !e.button) { cds.m_up(); return; }
		/* vertical mouse position */
		cds.ym = e.screenY;
		/* drag scrollbar */
		if (cds.fo.sg) cds.fo.scrollTop = cds.fo.sZ + (cds.ym - cds.fo.yZ) / cds.fo.r;
	},
	/* on mouse up */
	m_up : function (e) {
		if (!e) e = window.event;
		var tg = (e.target) ? e.target : e.srcElement;
		/* clear and skin scrollbar */
		if (cds.fo) cds.fo.sb.className = (tg.className.indexOf('scrollbar') > 0) ? 'cds_scrollbar cds_scrollbar_over' : 'cds_scrollbar';
		document.onselectstart = '';
		cds.clr();
		cds.fo.sg = false;
	},
	/* clear */
	clr : function () {
		clearTimeout(cds.to);
		cds.sc = 0;
		return false;
	},
	/* refresh all scrollbars */
	refresh : function () {
		for (var i = 0, N = cds.N; i < N; i++) {
			var o = cds.O[i];
			o.v_scroll();
			o.sb.style.width = o.st.style.width = o.su.style.width = o.su.style.height = o.sd.style.width = o.sd.style.height = o.w + 'px';
			o.sb.style.height = Math.ceil(Math.max(o.w * .5, o.r * o.offsetHeight) + 1) + 'px';
		}
	},
	/* arrows scrolling loop */
	a_scroll : function () {
		if (cds.sc != 0) {
			cds.fo.scrollTop += 6 * cds.sc / cds.fo.r;
			cds.to = setTimeout(cds.a_scroll, cds.sp);
			cds.sp = 32;
		}
	},
	/* start arrows scrolling */
	m_down : function (o, s) {
		if (cds.sc == 0) {
			o.dv.sb.className = 'cds_scrollbar cds_scrollbar_pushed';
			cds.fo = o.dv;
			cds.sc = s;
			cds.sp = 400;
			cds.a_scroll();
		}
	},
	/* init script */
	init : function () {
		if (window.oper || (!window.addEventListener && !window.attachEvent)) { this.ok = false; return; }
		/* add events */
		function addEvent (o, e, f) {
			if (window.addEventListener) { o.addEventListener(e, f, false); cds.w3c = true; return true; }
			if (window.attachEvent) return o.attachEvent('on' + e, f);
			return false;
		}
		this.ok = addEvent(window.document, 'mousemove', cds.m_move);
		this.ok = addEvent(window.document, 'mouseup', cds.m_up);
		this.ok = addEvent(window, 'resize', cds.refresh);
		return this.ok;
	},
	/* add skinable scrollbar */
	add : function (id) {
		/* get div */
		var dv = document.getElementById(id);
		/* init script */
		if (!cds.ok) cds.init();
		/* return on error */
		if (!cds.ok || !dv) return false;
		/* append div function */
		function cDiv (c) {
			var o = document.createElement('div');
			o.dv = dv;
			o.className = c;
			dc.appendChild(o);
			return o;
		}
		/* clone the original div to create an empty container */
		var dc = dv.cloneNode(false);
		dc.style.overflow = "hidden";
		/* insert the container into the div's parent */
		dv.parentNode.appendChild(dc);
		/* move the original div into the container */
		dc.appendChild(dv);
		/* modify its positionning to fit into the container */
		dv.style.position = 'absolute';
		dv.style.left = dv.style.top = '0px';
		dv.style.width = dv.style.height = '100%';
		/* push div reference in array */
		cds.O[cds.N++] = dv;
		dv.sg = false;
		/* create and append skinned scrollbar HTML elements to the container, on top of the original div */
		dv.st = cDiv('cds_track');
		dv.sb = cDiv('cds_scrollbar');
		dv.su = cDiv('cds_up');
		dv.sd = cDiv('cds_down');
		/* scrollbar on mouse down */
		dv.sb.onmousedown = function (e) {
			if (!this.dv.sg) {
				if (!e) e = window.event;
				/* save active/scrollable div */
				cds.fo = this.dv;
				/* save vertical mouse and scroll position */
				this.dv.yZ = e.screenY;
				this.dv.sZ = dv.scrollTop;
				this.dv.sg = true;
				/* pushed skin */
				this.className = 'cds_scrollbar cds_scrollbar_pushed';
				document.onselectstart = function () { return false; }
			}
			return false;
		}
		/* track on mouse down */
		dv.st.onmousedown = function (e) {
			if (!e) e = window.event;
			/* save active/scrollable div */
			cds.fo = this.dv;
			/* calculate scrollbar position */
			cds.ym = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
			for (var o = this.dv, y = 0; o != null; o = o.offsetParent) y += o.offsetTop;
			this.dv.scrollTop = (cds.ym - y - (this.dv.r * this.dv.offsetHeight / 2) - this.dv.w) / this.dv.r;
			this.dv.sb.onmousedown(e);
		}
		/* arrows on mouse down */
		dv.su.onmousedown = dv.su.ondblclick = function (e) { cds.m_down(this, -1); return false; }
		dv.sd.onmousedown = dv.sd.ondblclick = function (e) { cds.m_down(this,  1); return false; }
		/* release events */
		dv.su.onmouseout = dv.su.onmouseup = cds.clr;
		dv.sd.onmouseout = dv.sd.onmouseup = cds.clr;
		/* scrollbar on mouse over skin */
		dv.sb.onmouseover = function (e) {
			if (!this.dv.sg) this.className = 'cds_scrollbar cds_scrollbar_over';
			return false;
		}
		/* scrollbar on mouse out (default) skin */
		dv.sb.onmouseout  = function (e) {
			if (!this.dv.sg) this.className = 'cds_scrollbar';
			return false;
		}
		/* scrollbar repositionning */
		dv.v_scroll = function () {
			this.r = (this.offsetHeight - 2 * this.w) / this.scrollHeight;
			this.sb.style.top = Math.floor(this.w + this.scrollTop * this.r) + 'px';
		}
		/* calculate scrollbar width */
		dv.w = dv.offsetWidth - dv.clientWidth + 1;
		/* init scroll */
		dv.v_scroll();
		cds.refresh();
		/* hook on scroll browser's event */
		dv.onscroll = dv.v_scroll;
		return dv;
	}
}

onload = function() {
	/* init scrollbars */
	cds.add('screen');
	cds.add('screen2');
}


</script>
<style>
.ss{height: 1080px/*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>

              <video src="video/00_1_1.mp4" autoplay loop  class="sp">
                   <source src="video/00_1_1.mp4" type="video/mp4">
             </video>
      </div>
    <div class="con" id="screen">
       <div class="banner"></div>
       <div class="content1">
          背景要插入视频,浏览器自带的滚动条太扯了一点,一点都不和谐,改变了一下滚动条的样式,不要求兼容ie也就没看ie的,谷歌和火狐都可以的。
       </div>
    </div>
    <div >
</div>

</div>
</body>
</html>
z
给个赞 0 人点赞
收藏 0 人收藏
评论 已有 0 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
还没有任何评论呢,赶紧抢先来一发吧!
她让我换网名 她让我换网名 作者

年前的时候,我想变成任何一个人,除了我自己

作者最新