再发个.鼠标控制对象滚动mScrollBox [复制链接]

mudoo　楼主

经典木头

高级会员

帖子: 468
体力: 954
威望: 5
居住地: 福建省泉州市

发表于 2008-6-13 09:00:00 |显示全部楼层

最近参考做的个小效果.算不上原创...一半..
可能用得上.就发上来.

鼠标移动控制对象滚动.
代码里面有用法.演示/.自己看吧.

<!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>mScrollBox</title>
<style type="text/css">
<!--
/* Common Style */
* {padding: 0; margin: 0}
body {margin: 3em; font: 12px Tahoma; background: #EAEAEA; color: #333333; line-height: 20px}

input, textarea {font: 12px Tahoma; color: #666666; padding: 2px; border: solid 1px #DBDBDB}
textarea {padding: 5px; line-height: 20px}

p {margin: 1em 0}

ul {}
li {height: 1%; overflow: hidden; list-style-type: none}

a {color: #666666; text-decoration: none}
a:hover {color: #333333}

.r {float: right}
.l {float: left}
.b {font-weight: bold}
.gray {color: #666666; margin-top: 8px}
.light {color:#FF6600; margin: 0 5px}

.case {display: block; padding: 0 2em 2em 2em; border: solid 1px #EAEAEA; background: #FFFFFF; margin-bottom: 2em; height: 1%; overflow: hidden}
.title {display:block; padding: .5em 2em .5em 1em; margin: 0 -2em 2em -2em; font-weight: bold; color: #000000; background: #FAFAFA; border-bottom: solid 1px #EAEAEA}
.call {display:block;}
.key {display: block; width: 6em; float: left}
.type {display: block; width: 6em; float: left}

.info {padding-left: 2em}
.demo {margin-bottom: 2em}

/* mScrollBox Style */
.itemList {height: 150px; overflow: hidden; line-height: 23px}

.itemList2 {width: 95%; height: 150px; overflow: hidden; white-space: nowrap}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
// 这里都是公用函数
var
// 获取元素
$ = function(element) {
	return (typeof(element) == 'object' ? element : document.getElementById(element));
},

// 判断浏览器
brower = function() {
	var ua = navigator.userAgent.toLowerCase();
	var os = new Object();
	os.isFirefox = ua.indexOf ('gecko') != -1;
	os.isOpera = ua.indexOf ('opera') != -1;
	os.isIE = !os.isOpera && ua.indexOf ('msie') != -1;
	os.isIE7 = os.isIE && ua.indexOf ('7.0') != -1;
	return os;
},

// 获取鼠标位置
getXY = function (e) {
	var XY;
	if(brower().isIE) {
		//XY = new Array(event.clientX, event.clientY);
		var scrollPos;
		if (typeof window.pageYOffset != 'undefined') {
		   scrollPos = {x : window.pageXOffset, y : window.pageYOffset};
		}else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
		   scrollPos = {x : document.documentElement.scrollLeft, y : document.documentElement.scrollTop};
		}else if(typeof document.body != 'undefined') {
		   scrollPos = {x : document.body.scrollLeft, y : document.body.scrollTop};
		}
		XY = {
			x : window.event.clientX + scrollPos.x - document.body.clientLeft,
			y : window.event.clientY + scrollPos.y - document.body.clientTop
		};
	}else{
		XY = {x: e.pageX, y: e.pageY};
	}
	return XY;
},

// 获取元素坐标
getCoords = function(node){
	var x = node.offsetLeft;
	var y = node.offsetTop;
	var parent = node.offsetParent;
	while (parent != null){
		x += parent.offsetLeft;
		y += parent.offsetTop;
		parent = parent.offsetParent;
	}
	return {x: x, y: y};
},

EndEvent = function(e) {
	e = e || window.event;
	e.stopPropagation && (e.preventDefault(), e.stopPropagation()) || (e.cancelBubble = true, e.returnValue = false);
},

// 事件操作(可保留原有事件)
eventListeners = [],
findEventListener = function(node, event, handler){
	var i;
	for (i in eventListeners){
		if (eventListeners[i].node == node && eventListeners[i].event == event && eventListeners[i].handler == handler){
			return i;
		}
	}
	return null;
},
myAddEventListener = function(node, event, handler){
	if (findEventListener(node, event, handler) != null){
		return;
	}
	if (!node.addEventListener){
		node.attachEvent('on' + event, handler);
	}else{
		node.addEventListener(event, handler, false);
	}
	eventListeners.push({node: node, event: event, handler: handler});
},
removeEventListenerIndex = function(index){
	var eventListener = eventListeners[index];
	delete eventListeners[index];
	if (!eventListener.node.removeEventListener){
		eventListener.node.detachEvent('on' + eventListener.event,
		eventListener.handler);
	}else{
		eventListener.node.removeEventListener(eventListener.event,
		eventListener.handler, false);
	}
},
myRemoveEventListener = function(node, event, handler){
	var index = findEventListener(node, event, handler);
	if (index == null) return;
	removeEventListenerIndex(index);
},
cleanupEventListeners = function(){
	var i;
	for (i = eventListeners.length; i > 0; i--){
		if (eventListeners[i] != undefined){
			removeEventListenerIndex(i);
		}
	}
};
//-->
</script>
<script language="javascript" type="text/javascript">
<!--
/*======================================================
	- mScrollBox 鼠标控制滚动
	- By Mudoo 2008.6
======================================================*/
function mScrollBox(inits) {
	var _o = this;
	var _i = inits;
	
	// 初始化
	_o.init = function() {
		_o.objFro = $(inits.object);
		if(_o.objFro == null) {
			alert('初始化失败。');
			return;
		}
		_o.mode		= _i.mode==undefined ? 'y' : _i.mode;		// 滚动模式(x:横向, y:纵向)
		_o.maxSpeed = _i.maxSpeed==undefined ? 7 : _i.maxSpeed;	// 最大滚动步长
		
		if(_o.mode=='y') {
			_o.height	= _o.objFro.offsetHeight;				// 可见高度
			_o.sHeight	= _o.objFro.scrollHeight;				// 实际高度
			_o.smHeight	= _o.sHeight-_o.height;					// 可滚动高度
			if(_o.smHeight<=0) return;
		}else{
			_o.width	= _o.objFro.offsetWidth;				// 可见宽度
			_o.sWidth	= _o.objFro.scrollWidth;				// 实际宽度
			_o.smWidth	= _o.sWidth-_o.width;					// 可滚动宽度
			if(_o.smWidth<=0) return;
		}

_o.preSpace = _o.mode=='y' ? (_o.space/_o.height) : (_o.space/_o.width);
		_o.doTimer	= null;
		_o.pos = getCoords(_o.objFro);
		myAddEventListener(_o.objFro, 'mousemove', _o.doScroll);
		myAddEventListener(_o.objFro, 'mouseout', _o.stopScroll);
	}
	
	// 滚动...
	_o.doScroll = function(e) {
		e = e || event;
		var _pos= getXY(e);
		// 计算滚动步长
		_o.speed	= _o.mode=='y' ? (_pos.y-_o.pos.y)/_o.height : (_pos.x-_o.pos.x)/_o.width;
		_o.speed	= (_o.speed-0.5) * 2;
		_o.speed	= Math.round(_o.speed*_o.maxSpeed);
		
		if(_o.doTimer==null) _o.doTimer = setInterval((_o.mode=='y' ? _o.scrollY : _o.scrollX), 10);
	}
	
	// 垂直滚动
	_o.scrollY = function() {
		_o.objFro.scrollTop += _o.speed;
		var _top = _o.objFro.scrollTop;
		if(_top==0 || _top==_o.smHeight) _o.stopScroll();
	}
	
	// 水平滚动
	_o.scrollX = function() {
		_o.objFro.scrollLeft += _o.speed;
		var _left = _o.objFro.scrollLeft;
		if(_left==0 || _left==_o.smWidth) _o.stopScroll();
	}
	
	// 停止滚动
	_o.stopScroll = function() {
		clearInterval(_o.doTimer);
		_o.doTimer = null;
	}
	
	_o.init();
}

/*=============================================
	mScrollBox 测试
=============================================*/
function testMSB() {
	new mScrollBox({
		object	: 'testMSB1',
		mode	: 'y',
		maxSpeed: 5
	});
	new mScrollBox({
		object	: 'testMSB2',
		mode	: 'x'
	});
}

myAddEventListener(window, 'load', testMSB);
//-->
</script>
</head>

<body>
<div class="case">
	<div class="title"><a href="#" class="r">Top</a>mScrollBox&nbsp;调用方法</div>
	<div class="b">mScrollBox({ScrollFor, Mode, maxSpeed});</div>
	<ul class="info gray">
		<li><span class="key">ScrollFor：</span><span class="type">Object</span>滚动对象&nbsp;&nbsp;(*必须)</li>
		<li><span class="key">Mode：</span><span class="type">String</span>滚动模式&nbsp;-&nbsp;x:横向, y:纵向(默认)&nbsp;&nbsp;(*可选)</li>
		<li><span class="key">maxSpeed：</span><span class="type">Number</span>最大滚动步长&nbsp;-&nbsp;默认7&nbsp;&nbsp;(*可选)</li>
	</ul>
</div>
<div class="case">
	<div class="title"><a href="#" class="r">Top</a>mScrollBox&nbsp;演示&nbsp;-&nbsp;纵向滚动</div>
	<div id="testMSB1" class="itemList" style="border: solid 1px #EAEAEA; padding: 2em">
		<p>
		唐僧：啊啊！大家不要生气，生气会犯了嗔戒的！悟空你也太调皮了，我跟你说过，叫你不要乱扔东西， 乱扔东西这么做……   （咣当，悟空棍子掉在地上）   你看我还没有说完呢你把棍子又给扔掉了！月光宝盒是宝物，你把他扔掉会污染环境，唉，要是砸到小朋友那怎么办？就算没有砸到小朋友砸到那些花花草草也是不对的呀！<br />
		(黑夜，旷野)<br />
		观音：孙悟空，你这个畜牲，你本来答应如来佛祖护送你师傅唐三藏去取西经，你居然跟牛魔王串通要吃你师傅，你知不知道犯了弥天大罪？<br />
		孙悟空：少罗嗦！你追了我三天三夜，因为你是女人，我才不杀你，不要以为我怕了你了！<br />
		唐僧：悟空，你怎么可以这样跟观音姐姐讲话呢？<br />
		悟空：哗！不要吵！<br />
		唐僧：你又在吓我！<br />
		观音：你不是怕我,又为什么要打伤紫霞仙子,抢走她的月光宝盒呢？你不就是想躲开我吗。<br />
		悟空：既然躲不了，那老孙就跟你绝一死战！   (悟空将月光宝盒随手一抛，正好砸在唐僧头上。)<br />
		唐僧：又干什么？<br />
		悟空：嗯……   (准备动手)<br />
		唐僧：啊啊！大家不要生气，生气会犯了嗔戒的！悟空你也太调皮了，我跟你说过，叫你不要乱扔东西， 乱扔东西这么做……   （咣当，悟空棍子掉在地上）   你看我还没有说完呢你把棍子又给扔掉了！月光宝盒是宝物，你把他扔掉会污染环境，唉，要是砸到小朋友那怎么办？就算没有砸到小朋友砸到那些花花草草也是不对的呀！<br />
		(悟空一把抓住唐僧手中的月光宝盒)<br />
		唐僧：干什么？<br />
		悟空：放手！<br />
		唐僧：你想要啊？悟空，你要是想要的话你就说话嘛，你不说我怎么知道你想要呢，虽然你很有诚意地看着我，可是你还是要跟我说你想要的。你真的想要吗？那你就拿去吧！你不是真的想要吧？难道你真的想要吗？……<br />
		悟空：我Kao！   (悟空一拳将唐僧打倒。)<br />
		观音：啊？孙悟空！<br />
		悟空：大家看到啦？这个家伙没事就长篇大论婆婆妈妈叽叽歪歪，就好象整天有一只苍蝇，嗡……对不起，不是一只，是一堆苍蝇围着你，嗡…嗡…嗡…嗡…飞到你的耳朵里面，   救命啊！ (悟空倒地翻滚，异常痛苦。)<br />
		悟空：所以呢我就抓住苍蝇挤破它的肚皮把它的肠子扯出来再用它的肠子勒住他的脖子   用力一拉，呵－－！各位，整条舌头都伸出来啦！我再手起刀落哗－－！整个世界清净了。现在，大家明白了，为什么我要杀他！<br />
		观音：哼！悟空，你诸多借口，你根本就不想去取西经！<br />
		悟空：说那么多干什么，打呀！   (俩人开始斗法）<br />
		悟空：俺老孙有金刚不坏之身，十个观音我都不放在眼里。   (又一番斗法，观音将悟空收入甘露瓶。)<br />
		观音：今天我要替天行道！<br />
		唐僧：唉！徒弟有错做师傅的也有责任，求姐姐放他一条生路吧！<br />
		观音：我不消灭他我没法向玉皇大帝交代！<br />
		唐僧：请姐姐跟玉皇大帝说一声，贫僧愿意一命赔一命！(合十坐地，将法杖向空中一抛)喃呒阿弥陀佛！   (法杖将唐僧砸死。)<br />
	</div>
</div>
<div class="case">
	<div class="title"><a href="#" class="r">Top</a>mScrollBox&nbsp;演示&nbsp;-&nbsp;横向滚动</div>
	<div id="testMSB2" class="itemList2" style="border: solid 1px #EAEAEA; padding: 2em">
		悟空你也太调皮了，我跟你说过，叫你不要乱扔东西， 乱扔东西这么做…… （咣当，悟空棍子掉在地上） 你看我还没有说完呢你把棍子又给扔掉了！月光宝盒是宝物，你把他扔掉会污染环境，唉，要是砸到小朋友那怎么办？就算没有砸到小朋友砸到那些花花草草也是不对的呀！
	</div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

[ 本帖最后由 mudoo 于 2008-6-13 17:17 编辑 ]

已有 1 人评分	威望	收起理由
caiying2007	+ 1	不错的原创一半

总评分: 威望 + 1 查看全部评分

		自动登录	找回密码
密码			注册

再发个.鼠标控制对象滚动mScrollBox [复制链接]

回复 tmulmt 在 5# 的帖子

浏览过的帖子

浏览过的版块