<!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
滚动.rar （43个子文件） 
js向左滚动.html 2KB
各种上下滚动english jsScrolling_src 
jsScrollbar_packed.js 3KB jsScroller.js 2KB jsScrollbar.js 6KB jsScrollerTween.js 2KB jsScroller_packed.js 1KB jsScrollerTween_packed.js 1KB jsScrolling example3.html 5KB email.html 2KB jsScroller.html 5KB example4.html 9KB example5.html 11KB jsScrollbar.html 6KB src jsScrollbar_packed.js 3KB jsScroller.js 2KB jsScrollbar.js 6KB jsScrollerTween.js 2KB main.css 2KB jsScroller_packed.js 1KB jsScrollerTween_packed.js 1KB jsScrollerTween.html 3KB example1.html 5KB example6.html 6KB example2.html 5KB images 
up_arrow.gif 217B container_background.gif 5KB scrollbar_handle.gif 163B scrollbar_track.gif 249B down_arrow.gif 193B
blog_background.jpg 17KB index.html 1KB 图片滚动.html 2KB 三行代码搞定平滑的JS新闻单行滚动.html 1KB 单行滚动.html 2KB 猪八戒网滚动效果 jquery-1.4.2.min.js 70KB 滚动.html 2KB jquery上下左右文字滚动 img jquery-1.js 56KB edcx.css 2KB iPos1.gif 205B Marquee.js 2KB index.htm 27KB 分页点击上下滑动 page.html 2KB jquery.js 54KB资源评论
yzjgto7142012-08-07效果很多很不错- ypc85892012-08-06好多效果噢，留着学习
- johnny20462012-06-25内容很多 但不是我想要的效果 我需要的是仿iphone滑动界面效果
- bluezhou2013-08-02自己要写C的，可以参考下思想
andproblems
- 粉丝: 0
- 资源: 6
最新资源
- GXX-MLSGA40 高新兴国迈视音频一体化管理平台V4.2.0_部署手册.docx
- 智能家居专用-STM32 以太网开发板电路设计（含功能试验源码、原理图、开源带例程）
- 基于MATLAB2020b和Carsim2020的模型预测控制(MPC)与路径跟踪(PTC)结合侧偏角软约束及主动前轮转向仿真研究,基于MATLAB2020b与Carsim2020的模型预测控制(MP
- 基于SHO-CNN-SVM图像识别模型：多层次卷积池化与海马优化算法的深度应用，为口腔溃疡图像数据集带来高精度迁移性优势，支持灵活替换算法体系,基于SHO-CNN-SVM算法的图像识别模型：多元特征提
- 毕设springboot在线拍卖系统
- 基于图卷积神经网络（GCN）的数据分类预测：Matlab 2022A版本及以上的GCN模型实现代码指南,基于图卷积神经网络（GCN）的Matlab代码实现与数据分类预测应用指南（适用于Matlab 2
- 基于魔术公式的非线性七自由度车辆Simulink模型与二、三自由度车辆模型对照研究及动力学模型参考分析,基于魔术公式的非线性七自由度车辆Simulink模型与二、三自由度对照研究，包含驱动力矩、制动力
- 基于Simulink的无线充电仿真：LCC谐振器与磁耦合谐振的恒压恒流输出研究及四套模型解析,基于Simulink的无线充电仿真：探讨LCC谐振器与磁耦合谐振的恒压恒流输出及拓扑补偿技术,无线充电仿真
- 经典Banba低压带隙基准电路，SMIC 130nm工艺，输出890mv，可调整电压值，含完整版图的Bandgap电路与二级密勒补偿运放仿真结果展示,经典Banba低压带隙基准，电流模结构，工艺SMI
- 智能家居系统设计（附智能照明、自动浇花、宠物喂食器功能）【含代码、文档】
- Simulink整车控制器VCU模型：简洁易懂，经过实车验证，展现卓越处理能力与可读性-自动驾驶部分待调试屏蔽状态,Simulink整车控制器VCU模型：简单易懂，经实车验证！适当处理，注重可读性
- 50%占空比振荡器：开关电源核心元件，带修调功能，学习实践之理想选择,50%占空比振荡器：开关电源的理想选择，带修调功能，助力学习与实践,50%占空比振荡器，适用于开关电源，带修调，适合学习 ,50%
- 编队控制中的分布式线性二次离散时间博弈方法：碰撞避免策略的探索与应用,编队控制与博弈的分布式线性二次离散时间方法：碰撞避免策略研究,26.避免碰撞的编队控制分布式线性二次离散时间博弈方法 ,避免碰撞
- 智能家居管理系统设计（原理图+APP+源代码等）
- 基于Dugoff轮胎模型的车辆七自由度模型研究及魔术轮胎公式在路面附着系数估计中的应用-附参考文献与说明文档,基于Dugoff轮胎模型的车辆七自由度模型研究及魔术轮胎公式在路面附着系数估计中的应用说
- 基于博途1200 PLC与HMI的智能花式喷泉控制系统仿真工程：四模式喷水花样实现与优化,基于博途1200 PLC与HMI联合的花式喷泉控制系统仿真研究与实践教程,基于博途1200PLC+HMI花式喷
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
