<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jsScrollbar</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.Scroller-Container {
position: absolute;
top: 0px; left: 0px;
}
.Scrollbar-Up {
position: absolute;
width: 10px; height: 10px;
background-color: #CCC;
font-size: 0px;
}
.Scrollbar-Track {
width: 10px; height: 160px;
position: absolute;
top: 20px;
background-color: #EEE;
}
.Scrollbar-Handle {
position: absolute;
width: 10px; height: 30px;
background-color: #CCC;
}
.Scrollbar-Down {
position: absolute;
top: 190px;
width: 10px; height: 10px;
background-color: #CCC;
font-size: 0px;
}
#Scrollbar-Container {
position: absolute;
top: 50px; left: 460px;
}
#Container {
position: absolute;
top: 50px; left: 50px;
width: 400px;
height: 200px;
background-color: #EEE;
}
#News, #About, #Extra {
position: absolute;
top: 10px;
overflow: hidden;
width: 400px;
height: 180px;
display: none;
}
#News {display: block;}
p {
margin: 0; padding: 0px 20px 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-indent: 20px;
color: #777;
}
#Navigation {
position: absolute;
top: 30px;
left: 75px;
}
#Navigation a {
margin: 5px 2px 0 0;
padding: 0 5px;
height: 20px;
background-color: #E4E4E4;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #AAA;
text-decoration: none;
display: block;
float: left;
letter-spacing: 1px;
}
#Navigation a:hover {
margin-top: 0px;
height: 25px;
}
#Navigation a.current {
margin-top: 0px;
height: 25px;
background-color: #EEE;
color: #777;
}
#Tween {
position: absolute;
top: 50px;
left: 490px;
width: 100px;
}
#Steps {
position: absolute;
top: 275px;
left: 50px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #AAA;
}
#Tween a, #Steps a {
padding: 5px 10px;
display: block;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #AAA;
text-decoration: none;
}
#Tween a:hover, #Steps a:hover {
color: #777;
}
</style>
<script type="text/javascript" src="src/jsScroller.js"></script>
<script type="text/javascript" src="src/jsScrollbar.js"></script>
<script type="text/javascript" src="src/jsScrollerTween.js"></script>
<script type="text/javascript">
var scroller = null;
var scrollbar = null;
var scrollTween = null;
var set_one = [0,1,3,6,10,15,21,28,36,45,55,64,72,79,85,90,94,97,99,100];
var set_two = [0,25,50,70,85,95,97,99,100];
var set_three = [0,10,20,30,40,50,60,70,80,90,100];
var set_four = [0,25,50,70,85,95,100,105,101,97,100,99,100];
window.onload = function () {
scroller = new jsScroller(document.getElementById("News"), 400, 180);
scrollbar = new jsScrollbar (document.getElementById("Scrollbar-Container"), scroller, true, scrollbarEvent);
scrollTween = new jsScrollerTween (scrollbar, true);
scrollbar._scrollDist = 10;
}
function swapSteps (w) {
scrollTween.steps = w;
}
function scrollbarEvent (o, type) {
if (type == "mousedown") {
if (o.className == "Scrollbar-Track") o.style.backgroundColor = "#E3E3E3";
else o.style.backgroundColor = "#BBB";
} else {
if (o.className == "Scrollbar-Track") o.style.backgroundColor = "#EEE";
else o.style.backgroundColor = "#CCC";
}
}
function swapIt(o) {
o.blur();
if (o.className == "current") return false;
var list = document.getElementById("Navigation").getElementsByTagName("a");
for (var i = 0; i < list.length; i++) {
if (list[i].className == "current") {
list[i].className = "";
document.getElementById(list[i].title).y = -scroller._y;
}
if (list[i].title == o.title) o.className = "current";
}
list = document.getElementById("Container").childNodes;
for (var i = 0; i < list.length; i++) {
if (list[i].tagName == "DIV") list[i].style.display = "none";
}
var top = document.getElementById(o.title);
top.style.display = "block";
scrollbar.swapContent(top);
if (top.y) scrollbar.scrollTo(0, top.y);
return false;
}
</script>
</head>
<body>
<div id="Navigation">
<a href="#" onclick="return swapIt(this)" title="News" class="current">news</a>
<a href="#" onclick="return swapIt(this)" title="About">about</a>
<a href="#" onclick="return swapIt(this)" title="Extra">extra</a>
</div>
<div id="Container">
<div id="News">
<div class="Scroller-Container">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum ante erat et elit.</p>
<p>Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.</p>
<p>Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc. Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris. Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit. Nunc vitae urna sed nisl mattis ornare.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum ante erat et elit.</p>
<p>Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.</p>
<p>Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc. Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris. Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit. Nunc vitae urna sed nisl mattis ornare.</p>
</div>
</div>
<div id="About">
<div class="Scroller-Container">
<p>Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc. Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt
JS自定义滚动条，可以自定义很多类型的网页滚动条
5星 · 超过95%的资源 需积分: 10 200 浏览量
2008-11-02
23:34:54
上传
评论
收藏 114KB RAR 举报 
JS滚动条.rar （37个子文件） 
JS滚动条 jsScrolling_src 
jsScrollbar.js 6KB jsScrollerTween.js 2KB jsScrollbar_packed.js 3KB jsScrollerTween_packed.js 1KB jsScroller_packed.js 1KB jsScroller.js 2KB jsScrollbar.js 6KB
example1.html 5KB
jsScrolling.zip 47KB jsScrolling example3.html 5KB example1.html 5KB images 
blog_background.jpg 17KB
scrollbar_handle.gif 163B scrollbar_track.gif 249B down_arrow.gif 193B up_arrow.gif 217B container_background.gif 5KB example4.html 9KB index.html 1KB src jsScrollbar.js 6KB jsScrollerTween.js 2KB jsScrollbar_packed.js 3KB jsScrollerTween_packed.js 1KB jsScroller_packed.js 1KB jsScroller.js 2KB main.css 2KB jsScrollbar.html 6KB example5.html 11KB jsScrollerTween.html 3KB example6.html 6KB jsScroller.html 5KB example2.html 5KB email.html 2KB jsScrolling_src.zip 7KB jsScrollerTween.js 2KB example2.html 5KB jsScroller.js 2KB资源评论
zongwenjun2011-12-13效果很好，但也有刷新自动回滚的问题啊，不过谢谢分享了
songelf2012-12-06效果很不错
LoralPei2013-11-08很好用，谢谢楼主！- liyang_baidu2012-05-04哈哈，很不错，值得分享，全面的各种滚动，就是遗憾的同楼上建议：刷新自动回滚。希望更新。
心怀梦想脚踏实地
- 粉丝: 4
- 资源: 7
最新资源
- 二叉树7-1-1.cpp
- android 9.0 原生模拟器 签名文件
- 技术面试最后反问面试官的话 校招面试非技术问题有哪些 非技术问题如何回答.png
- NB-IOT-BC26全网通模块Altium+ CADENCE +PADS三种格式(原理图SCH+PCB封装库)文件.zip
- 基于微信小程序开发的校园失物招领系统源码毕业设计（优质项目源码）.zip
- 词向量是一种将自然语言中的单词转换为数值向量的技术，它能够捕捉词义和上下文信息
- nmap与masscan的简单使用
- MyBatis动态SQL.pdf
- 基于stm32单片机protues仿真的温湿度控制系统设计（仿真图、源代码）
- 词向量：自然语言处理的基石
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
