写了个滚动条效果,但让滚动条有渐变效果却不知道如何写-JavaSript-爱易网页

写了个滚动条效果,但让滚动条有渐变效果却不知道如何写

日期：2014-05-16　浏览次数：20318 次

写了个滚动条效果,但让滚动条有渐变效果却不知道怎么写.
我是想让鼠标轮滚的时候滚动条可以有一种渐渐的移动效果 ..
但现在我写的这个轮滚的时候不停的一直滚动了 ..
该怎么来写啊?
关键这个代码:
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();

HTML code


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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

写了个滚动条效果,但让滚动条有渐变效果却不知道如何写

相关资料更多>

推荐阅读更多>