[html]代码库
<!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=utf-8" />
<style type="text/css">
/*<![CDATA[*/
.Container {
position: absolute;
top: 50px;
left: 100px;
width: 700px;
height: 300px;
background: #FFF url(images/container_background.gif) no-repeat;
}
#Scroller-1 {
position: absolute;
overflow: hidden;
width: 700px;
height: 300px;
border: 1px solid #999;
}
#Scroller-1 p {
margin: 0;
padding: 10px 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-indent: 20px;
color: #6F6048;
}
.Scroller-Container {
position: absolute;
top: 0px;
left: 0px;
}
#Scrollbar-Container {
position: absolute;
top: 40px;
left: 60px;
}
.Scrollbar-Up {
cursor: pointer;
position: absolute;
}
.Scrollbar-Track {
width: 20px;
height: 250px;
position: absolute;
top: 30px;
left: 4px;
background: transparent url(images/scrollbar_track.gif) no-repeat center center;
}
.Scrollbar-Handle {
position: absolute;
width: 20px;
height: 22px;
}
.Scrollbar-Down {
cursor: pointer;
position: absolute;
top: 290px;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
//Written by Nathan Faubion: http://n-son.com
//Use this or edit how you want, just give me
//some credit!
function jsScroller (o, w, h) {
var self = this;
var list = o.getElementsByTagName("div");
for (var i = 0; i < list.length; i++) {
if (list[i].className.indexOf("Scroller-Container") > -1) {
o = list[i];
}
}
//Private methods
this._setPos = function (x, y) {
if (x < this.viewableWidth - this.totalWidth)
x = this.viewableWidth - this.totalWidth;
if (x > 0) x = 0;
if (y < this.viewableHeight - this.totalHeight)
y = this.viewableHeight - this.totalHeight;
if (y > 0) y = 0;
this._x = x;
this._y = y;
with (o.style) {
left = this._x +"px";
top = this._y +"px";
}
};
//Public Methods
this.reset = function () {
this.content = o;
this.totalHeight = o.offsetHeight;
this.totalWidth = o.offsetWidth;
this._x = 0;
this._y = 0;
with (o.style) {
left = "0px";
top = "0px";
}
};
this.scrollBy = function (x, y) {
this._setPos(this._x + x, this._y + y);
};
this.scrollTo = function (x, y) {
this._setPos(-x, -y);
};
this.stopScroll = function () {
if (this.scrollTimer) window.clearInterval(this.scrollTimer);
};
this.startScroll = function (x, y) {
this.stopScroll();
this.scrollTimer = window.setInterval(
function(){ self.scrollBy(x, y); }, 40
);
};
this.swapContent = function (c, w, h) {
o = c;
var list = o.getElementsByTagName("div");
for (var i = 0; i < list.length; i++) {
if (list[i].className.indexOf("Scroller-Container") > -1) {
o = list[i];
}
}
if (w) this.viewableWidth = w;
if (h) this.viewableHeight = h;
this.reset();
};
//variables
this.content = o;
this.viewableWidth = w;
this.viewableHeight = h;
this.totalWidth = o.offsetWidth;
this.totalHeight = o.offsetHeight;
this.scrollTimer = null;
this.reset();
};
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
//Written by Nathan Faubion: http://n-son.com
//Use this or edit how you want, just give me
//some credit!
function jsScrollbar (o, s, a, ev) {
var self = this;
this.reset = function () {
//Arguments that were passed
this._parent = o;
this._src = s;
this.auto = a ? a : false;
this.eventHandler = ev ? ev : function () {};
//Component Objects
this._up = this._findComponent("Scrollbar-Up", this._parent);
this._down = this._findComponent("Scrollbar-Down", this._parent);
this._yTrack = this._findComponent("Scrollbar-Track", this._parent);
this._yHandle = this._findComponent("Scrollbar-Handle", this._yTrack);
//Height and position properties
this._trackTop = findOffsetTop(this._yTrack);
this._trackHeight = this._yTrack.offsetHeight;
this._handleHeight = this._yHandle.offsetHeight;
this._x = 0;
this._y = 0;
//Misc. variables
this._scrollDist = 5;
this._scrollTimer = null;
this._selectFunc = null;
this._grabPoint = null;
this._tempTarget = null;
this._tempDistX = 0;
this._tempDistY = 0;
this._disabled = false;
this._ratio = (this._src.totalHeight - this._src.viewableHeight)/(this._trackHeight - this._handleHeight);
this._yHandle.ondragstart = function () {return false;};
this._yHandle.onmousedown = function () {return false;};
this._addEvent(this._src.content, "mousewheel", this._scrollbarWheel);
this._removeEvent(this._parent, "mousedown", this._scrollbarClick);
this._addEvent(this._parent, "mousedown", this._scrollbarClick);
this._src.reset();
with (this._yHandle.style) {
top = "0px";
left = "0px";
}
this._moveContent();
if (this._src.totalHeight < this._src.viewableHeight) {
this._disabled = true;
this._yHandle.style.visibility = "hidden";
if (this.auto) this._parent.style.visibility = "hidden";
} else {
this._disabled = false;
this._yHandle.style.visibility = "visible";
this._parent.style.visibility = "visible";
}
};
this._addEvent = function (o, t, f) {
if (o.addEventListener) o.addEventListener(t, f, false);
else if (o.attachEvent) o.attachEvent('on'+ t, f);
else o['on'+ t] = f;
};
this._removeEvent = function (o, t, f) {
if (o.removeEventListener) o.removeEventListener(t, f, false);
else if (o.detachEvent) o.detachEvent('on'+ t, f);
else o['on'+ t] = null;
};
this._findComponent = function (c, o) {
var kids = o.childNodes;
for (var i = 0; i < kids.length; i++) {
if (kids[i].className && kids[i].className == c) {
return kids[i];
}
}
};
//Thank you, Quirksmode
function findOffsetTop (o) {
var t = 0;
if (o.offsetParent) {
while (o.offsetParent) {
t += o.offsetTop;
o = o.offsetParent;
}
}
return t;
};
this._scrollbarClick = function (e) {
if (self._disabled) return false;
e = e ? e : event;
if (!e.target) e.target = e.srcElement;
if (e.target.className.indexOf("Scrollbar-Up") > -1) self._scrollUp(e);
else if (e.target.className.indexOf("Scrollbar-Down") > -1) self._scrollDown(e);
else if (e.target.className.indexOf("Scrollbar-Track") > -1) self._scrollTrack(e);
else if (e.target.className.indexOf("Scrollbar-Handle") > -1) self._scrollHandle(e);
self._tempTarget = e.target;
self._selectFunc = document.onselectstart;
document.onselectstart = function () {return false;};
self.eventHandler(e.target, "mousedown");
self._addEvent(document, "mouseup", self._stopScroll, false);
return false;
};
this._scrollbarDrag = function (e) {
e = e ? e : event;
var t = parseInt(self._yHandle.style.top);
var v = e.clientY + document.body.scrollTop - self._trackTop;
with (self._yHandle.style) {
if (v >= self._trackHeight - self._handleHeight + self._grabPoint)
top = self._trackHeight - self._handleHeight +"px";
else if (v <= self._grabPoint) top = "0px";
else top = v - self._grabPoint +"px";
self._y = parseInt(top);
}
self._moveContent();
};
this._scrollbarWheel = function (e) {
e = e ? e : event;
var dir = 0;
if (e.wheelDelta >= 120) dir = -1;
if (e.wheelDelta <= -120) dir = 1;
self.scrollBy(0, dir * 20);
e.returnValue = false;
};
this._startScroll = function (x, y) {
this._tempDistX = x;
this._tempDistY = y;
this._scrollTimer = window.setInterval(function () {
self.scrollBy(self._tempDistX, self._tempDistY);
}, 40);
};
this._stopScroll = function () {
self._removeEvent(document, "mousemove", self._scrollbarDrag, false);
self._removeEvent(document, "mouseup", self._stopScroll, false);
if (self._selectFunc) document.onselectstart = self._selectFunc;
else document.onselectstart = function () { return true; };
if (self._scrollTimer) window.clearInterval(self._scrollTimer);
self.eventHandler (self._tempTarget, "mouseup");
};
this._scrollUp = function (e) {this._startScroll(0, -this._scrollDist);};
this._scrollDown = function (e) {this._startScroll(0, this._scrollDist);};
this._scrollTrack = function (e) {
var curY = e.clientY + document.body.scrollTop;
this._scroll(0, curY - this._trackTop - this._handleHeight/2);
};
this._scrollHandle = function (e) {
var curY = e.clientY + document.body.scrollTop;
this._grabPoint = curY - findOffsetTop(this._yHandle);
this._addEvent(document, "mousemove", this._scrollbarDrag, false);
};
this._scroll = function (x, y) {
if (y > this._trackHeight - this._handleHeight)
y = this._trackHeight - this._handleHeight;
if (y < 0) y = 0;
this._yHandle.style.top = y +"px";
this._y = y;
this._moveContent();
};
this._moveContent = function () {
this._src.scrollTo(0, Math.round(this._y * this._ratio));
};
this.scrollBy = function (x, y) {
this._scroll(0, (-this._src._y + y)/this._ratio);
};
this.scrollTo = function (x, y) {
this._scroll(0, y/this._ratio);
};
this.swapContent = function (o, w, h) {
this._removeEvent(this._src.content, "mousewheel", this._scrollbarWheel, false);
this._src.swapContent(o, w, h);
this.reset();
};
this.reset();
};
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var scroller = null;
var scrollbar = null;
window.onload = function () {
scroller = new jsScroller(document.getElementById("Scroller-1"), 400, 200);
scrollbar = new jsScrollbar (document.getElementById("Scrollbar-Container"), scroller, false);
}
//]]>
</script>
</head>
<body>
<div id="Scrollbar-Container"> <img src="images/up_arrow.gif" class="Scrollbar-Up" /> <img src="images/down_arrow.gif" class="Scrollbar-Down" />
<div class="Scrollbar-Track"><img src="images/scrollbar_handle.gif" class="Scrollbar-Handle" /></div>
</div>
<div class="Container">
<div id="Scroller-1">
<div class="Scroller-Container">
<h1>神舟十号飞船发射取得圆满成功</h1>
<p>中新网6月11日电 据央视报道，载人航天工程总指挥张又侠宣布：神舟十号飞船已顺利进入预定轨道，飞行乘组状态良好，发射取得圆满成功。</p>
<p>北京时间6月11日17时38分许，中国长征二号F运载火箭在酒泉卫星发射中心载人航天发射场点火起飞，将神舟十号载人飞船发射升空。中国航天员聂海胜、张晓光、王亚平搭乘神舟十号飞船出征太空。</p>
<p>与以往神舟飞船相比，神舟十号是中国载人天地往返运输系统的首次应用性飞行。飞船入轨后，将按照预定程序，先后与天宫一号(微博)进行一次自动交会对接和一次航天员手控交会对接。组合体飞行期间，航天员进驻天宫一号，并开展航天医学实验、技术试验及太空授课活动。完成组合体飞行后，飞船撤离并返回着陆场，天宫一号转至长期运行轨道。</p>
<p>目前，天宫一号运行在预定的交会对接轨道上，状态稳定，设备工作正常，推进剂等消耗性资源充足，满足交会对接任务要求和航天员进驻条件。</p>
<h2>神舟十号发射直播文字实录</h2>
<p style="TEXT-INDENT: 2em">[央视网]：神舟十号飞船定于今天下午17时38分发射。届时本网将进行全程直播，敬请期待！[14：13]</p>
<p style="TEXT-INDENT: 2em">[央视网]：执行神舟十号飞行任务的3名航天员聂海胜、张晓光、王亚平开始进舱。[15：54]</p>
<p style="TEXT-INDENT: 2em">[央视网]：发射场目前气温33度左右。[16：28]</p>
<p style="TEXT-INDENT: 2em">[央视网]：神舟十号载人飞行任务是我国组织实施的第五次载人航天飞行，是神舟飞船和长征二F运载火箭组成的载人天地往返运输系统的首次应用性飞行。[16：28]</p>
<p style="TEXT-INDENT: 2em">[央视网]：根据计划，神舟十号飞船在轨飞行期间，将与天宫一号<!--keyword-->(<span class="infoMblog"><a class="a-tips-Article-QQ" href="http://t.qq.com/TiangongI#pref=qqcom.keyword" rel="TiangongI" reltitle="天宫一号" target="_blank">微博</a></span>)<!--/keyword-->目标飞行器进行两次交会对接。[16：28]</p>
<p style="TEXT-INDENT: 2em">[央视网]：曾成功与神舟八号、九号飞船进行4次交会对接的天宫一号目标飞行器，目前已进入343千米的近圆对接轨道，在轨运行稳定，设备状态良好，静候神舟十号的到来。[16：29]</p>
<p style="TEXT-INDENT: 2em">[央视网]：载人航天发射场目前能见度良好，风速大约每秒5米，气象条件完全满足发射需要。[16：31]</p>
<p style="TEXT-INDENT: 2em">[央视网]：酒泉卫星发射中心16时31分天气实况：温度34℃，风速4.3米/秒，能见度30千米，云量7成。[16：31]</p>
<p style="TEXT-INDENT: 2em">[央视网]：北京和酒泉两个中心分别下达1小时准备口令。[16：37]</p>
<p style="TEXT-INDENT: 2em">[北京飞控中心]：航天员医监医生分别与三名航天员通话，询问航天员身体状况，三名航天员分别报告"身体感觉良好"。[16：44]</p>
<p style="TEXT-INDENT: 2em">[央视网]：发射塔架最高的一层回转平台打开，火箭顶端逃逸塔的尖部露了出来，分布在全国各地的各测控站点分别报告准备情况，大洋上的远望号测量船也向北京报告准备情况正常。[16：57]</p>
<p style="TEXT-INDENT: 2em">[酒泉卫星发射中心]：发射塔架的最下面一组回转平台缓缓打开，火箭助推器清晰可见。[17：04]</p>
<p style="TEXT-INDENT: 2em">[酒泉卫星发射中心]：高大的发射塔架耸立在空旷的大漠戈壁上，随着一组组回转平台的陆续打开，乳白色的运载火箭一点点呈现，这枚火箭与发射神舟九号的火箭状态基本一致，在可靠性和安全性上进行了部分改进。长征2F运载火箭经过多次载人航天飞行发射的考验，日趋成熟。[17：04]</p>
<p style="TEXT-INDENT: 2em">[北京飞控中心]：30分钟准备的口令下达。[17：07]</p>
<p style="TEXT-INDENT: 2em">[酒泉卫星发射中心]：发射塔架的回转平台全部打开，火箭箭体上鲜艳的五星红旗和"中国航天"4个大字格外醒目。[17：11]</p>
<p style="TEXT-INDENT: 2em">[北京飞控中心]：3名航天员静静地坐在返回舱内，各持一本手册，对照手册按步骤进行发射前的各项检查和状态确认。[17：19]</p>
<p style="TEXT-INDENT: 2em">[酒泉卫星发射中心]：发射场微风拂面，风速比一小时前更小了。[17：20]</p>
<p style="TEXT-INDENT: 2em">[北京飞控中心]：15分钟准备。[17：21]</p>
<p style="TEXT-INDENT: 2em">[酒泉卫星发射中心]：发射区人员撤离发射塔架。[17：22]</p>
<p style="TEXT-INDENT: 2em">[聂海胜]：航天员15分钟准备完毕。[17：24]</p>
<p style="TEXT-INDENT: 2em">[北京飞控中心]：点火时设定为17时37分59秒。[17：24]</p>
<p style="TEXT-INDENT: 2em">[北京飞控中心]：点火时设定后，将装订到火箭的控制程序中，火箭将按设定时间自动 点火，以保证点火时间精确到秒。而这样做的目的，是为了提高飞船的入轨精度，节省飞船调整轨道的燃料。[17：27]</p>
<p style="TEXT-INDENT: 2em">[酒泉卫星发射中心]：5分钟准备。[17：32]</p>
<p style="TEXT-INDENT: 2em">[酒泉卫星发射中心]：3分钟准备。[17：34]</p>
<p style="TEXT-INDENT: 2em">[酒泉卫星发射中心]：1分钟准备。[17：36]</p>
<p style="TEXT-INDENT: 2em">[酒泉卫星发射中心]：点火。[17：36]</p>
<p style="TEXT-INDENT: 2em">[酒泉卫星发射中心]：起飞。[17：37]</p>
<p style="TEXT-INDENT: 2em">[酒泉卫星发射中心]：长征二号F火箭搭载神舟十号飞船，从酒泉卫星发射中心起飞升空。[17：39]</p>
<p style="TEXT-INDENT: 2em">[酒泉卫星发射中心]："光学、雷达跟踪正常，遥测信号正常。"[17：39]</p>
<p style="TEXT-INDENT: 2em">[酒泉卫星发射中心]：抛逃逸塔。这是火箭起飞后的第一个分离动作。[17：40]</p>
<p style="TEXT-INDENT: 2em">[酒泉卫星发射中心]：助推器分离。四个助推器完成使命。[17：40]</p>
<p style="TEXT-INDENT: 2em">[酒泉卫星发射中心]：一二级分离成功。[17：40]</p>
<p style="TEXT-INDENT: 2em">[酒泉卫星发射中心]：火箭已经到达大气层边缘。[17：40]</p>
<p style="TEXT-INDENT: 2em">[酒泉卫星发射中心]：整流罩分离，这意味着船箭组合体已经飞出大气层，不再需要整流罩的保护。[17：41]</p>
<p style="TEXT-INDENT: 2em">[酒泉卫星发射中心]：从飞船返回舱传回的画面可以看到，舷窗的强光照进返回舱内，三名航天员神情自若。[17：41]</p>
<p style="TEXT-INDENT: 2em">[酒泉卫星发射中心]：飞船从酒泉卫星发射中心起飞，沿着一条优美的曲线从甘肃、陕西、山西、河北、山东等地上空飞过，越飞越高，越飞越远。[17：45]</p>
<p style="TEXT-INDENT: 2em">[酒泉卫星发射中心]：二级火箭主机关机。[17：45]</p>
<p style="TEXT-INDENT: 2em">[酒泉卫星发射中心]：船箭分离。[17：46]</p>
<p style="TEXT-INDENT: 2em">[北京飞控中心]：三名航天员感受到失重的这一刻面向摄像头向地面挥手致意。[17：48]</p>
<p style="TEXT-INDENT: 2em">[酒泉卫星发射中心]：茫茫太空再次迎来中国访客。[17：48]</p>
<p style="TEXT-INDENT: 2em">[酒泉卫星发射中心]：太阳帆板成功展开。[17：49]</p>
<p style="TEXT-INDENT: 2em">[酒泉卫星发射中心]：通过神舟十号飞船推进舱外的摄像机传回的画面，可以看到地球的弧线。目前飞船已经到达距地球199公里左右的高度。[17：50]</p>
<p style="TEXT-INDENT: 2em">[酒泉卫星发射中心]：中继天线成功展开。[17：50]</p>
<p style="TEXT-INDENT: 2em">[酒泉卫星发射中心]："神舟十号我是北京"，"神舟十号到"，"通报座舱大气环境"，"飞船大气环境正常"。[17：51]</p>
<p style="TEXT-INDENT: 2em">[北京飞控中心]：北京航天飞控中心向各参测单位通报：根据北京实时轨道监视判断，神舟十号已进入近地点200公里，远地点329.8公里的预定轨道，太阳帆板展开，飞船工况正常，航天员感觉良好。[17：54]</p>
<p style="TEXT-INDENT: 2em">[酒泉卫星发射中心]：中央军委委员，任务总指挥长，总装备部张又侠部长宣布发射结果。[17：55]</p>
<p style="TEXT-INDENT: 2em">[张又侠]：尊敬的习主席，同志们，根据北京飞控中心报告，神舟十号飞船已顺利进入预定轨道，飞行乘组状态良好，现在我宣布，神舟十号飞船发射取得圆满成功。[17：57]</p>
<p style="TEXT-INDENT: 2em">[央视网]：酒泉卫星发射中心和北京飞控中心响起热烈的掌声。[17：58]</p>
<p style="TEXT-INDENT: 2em">[央视网]：神舟十号飞船发射的现场直播到此结束，感谢您的关注。更多精彩内容，敬请期待。[1 8：03]</p>
</div>
</div>
</div>
</body>
</html>
[代码运行效果截图]
会python真的可以为所欲为0(回)
222天前
这里还有人吗1(回)
407天前
每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。0(回)
632天前
鸽子
0(回)
716天前
