软件开发培训班 >> 编程开发 >> JavaScript

js 事件对象鼠标滚轮效果演示说明

　　本文标签：js,事件对象,鼠标滚轮

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Mouse Wheel Data</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style> 
.slider 
{ 
width:50px; 
height:180px; 
background:#eee; 
padding:10px 0; 
cursor:n-resize; 
} 
.slider-slot 
{ 
width:16px; 
margin:0 auto; 
height:180px; 
background:#eee; 
border:1px solid gray; 
border-color:#999 white white #999; 
position:relative; 
} 
.slider-trigger 
{ 
width:14px; 
height:18px; 
font:1px/0 arial; 
border:1px solid gray; 
border-color:white #999 #999 white; 
background:#ccc; 
position:absolute; 
} 
.slider-trigger b 
{ 
display:block; 
margin:1px 3px; 
border-top:1px solid #999; 
border-bottom:1px solid white; 
} 
</style> 
</head> 
<body> 
<h2>文本框增加/减少值</h2> 
<div><input type="text" id="txt" value="1440" /><span id="warn">文本框获得焦点后滚动鼠标滚轮</span></div> 
<h2>鼠标滚动缩放图片</h2> 
<div><img src="http://files.jb51.net/upload/201005/20100531231516458.jpg" id="img" width="300" style="cursor:-moz-zoom-in" title="鼠标滚动 缩放大小" / alt="" /></div> 
<h2>鼠标滚动控制滑块移动</h2> 
<div class="slider" id="slider"> 
<div class="slider-slot"> 
<div class="slider-trigger" id="sliderTrigger"> 
<strong></strong> 
<strong></strong> 
<strong></strong> 
<strong></strong> 
<strong></strong> 
</div> 
</div> 
</div> 
</body> 
<script> 
var $ = function(i) 
{ 
return document.getElementById( i ); 
} 
//取得滚动值 
function getWheelValue( e ) 
{ 
e = e||event; 
return ( e.wheelDelta ? e.wheelDelta/120 : -( e.detail%3 == 0 ? e.detail/3 : e.detail ) ) ; 
} 
function stopEvent(e) 
{ 
e = e||event; 
if( e.preventDefault )e.preventDefault(); 
e.returnValue = false; 
} 
//绑定事件,这里对mousewheel做了判断,注册时统一使用mousewheel 
function addEvent( obj,type,fn ) 
{ 
var isFirefox = typeof document.body.style.MozUserSelect != undefined; 
if( obj.addEventListener ) 
obj.addEventListener( isFirefox ? DOMMouseScroll : type,fn,false ); 
else 
obj.attachEvent( on+type,fn ); 
return fn; 
} 
//移除事件,这里对mousewheel做了兼容,移除时统一使用mousewheel 
function delEvent( obj,type,fn ) 
{ 
var isFirefox = typeof document.body.style.MozUserSelect != undefined; 
if( obj.removeEventListener ) 
obj.removeEventListener( isFirefox ? DOMMouseScroll : type,fn,false ); 
else 
obj.detachEvent( on+type,fn ); 
} 
/*限制范围函数, 
参数是三个数字,如果num 大于 max, 则返回max， 如果小于min，则返回min,如果在max和min之间，则返回num 
*/ 
function range( num, max,min ) 
{ 
return Math.min( max, Math.max( num,min ) ); 
} 
/* ------------ */ 
/* <h2>文本框增加/减少值</h2> */ 
$( txt ).onfocus = function() 
{ 
//保存txt自己的引用 
var me = this, 
//onfocus之后注册滚轮事件 
handler = addEvent( me,mousewheel,function(e) 
{ 
stopEvent( e ); 
var delta = getWheelValue(e); 
/* 
+me.value 将me.value转换成数字， 
然后使用isNaN检查转换后的数字是否为NaN 
如果是，重新赋值me.value=0; 
*/ 
if( isNaN( +me.value ) ) me.value = 0; 
//递增（或递减） 
me.value = +me.value + delta; 
//选中me里的文字 
me.select(); 
}); 
//失去焦点时，把mousewheel事件移除，重置window.onblur和handler引用为null 
this.onblur = function() 
{ 
//移除掉mousewheel事件 
delEvent( me,mousewheel,handler ); 
window.onblur = handler = null; 
} 
//为了防止浏览器失焦后，文本框重复触发focus，在onblur时，让文本框同时失焦 
window.onblur = function() 
{ 
me.blur(); 
//把自己清理掉 
this.onblur = null; 
} 
} 
/* <h2>鼠标滚动缩放图片</h2> */ 
addEvent( $(img),mousewheel,function(e) 
{ 
stopEvent( e ); 
var delta = getWheelValue(e); 
//每次递增（或递减）10px，使用了范围限制，保证图片不会过大过小 
var img = $(img); //没有修复ie的this指向，所以这里只好重新获取img 
img.style.width = range( img.offsetWidth + ( delta * 10 ),550,100) + px; 
return false; 
}); 
/* <h2>鼠标滚动控制滑块移动</h2> */ 
addEvent( $(slider), mousewheel,function(e) 
{ 
stopEvent( e ); 
var delta = getWheelValue(e), 
tar = $(sliderTrigger); 
//杯具的反转，因为tar.offsetTop 越大，滑块就越往下，所以delta又需要反转回来，向上是负的，向下是正的，所以乘以-1 
tar.style.top = range( tar.offsetTop + ( -1 * delta * 10 ),160,0 ) + px; 
}); 
</script></html>

技术文章快速查找

js 使用form表单select类实现级联菜单效果

DIV层之拖动、关闭、打开效果代码

jquery 得到当前页面高度和宽度的两个函数

jQuery实现列表自动循环滚动鼠标悬停时停止滚动

使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)

js函数获取html中className所在的内容并去除标签

JavaScript DOM 学习第三章内容表格

js 本地预览的简单实现方法

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建

软件开发培训班 >> 编程开发 >> JavaScript

js 事件对象 鼠标滚轮效果演示说明

js 事件对象鼠标滚轮效果演示说明