您的位置：首页 > Web前端 > JavaScript

js 自定义滑块 实现文字滚动＋透明度变化

2016-01-27 22:44 976 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js文字滚动+透明度</title>
<style>
#parent {
margin: 0 auto;
width: 600px;
height: 20px;
background: #ccc;
position: relative;
}

#div1 {
width: 20px;
height: 20px;
background: red;
position: absolute;
}
#div2{
width: 300px;
height:400px;
margin: 0 auto;
border:1px solid;
border-left-color: #000;
margin-top: 20px;
overflow: hidden;
/*padding: 30px;*/
position: relative;
}
#div3{
position: absolute;
padding: 10px;
/*top:-40px;*/
}
#div4{
width:200px;
height:300px;
background-color: #8a7dbe;
position: absolute;
top: 100px;

}
</style>
</head>
<body>
<div id="parent">
<div id="div1">
</div>
</div>
<div id="div2">
<div id="div3">
心念如花，静静开放<br />

文/荷塘月色 QQ/384427844
心念如花，静静开放<br />

文/荷塘月色 QQ/384427844  心念如花，静静开放<br />

文/荷塘月色 QQ/384427844
心念如花，静静开放<br />

文/荷塘月色 QQ/384427844  心念如花，静静开放
文/荷塘月色 QQ/384427844
心念如花，静静开放<br />

文/荷塘月色 QQ/384427844  心念如花，静静开放
文/荷塘月色 QQ/384427844
心念如花，静静开放<br />

文/荷塘月色 QQ/384427844  心念如花，静静开放
文/荷塘月色 QQ/384427844
心念如花，静静开放<br />

文/荷塘月色 QQ/384427844  心念如花，静静开放
文/荷塘月色 QQ/384427844
心念如花，静静开放<br />

文/荷塘月色 QQ/384427844  心念如花，静静开放
文/荷塘月色 QQ/384427844
心念如花，静静开放<br />

文/荷塘月色 QQ/384427844  心念如花，静静开放
文/荷塘月色 QQ/384427844
心念如花，静静开放<br />

文/荷塘月色 QQ/384427844  心念如花，静静开放
文/荷塘月色 QQ/384427844
心念如花，静静开放<br />

文/荷塘月色 QQ/384427844  心念如花，静静开放
文/荷塘月色 QQ/384427844
心念如花，静静开放<br />

文/荷塘月色 QQ/384427844  心念如花，静静开放
文/荷塘月色 QQ/384427844
心念如花，静静开放<br />

文/荷塘月色 QQ/384427844  心念如花，静静开放
文/荷塘月色 QQ/384427844
心念如花，静静开放<br />

文/荷塘月色 QQ/384427844  心念如花，静静开放
文/荷塘月色 QQ/384427844
心念如花，静静开放<br />

文/荷塘月色 QQ/384427844  心念如花，静静开放
文/荷塘月色 QQ/384427844
心念如花，静静开放<br />

文/荷塘月色 QQ/384427844  心念如花，静静开放
文/荷塘月色 QQ/384427844
心念如花，静静开放<br />

文/荷塘月色 QQ/384427844  心念如花，静静开放
文/荷塘月色 QQ/384427844
心念如花，静静开放<br />

文/荷塘月色 QQ/384427844  心念如花，静静开放
文/荷塘月色 QQ/384427844
心念如花，静静开放<br />

文/荷塘月色 QQ/384427844  心念如花，静静开放
文/荷塘月色 QQ/384427844
心念如花，静静开放<br />

文/荷塘月色 QQ/384427844  心念如花，静静开放
文/荷塘月色 QQ/384427844
心念如花，静静开放<br />

文/荷塘月色 QQ/384427844  心念如花，静静开放
文/荷塘月色 QQ/384427844
心念如花，静静开放<br />

文/荷塘月色 QQ/384427844  心念如花，静静开放
文/荷塘月色 QQ/384427844
心念如花，静静开放<br />

文/荷塘月色 QQ/384427844  心念如花，静静开放

</div>
</div>
<div id="div4">

</div>
</body>
<script>
window.onload=function(){
var oDiv1=document.getElementById('div1');     //滑块
var oDiv2=document.getElementById('div2');    //滚动可见部分
var oDiv=document.getElementById('parent');   //滚动条外框
var oDiv3=document.getElementById('div3');    //滚动文字部分
var oDiv4=document.getElementById('div4');  //透明度变化部分
var disX=0;     //横向距离(点击区域和滑块)
oDiv1.onmousedown=function(ev){
var oEvent=ev||event;
disX=oEvent.clientX-oDiv1.offsetLeft;
document.onmousemove=function(ev){
var oEvent=ev||event;
var x=oEvent.clientX-disX;
if(x<0){
x=0;
}
else if(x>oDiv.offsetWidth-oDiv1.offsetWidth){   //X>外框和滑块的宽度差
x=oDiv.offsetWidth-oDiv1.offsetWidth;
}
oDiv1.style.left=x+'px';
var scale=x/(oDiv1.offsetWidth-oDiv.offsetWidth);    //移动距离度百分比
oDiv3.style.top=-scale*(oDiv2.offsetHeight-oDiv3.offsetHeight)+'px';//可见区域高度-文字部分实际高度
//                alert(scale);
oDiv4.style.opacity=(1+scale);
oDiv4.style.filter="alpha(opacity:"+(1+scale)*100+")";
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;

}
}
};
return false;
}
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航