CSS3 教程
CSS3 教程
CSS3 简介
CSS3 边框
CSS3 圆角
CSS3 背景
CSS3 渐变
CSS3 文本效果
CSS3 字体
CSS3 2D 转换
CSS3 3D 转换
CSS3 过渡
CSS3 动画
CSS3 多列
CSS3 用户界面
CSS3 图片
CSS3 按钮
CSS3 分页
CSS3 框大小
CSS3 弹性盒子
CSS3 多媒体查询
CSS3 多媒体查询实例
通过容器溢出隐藏，文本区域的绝对定位，然后再交给js处理。
*{padding: 0; margin: 0;}
#div{top:200px;left:25%;width: 50%;height: 300px; position: absolute;
}
#div1{width: 20px; height: 300px; position: relative;
background: #CCCCCC; border-radius: 28px; float: right; cursor: pointer;}
#div1 #div2{left: -4px;width: 28px;height: 28px;border-radius: 50%; background: red;
position: absolute;}
#div3{width: 90%; height: 300px; border: 2px solid #CCCCCC;
position: relative; float: left; overflow: hidden;}
#div3 #div4{top:0;left:0;width: 100%; position: absolute; font-family: "微软雅黑";
font-size: 19px; letter-spacing: 1px; padding: 3px 6px;}window.onload =function(){
var allDiv =document.getElementById('div');
var oDiv =document.getElementById('div2');
var aDiv =document.getElementById('div1');
var textDiv1 =document.getElementById('div3');
var textDiv2 =document.getElementById('div4');
// 进度条拖动，内容跟着运动事件
oDiv.onmousedown =function(ev){
var oEvent =ev||event;
var disY =oEvent.clientY -oDiv.offsetTop;
if(oDiv.setCapture){
oDiv.onmousemove =mouseMove;
oDiv.onmouseup =mouseUp;
oDiv.setCapture();
}else{
document.onmousemove =mouseMove;
document.onmouseup =mouseUp;
}
function mouseMove(ev){
var oEvent =ev||event;
var t =oEvent.clientY -disY;
var bottomLine = aDiv.offsetHeight-oDiv.offsetHeight;
if(t <0){
t =0;
}else if(t >bottomLine){
t =bottomLine;
}
var percent =t/272;
oDiv.style.top =t+'px';
textDiv2.style.top =-(textDiv2.offsetHeight-textDiv1.offsetHeight)*percent+'px';
};
function mouseUp(){
this.onmousemove =null;
this.onmouseup =null;
if(oDiv.releaseCapture){
oDiv.releaseCapture();
}
};
return false;
};
// 点击进度条，开启定时器，小球做匀速运动到达后，清楚定时器
aDiv.onmousedown=function(ev){
var oEvent =ev||event;
var divY =oEvent.clientY-allDiv.offsetTop;
var timer =null;var speed=10;
clearInterval(timer)
timer = setInterval(function(){
var percent=oDiv.offsetTop/272;
if(oDiv.offsetTopdivY){
oDiv.style.top =oDiv.offsetTop - speed +'px';
textDiv2.style.top =-(textDiv2.offsetHeight-textDiv1.offsetHeight)*percent +'px';
}else if(oDiv.offsetTop>260){
oDiv.offsetTop = 272+'px';
clearInterval(timer);
}else if(oDiv.offsetTop<10){
oDiv.offsetTop = 0+'px';
clearInterval(timer);
}else{
clearInterval(timer);
}
},10);
}
} 上述内容就是利用原生JavaScript编写一个滚动条功能，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。
