JS上下无缝滚动效果

ganglong99

浏览: 162034 次
性别:
来自: 重庆

最近访客更多访客>>

shujitao

353631297

wulunbi

imyth

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

prototype UP JavaScript XHTML HTML

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>

分享到：

悟透JavaScript | 引用外部.css或.js文件的路径问题

2010-02-09 13:56
浏览 6522
评论(6)
论坛回复 / 浏览 (2 / 11723)
分类:Web前端
查看更多

6 楼 faylai 2010-02-21

binlaniua 写道

晕又见JS 大神...

看到 $, extend, Class的用法

你是不是有个专门的博客啊~~

地址能发下吗

prototype.js

5 楼 xiaoxie2007 2010-02-20

不错，学习了

4 楼 binlaniua 2010-02-14

晕又见JS 大神...

看到 $, extend, Class的用法

你是不是有个专门的博客啊~~

地址能发下吗

3 楼 yaoneng 2010-02-12

不错，学习学习~

2 楼 rainsilence 2010-02-10

你可以试一下1->2->3->4->5->1->2->3->4->5这样的顺序。
用appendChild

1 楼 rainsilence 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);
        };
    }
};
这个经典啊。。。。

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论