写了个滚动条效果,但让滚动条有渐变效果却不知道如何写
日期：2014-05-16 浏览次数：20346 次
写了个滚动条效果,但让滚动条有渐变效果却不知道怎么写.
我是想让鼠标轮滚的时候 滚动条可以有一种渐渐的移动效果 ..
但现在我写的这个轮滚的时候不停的一直滚动了 ..
该怎么来写啊?
关键这个代码:
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();
我是想让鼠标轮滚的时候 滚动条可以有一种渐渐的移动效果 ..
但现在我写的这个轮滚的时候不停的一直滚动了 ..
该怎么来写啊?
关键这个代码:
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){
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
