event 事件 自定义滚动条 控制文字大小 透明度 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#parent{
				width: 600px;
				height: 20px;
				background: red;
				position: relative;
				margin: 10px auto;
			}
			#div1{
				position: absolute;
				left: 0;
				top: 0;
				width: 20px;
				height: 20px;
				background: green;
			}
			#div2{
				width: 0;
				height: 0;
				background: blue;
			}
			#div3{
				width: 400px;
				height: 400px;
				opacity: 0;
				filter: alpha(opacity=0);
				background: gray;
			}
		</style>
		<script>
		window.onload = function(){
			var oDiv = document.getElementById("div1");
			var oParent  = document.getElementById("parent");
			var oDiv2 = document.getElementById("div2");
			var oDiv3 = document.getElementById("div3");
			var disx = 0;
			
			document.onmousedown = function(ev){
				var oEvent = ev || event;
				disx = oEvent.clientX - oDiv.offsetLeft;
				
				
				document.onmousemove  = function(ev){
					var oEvent = ev || event;
					
					var l = oEvent.clientX - disx;
					
					if(l<0)
					{
						l=0;
					}else if(l> oParent.offsetWidth - oDiv.offsetWidth)
					{
						l = oParent.offsetWidth - oDiv.offsetWidth;
					}
					
					oDiv.style.left = l +"px";
					
					//存比例
					var scale = l /(oParent.offsetWidth - oDiv.offsetWidth);
//					document.title = l /580;
					//改大小
					oDiv2.style.width = 400 * scale +"px";
					oDiv2.style.height = 400 * scale + "px";
					//改透明度
					oDiv3.style.filter = 'alpha(opacity:'+scale+')';
					oDiv3.style.opacity = scale;
				}
			}
			document.onmouseup = function(){
				document.onmousemove = null;
				
			}
			
		}
			
		</script>
	</head>
	<body>
		<div id="parent">
			<div id="div1"></div>
		</div>
		
		<div id="div2"></div>
		<div id="div3"></div>
	</body>
</html>

　　

posted @ 2016-03-13 11:37  mingjixiaohui  阅读(249)  评论(0)    收藏  举报