JS上下シームレススクロール効果

4453 ワード

JavaScript html XHTML プロトタイプ UP。

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>

jsダイナミック変更iframe高度適応