<!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
div 加滚动条 多样式
5星 · 超过95%的资源 需积分: 10 79 浏览量
2008-09-03
15:45:14
上传
评论
收藏 55KB RAR 举报
Jerrynine
- 粉丝: 3
- 资源: 5
最新资源
- (完整)数据库课程设计餐厅点餐说明书-21ab6d3c8beb172ded630b1c59eef8c75ebf952c.doc
- 2023-04-06-项目笔记 - 第一百五十四阶段 - 4.4.2.152全局变量的作用域-152 -2024.06.04
- 松哥解协议松哥解协议松哥解协议松哥解协议松哥解协议
- 618节日618节日618节日
- tensorflow-gpu-2.9.1-cp37-cp37m-win-amd64.whl
- tensorflow-gpu-2.9.0-cp37-cp37m-win-amd64.whl
- tensorflow-gpu-2.9.0-cp39-cp39-win-amd64.whl
- lcd daimalcd daima
- 电影领域-推荐算法-个性化内容-观影决策-电影推荐小程序.zip
- 电气控制PLC考试题库
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈