浏览 11725 次
|
锁定老帖子 主题：JS上下无缝滚动效果
精华帖 (0) :: 良好帖 (2) :: 新手帖 (2) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-02-09
最后修改：2010-02-09
JS上下无缝滚动效果:
可自定义每次滚动的px量，滚动的方向（上或者下），滚动速度。 <?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>
在body中插入如下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>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2010-02-10
<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 请删除。。。 var Class = { create : function() { return function() { this.initialize.apply(this, arguments); }; } }; 这个经典啊。。。。 |
| 返回顶楼 | |
|
发表时间：2010-02-10
你可以试一下1->2->3->4->5->1->2->3->4->5这样的顺序。
用appendChild |
| 返回顶楼 | |
|
发表时间：2010-02-14
晕 又见JS 大神...
看到 $, extend, Class的用法 你是不是有个专门的博客啊~~ 地址能发下吗 |
| 返回顶楼 | |
|
发表时间：2010-02-21
binlaniua 写道 晕 又见JS 大神...
看到 $, extend, Class的用法 你是不是有个专门的博客啊~~ 地址能发下吗 prototype.js |
| 返回顶楼 | |
