您的位置：首页 > 其它

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

2016-03-13 11:37 501 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

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

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