JS上下无缝滚动效果

最新推荐文章于 2023-11-10 12:46:32 发布

ganglong99

最新推荐文章于 2023-11-10 12:46:32 发布

阅读量113

点赞数

分类专栏： JavaScript 文章标签： prototype UP JavaScript XHTML HTML ViewUI

本文链接：https://blog.csdn.net/ganglong99/article/details/83555843

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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>

ganglong99

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS上下无缝滚动效果

JS上下无缝滚动效果:可自定义每次滚动的px量，滚动的方向（上或者下），滚动速度。&lt;?xml version="1.0" encoding="UTF-8" ?&gt;&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt
复制链接

扫一扫