Javascript鼠标控制对象滚动

原创 于 2014-08-13 20:08:24 发布 · 735 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Javascript鼠标控制对象滚动

本文介绍了一种利用鼠标滚轮实现元素滚动的技术方案。通过自定义JavaScript类mScrollBox，实现了基于鼠标位置的平滑滚动效果。支持两种滚动模式：纵向和横向，并允许设置最大滚动速度。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>try the mouseWheel</title>
	<style type="text/css">
   /*＝＝＝＝＝＝＝＝＝reset===========*/
	   * {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: #666;text-decoration: none;}
	    a:hover{color:#333;}
        .r{float:right;}
        .l{float:left;}
        .b{font-weight: bold;}
        .gray{color:#666;}
        .light{color: #ff6600;margin-top: 8px;}
        .case{display: block;padding: 0 2em 2em 2em;border:solid 1px #eaeaea;background: #fff;margin-bottom: 2em;height: 1%;overflow: hidden;}
		.title{display: block;padding: .5em 2em .5em 1em;margin: 0 -2em 2em -2em;font-weight:bold;color: #000;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}
		/*===============main======================*/
        .itemList{height: 150px;overflow: hidden;line-height: 23px;}
        .itemList2 {width: 95%; height: 150px; overflow: hidden; white-space: nowrap}
	</style>
	<script type="text/javascript">

      var $=function(element){
      	return (typeof(element)=='object'?element:document.getElementById(element));
      },
      //判断浏览器
     brower=function(element){
     	va ua=navigator.userAgent.toLowerCase();
     	var os=new Object();
     	os.isFireFox=ua.indexOf('getcko')!=-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 Aarray(event.clientX,event.clientY);
     		var scrollerPos;
     		if(typeof window.pageYOffset!='undefined'){
     			scrollerPos={x:window.pageXOffset,Y:window.pageYOffset};
     		}else if(typeof document.compatMode!='undefined'&&document.compatMode!='BackCompat'){
     			scrollerPos={x:document.documentElement.scrollLeft,document.documentElement.scrolTop}；
     		}else if(typeof document.body!='undefined'){
     			scrollerPos={x:document.body.scrollLeft,y:document.body.scrolTop};
     		}

     		XY={x:window.event.clientX+scrollerPos.x-document.body.clientLeft,
               y:window.event.clientY+scrollerPos.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.stopPrPagation&&(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&&enventListeners[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,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 type="text/javascript">
     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);
     	}
     }
	</script>
</head>
<body>
	<div class="case">
		<div class="title">
			<a href="#" class="r">top</a>
			 调用方法
		</div>
		<div class="b">mScrollerBox({ScrollFor,Mode,maxSpeed});</div>
		<ul class="info gray">
			<li><span class="key">ScrollFor:</span><span class="type">Object</span>滚动对象 (*必须）</li>
			<li><span class="key">Mode:</span><span class="type">String</span>滚动模式 - x:横向, y:纵向(默认)  (*可选)</li>
			<li><span class="key">maxSpeed：</span><span class="type">Number</span>最大滚动步长 - 默认7  (*可选)</li>
		</ul>
	</div>
	<div class="case">
		<div class="title"><a href="#" class="r">Top</a>mScrollBox 演示 - 纵向滚动</div>
		<div id="testMBS1" class="itemList" style="border:solid 1px #eaeaea;padding:2em;">
			<p>
				hey man,when u r reading this article.i kno u r no inhey man,when u r reading this article.i kno u r no in <br/>
				hey man,when u r reading this article.i kno u r no inhey man,when u r reading this article.i kno u r no in <br/>
				hey man,when u r reading this article.i kno u r no inhey man,when u r reading this article.i kno u r no in <br/>
				hey man,when u r reading this article.i kno u r no inhey man,when u r reading this article.i kno u r no in <br/>
				hey man,when u r reading this article.i kno u r no inhey man,when u r reading this article.i kno u r no in <br/>
				hey man,when u r reading this article.i kno u r no inhey man,when u r reading this article.i kno u r no in <br/>
				hey man,when u r reading this article.i kno u r no inhey man,when u r reading this article.i kno u r no in <br/>
				hey man,when u r reading this article.i kno u r no inhey man,when u r reading this article.i kno u r no in <br/>
				hey man,when u r reading this article.i kno u r no inhey man,when u r reading this article.i kno u r no in <br/>
				hey man,when u r reading this article.i kno u r no inhey man,when u r reading this article.i kno u r no in <br/>
				hey man,when u r reading this article.i kno u r no inhey man,when u r reading this article.i kno u r no in <br/>
				hey man,when u r reading this article.i kno u r no inhey man,when u r reading this article.i kno u r no in <br/>
				hey man,when u r reading this article.i kno u r no inhey man,when u r reading this article.i kno u r no in <br/>
				hey man,when u r reading this article.i kno u r no inhey man,when u r reading this article.i kno u r no in <br/>
				hey man,when u r reading this article.i kno u r no inhey man,when u r reading this article.i kno u r no in <br/>
				hey man,when u r reading this article.i kno u r no inhey man,when u r reading this article.i kno u r no in <br/>

			</p>

		</div>
	</div>
	<div class="case">
		<div class="title">
			<a class="r" href="#">Top</a>mScrollBox 演示 - 横向滚动
		</div>
		<div id="test" class="itemList2" style="border:solid 1px #eaeaea;padding:2em">
			    hey man,when u r reading this article.i kno u r no inhey man,when u r reading this article.i kno u r no in
				hey man,when u r reading this article.i kno u r no inhey man,when u r reading this article.i kno u r no in 
				hey man,when u r reading this article.i kno u r no inhey man,when u r reading this article.i kno u r no in 
				hey man,when u r reading this article.i kno u r no inhey man,when u r reading this article.i kno u r no in
				hey man,when u r reading this article.i kno u r no inhey man,when u r reading this article.i kno u r no in 
				hey man,when u r reading this article.i kno u r no inhey man,when u r reading this article.i kno u r no in 
				hey man,when u r reading this article.i kno u r no inhey man,when u r reading this article.i kno u r no in 
				hey man,when u r reading this article.i kno u r no inhey man,when u r reading this article.i kno u r no in <br/>
				hey man,when u r reading this article.i kno u r no inhey man,when u r reading this article.i kno u r no in 
				hey man,when u r reading this article.i kno u r no inhey man,when u r reading this article.i kno u r no in 
				hey man,when u r reading this article.i kno u r no inhey man,when u r reading this article.i kno u r no in 
				hey man,when u r reading this article.i kno u r no inhey man,when u r reading this article.i kno u r no in 
		</div>
	</div>
</body>
</html>

将鼠标移上去，你将会发现意外的惊喜

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值