写了个滚动条效果,但让滚动条有渐变效果却不知道怎么写.
我是想让鼠标轮滚的时候 滚动条可以有一种渐渐的移动效果 ..
但现在我写的这个轮滚的时候不停的一直滚动了 ..
该怎么来写啊?
关键这个代码:
function ss(){
var yyy = getClass(doc,"slider_btn")[0].offsetHeight;
var ttt = getClass(doc,"slider_btn")[0].offsetTop;
var re = yyy+ttt;
if(ttt < re){
num++;
getClass(doc,"slider_btn")[0].style.top = num+"px";
timer = setTimeout(ss,30)
}else{
clearTimeout(timer);
}
}
ss();
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title> New Document </title> <style type="text/css"> *{margin:0;padding:0;} .wrap{width:320px;height:200px;overflow:hidden;position:relative;border:1px solid orange;margin:0 auto} .ul{position:absolute;top:0;left:0;list-style:none} .ul_wrap{ position:relative;width:300px;float:left; } .slider{ float:right;width:10px;height:200px;overflow:hidden;position:relative; } .slider_btn{ position:absolute;top:0;left:0;width:10px;background:orange;height:50px; }? </style> </head> <body> <div class="wrap"> <div class="slider"> <div class="slider_btn"> </div> </div> <div class="ul_wrap" id="ul_wrap"> <ul class="ul"> <li><a href="">新版个人空间介绍之个人主页</a></li> <li><a href="">新版个人空间介绍之个人主页</a></li> <li><a href="">新版个人空间介绍之个人主页</a></li> <li><a href="">新版个人空间介绍之个人主页</a></li> <li><a href="">新版个人空间介绍之个人主页</a></li> <li><a href="">新版个人空间介绍之个人主页</a></li> <li><a href="">新版个人空间介绍之个人主页</a></li> <li><a href="">新版个人空间介绍之个人主页1</a></li> <li><a href="">新版个人空间介绍之个人主页</a></li> <li><a href="">新版个人空间介绍之个人主页</a></li> <li><a href="">新版个人空间介绍之个人主页</a></li> <li><a href="">新版个人空间介绍之个人主页1</a></li> <li><a href="">新版个人空间介绍之个人主页</a></li> <li><a href="">新版个人空间介绍之个人主页</a></li> <li><a href="">新版个人空间介绍之个人主页</a></li> <li><a href="">新版个人空间介绍之个人主页1</a></li> <li><a href="">新版个人空间介绍之个人主页</a></li> <li><a href="">新版个人空间介绍之个人主页</a></li> <li><a href="">新版个人空间介绍之个人主页2</a></li> </ul> </div> </div> <script type="text/javascript"> var $ = function(id){ return typeof id === "string"?document.getElementById(id):id }; var n =0; var doc = document; function getClass(){ var elem = arguments[0].getElementsByTagName("*"); var arr = []; for(var i=0; i<elem.length; i++){ if(elem[i].className == arguments[1]){ arr.push(elem[i]); } } return arr; } function ev(e){ return e || window.event; } var h = getClass(doc,"ul")[0].offsetHeight - getClass(doc,"wrap")[0].offsetHeight ; var s = getClass(doc,"slider")[0].offsetHeight-getClass(doc,"slider_btn")[0].offsetHeight; var result = h / s; getClass(doc,"slider_btn")[0].onmousedown = function(e){ var posY = ev(e).clientY - this.offsetTop; document.onmousemove = function(e){ var y = ev(e).clientY - posY; if(y < 0 ){ getClass(doc,"slider_btn")[0].style.top = "0px"; }else if(y > getClass(doc,"slider")[0].offsetHeight-getClass(doc,"slider_btn")[0].offsetHeight){ getClass(doc,"slider_btn")[0].style.top = getClass(doc,"slider")[0].offsetHeight-getClass(doc,"slider_btn")[0].offsetHeight+"px"; }else{ n =y; getClass(doc,"slider_btn")[0].style.top = y +"px"; getClass(doc,"ul")[0].style.top = -y * result + "px"; } } } document.onmouseup = function(){ document.onmousemove = null; } function getWheel(e){ if(e.wheelDelta){ return e.wheelDelta; }else{ return -e.detail * 40; } } var timer = null; var num = 0; function aa(e){ if(getWheel(e) == -120){ if(getClass(doc,"slider_btn")[0].offsetTop >= getClass(doc,"slider")[0].offsetHeight-getClass(doc,"slider_btn")[0].offsetHeight ){ return false; } //n+=10; function ss(){ var yyy = getClass(doc,"slider_btn")[0].offsetHeight; var ttt = getClass(doc,"slider_btn")[0].offsetTop; var re = yyy+ttt; if(ttt < re){ num++; getClass(doc,"slider_btn")[0].style.top = num+"px"; timer = setTimeout(ss,30) }else{ clearTimeout(timer); } } ss(); }else{ if(getClass(doc,"slider_btn")[0].offsetTop <= 0 ){ return false; } n-=10/2; } console.log(n) //getClass(doc,"slider_btn")[0].style.top = n +"px"; getClass(doc,"ul")[0].style.top = -n * result + "px"; } if(getClass(doc,"wrap")[0].addEventListener){ getClass(doc,"wrap")[0].addEventListener("mousewheel",aa,false); }else{ getClass(doc,"wrap")[0].attachEvent("onmousewheel",aa); } </script> </body></html>