您的位置：首页 > Web前端 > JavaScript

JS上下无缝滚动

2011-04-27 16:34 218 查看

html代码

<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>scrollTop测试示例</title>

<style>
<!--
#out {
width:200px;
height:80px;
border:solid 1px blue;
overflow:hidden;
}
#in ul {
width: 100%;
}
#in ul li {
width: 60%;
float: left;
overflow: hidden;
list-style: none;
}
-->
</style>
</head>
<body>
<div id="out">
<div id="in">
<ul>
<li>第1行</li>
<li>第2行</li>
<li>第3行</li>
<li>第4行</li>
<li>第5行</li>
</ul>
<div style="clear: both;"></div>
</div>
</div>
</body>
</html>

Js代码

<script type="text/javascript">
var $ = function(id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
// 实例化一个对象并调用对象的initialize方法
var Class = {
create : function() {
return function() {
this.initialize.apply(this, arguments);
};
}
};
// 为Object添加一个extend方法
Object.extend = function(destination, source) {
for ( var property in source) {
destination[property] = source[property];
}
return destination;
};
// 为对象注册事件
var addEventHandler = function(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};
var Scroll = Class.create();
Scroll.prototype = {
initialize : function(outObj, inObj, options) {
var oScroll = this;
var iOut = $(outObj);
var iIn = $(inObj);
this.outHeight = iOut.offsetHeight;
this.inHeight = iIn.offsetHeight;

if (this.outHeight >= this.inHeight) return;

iOut.style.overflow = "hidden";
iIn.appendChild(iIn.cloneNode(true));

this.setOptions(options);
this.outObj = iOut;
this.timer = null;

this.side = 1; // 1：向上；2：向下
switch(this.options.side) {
case "down" :
this.side = -1;
break;
case "up":
default:
this.side = 1;
}
addEventHandler(iIn, "mouseover", function() {oScroll.stop();});
addEventHandler(iIn, "mouseout", function() {oScroll.start();});
this.start();
},
setOptions : function(options) {
this.options = {
step : 1, // 每次滚动的px量
side : "up", // 滚动的方向
time : 10 // 滚动的间隔时间（滚动速度）
};
Object.extend(this.options, options || {});
},
scroll : function() {
var inHeight = this.inHeight, outHeight = this.outHeight, iStep = this.options.step * this.side, time = this.options.time;
var iScrollTop = this.outObj.scrollTop;
if (iScrollTop >= (inHeight * 2 - outHeight)) {
iScrollTop -= inHeight;
} else if (iScrollTop <= 0) {
iScrollTop += inHeight;
}
this.outObj.scrollTop = iScrollTop + iStep;

var oScroll = this;
this.timer = setTimeout(function() {oScroll.scroll();}, time);
},
start : function() {
this.scroll();
},
stop : function() {
clearTimeout(this.timer);
}
};
window.onload = function() {
new Scroll("out", "in", {step : 1, side : "up", time : 20});
};
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航