Javascript鼠标控制对象滚动
2014-08-13 20:08
363 查看
<!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>
将鼠标移上去，你将会发现意外的惊喜
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 用鼠标控制滚动的菜单条！(JavaScript),JavaScript,脚本特效
- [转载 js]鼠标控制对象滚动
- js javascript 鼠标控制图片左右滚动带自动翻滚,图片滑动新闻展示
- 再发个用鼠标控制对象滚动mScrollBox
- JavaScript一点也不简单—实现“鼠标控制局部文字滚动效果”初探
- 用鼠标控制滚动的菜单条！(JavaScript)
- 鼠标控制对象滚动mScrollBox
- 鼠标移动控制对象滚动.
- [转载 js]鼠标控制对象滚动
- 用javascript控制iframe滚动
- Javascript实现图片位置控制（鼠标拖拽 + 键盘方向键移动）源码分享
- javascript窗口宽高，鼠标位置，滚动高度
- javascript控制realplayer对象使用
- [转]非常全的javascript控制MediaPlayer与realplayer对象
- javascript获取鼠标坐标跟随控制层渐显信息提示效果（有BUG在调试中）
- javascript跟随鼠标的文字带滚动效果
- ImageFlow可鼠标控制图片滚动
- [转]js鼠标及对象坐标控制属性
- javascript入门·图片对象(无刷新变换图片)\滚动图像