首页 > 代码库 > 自定义滚动条——控制div的大小和透明度

自定义滚动条——控制div的大小和透明度

<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; min-height: 36.0px } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #d74200 } p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #289c97 } p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #4a8a01 } p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #060606 } p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #929151; min-height: 36.0px } p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #4f5d66 } p.p9 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #a5b2b9 } p.p10 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #e48b00 } p.p11 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #698906 } span.s1 { color: #4f5d66 } span.s2 { color: #2b7ec3 } span.s3 { color: #48565d } span.s4 { color: #289c97 } span.s5 { color: #d74200 } span.s6 { color: #000000 } span.s7 { color: #060606 } span.s8 { color: #929151 } span.s9 { color: #ad42ef } span.s10 { color: #698906 } span.s11 { color: #4a8a01 } span.s12 { color: #d16400 } span.s13 { color: #4663cc } span.s14 { color: #b58a00 } span.Apple-tab-span { white-space: pre }</style>

<!DOCTYPE html>

<html>

 

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

#big {

height: 20px;

width: 600px;

background-color: gray;

position: relative;

margin: 100px auto;

}

 

#small {

height: 20px;

width: 20px;

background-color: red;

position: absolute;

left: 0;

top: 0;

}

 

#side {

width: 0px;

height: 0px;

background-color: green;

}

</style>

</head>

 

<body>

<div id="big">

<div id="small">

 

</div>

</div>

<div id="side">

 

</div>

</body>

<script type="text/javascript">

//实现通过滚动条来控制另一个div的宽高和透明度

//滚动条只能左右滚动

var big = document.getElementById("big");

var small = document.getElementById("small");

var side = document.getElementById("side");

var x = 0;

var y = 0;

small.onmousedown = function(ev) {

var oEvent = ev || event;

x = oEvent.clientX - small.offsetLeft;

document.onmousemove = function(ev) {

var oEvent = ev || event;

var Left = oEvent.clientX - x;

if(Left < 0) {

Left = 0;

} else if(Left > big.offsetWidth - small.offsetWidth) {

Left = big.offsetWidth - small.offsetWidth;

}

small.style.left = Left + "px";

//自定义一个变量scale

//表示滚动条滚动的距离和滚动条可以滚动的最大距离的的比

var scale = Left / (big.offsetWidth - small.offsetWidth);

document.title = scale;

//通过滑块控制side的大小

side.style.width = 400 * scale + "px";

side.style.height = 400 * scale + "px";

//通过滑块控制side的颜色的透明度

side.style.opacity = scale;

side.style.filter = "alpha(opacity:" + scale * 100 + ")";

 

}

document.onmouseup = function() {

document.onmousemove = null;

document.onmouseup = null;

}

return false;

 

}

</script>

 

</html>

自定义滚动条——控制div的大小和透明度