滚动条的模拟

最新推荐文章于 2021-06-05 04:02:28 发布

weixin_30646315

最新推荐文章于 2021-06-05 04:02:28 发布

阅读量65

点赞数

原文链接：http://www.cnblogs.com/gxywb/p/10058981.html

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div1{
				width: 30px;
				height: 500px;
				background: black;
				position: absolute;
				left: 10px;
				top: 10px;
			}
			#div2{
				width: 30px;
				height: 30px;
				background: red;
				position: absolute;
				left: 0;
				top: 0;
			}
			#div3{
				width: 500px;
				height: 0;
				background: green;
				position: absolute;
				left: 50px;
				top: 10px;
			}
		</style>
		<script>
			window.οnlοad=function(){
				var oDiv1=document.getElementById("div1");
				var oDiv2=document.getElementById("div2");
				var oDiv3=document.getElementById("div3");
				var iMaxTop=oDiv1.offsetHeight-oDiv2.offsetHeight;
				oDiv2.οnmοusedοwn=function(ev){
					var ev=ev||event;
					var disY=ev.clientY-this.offsetTop;
				document.οnmοusemοve=function(ev){
					var ev=ev||event;
					var T=ev.clientY-disY;
					if(T<0){
						T=0;
					}else if(T>iMaxTop){
						T=iMaxTop;
					}
					oDiv2.style.top=T+"px";
					var iScale=T/iMaxTop;
//					document.title=iScale;
					oDiv3.style.height=500*iScale+"px";
				}
				document.οnmοuseup=function(){
					document.οnmοusemοve=document.οnmοuseup=null;
				}
				return false;
				}
			}
		</script>
	</head>
	<body>
		<div id="div1">
			<div id="div2"></div>
		</div>
		<div id="div3"></div>
	</body>
</html>

转载于:https://www.cnblogs.com/gxywb/p/10058981.html