滚轮事件js
浏览数：24 /
时间：2015年06月09日
<!DOCTYPE html>
<html>
<head>
<title>jane</title>
<style>div.enclosure{border:solid black
10px;margin:10px;}</style>
</head>
<body>
<div><img id="content" src="test.jpg"
/></div>
<script type="text/javascript">
var whenReady = (function(){
var funcs = [];
var ready = false;
function handler(e){
if(ready){
return;
}
if(e.type === "readystatechange" &&
document.readyState !== "complete"){
return;
}
for(var i = 0; i < funcs.length;i++){
funcs[i].call(document);
}
ready = true;
funcs = null;
}
if(document.addEventListener){
document.addEventListener("DOMContentLoaded",handler,false); //firefox
专有
document.addEventListener("readystatechange",handler,false);
window.addEventListener("load",handler,false);
}
else if(document.attachEvent){
document.attachEvent("onreadystatechange",handler);
window.attachEvent("onload",handler);
}
return function whenReady(f){
if(ready) f.call(document);
else funcs.push(f);
}
}());
// 查询窗口滚动条的位置
function getScrollOffset(w){
w = w || window;
// 除IE8及以前版本不能用
if(w.pageXoffset != null)
return{x:w.pageXoffset,y:pageYoffset};
// 对标准模式下的IE（或者任何浏览器）
var d = w.document;
if(document.cmpatMode == "CSS1Compat"){
return{x:d.body.scrollLeft,y:d.body.scrllTop};
}
// 对怪异模式下的浏览器
else{
return{x:d.documentElement.scrollLeft,y:d.documentElement.scrollTop};
}
}
function enclose(content,framewidth,frameheight,contentX,contentY){
framewidth = Math.max(framewidth,50);
frameheight = Math.max(frameheight,50);
contentX = Math.min(contentX,0) || 0;
contentY = Math.min(contentY,0) || 0;
var frame = document.createElement("div");
frame.className = "enclosure";
frame.style.width = framewidth + "px";
frame.style.height = frameheight + "px";
frame.style.overflow = "hidden";
frame.style.boxSizing = "border-box";
frame.style.webkitBoxSizing = "border-box";
frame.style.MozBoxSizing = "border-box";
content.parentNode.insertBefore(frame,content);
frame.appendChild(content);
content.style.position = "relative";
content.style.left = contentX + "px";
content.style.top = contentY + "px";
var isMacWebkit = (navigator.userAgent.indexOf("Macintosh")
!== -1 || navigator.userAgent.indexOf("WebKit") !== -1);
var isFirefox = (navigator.userAgent.indexOf("Gecko") !==
-1);
frame.onwheel = wheelHandler;
frame.onmousewheel = wheelHandler;
if(isFirefox){
frame.addEventListener("DOMMouseScroll",wheelHandler,false);
}
function wheelHandler(event){
var e = event || window.event;
var deltaX = e.deltaX * -30 ||
e.wheelDeltaX / 4 ||
0;
var deltaY = e.deltaY * -30 ||
e.wheelDeltaY / 4 ||
(e.wheelDeltaY === undefined &&
// 若没有2D的，
e.wheelDelta
/ 4) ||
e.detail * -10 ||
0;
if(isMacWebkit){
//Mac苹果系统反应灵敏。chrome也是比较灵敏
deltaX /= 30;
deltaY /= 30;
}
if(isFirefox && e.type !==
"DOMMouseScroll"){
frame.removeEventListener("DOMMouseScroll",wheelHandler,false);
}
var contentbox =
content.getBoundingClientRect();
var contentwidth = contentbox.right -
contentbox.left;
var contentheight = contentbox.bottom -
contentbox.top;
if(e.altKey){
if(deltaX){
framewidth -=
deltaX;
framewidth =
Math.min(framewidth,contentwidth);
framewidth =
Math.max(framewidth,50);
frame.style.width =
framewidth + "px";
}
if(deltaY){
frameheight -=
deltaY;
frameheight =
Math.min(frameheight,contentwidth);
frameheight =
Math.max(frameheight,50);
frame.style.height
= frameheight + "px";
}
}else{
if(deltaX){
var minoffset =
Math.min(framewidth - contentwidth,0);
contentX =
Math.max(contentX + deltaX,minoffset);
contentX =
Math.min(contentX,0);
content.style.left
= contentX + "px";
}
if(deltaY){
var minoffset =
Math.min(frameheight - contentheight,0);
contentY =
Math.max(contentY + deltaY,minoffset);
contentY =
Math.min(contentY,0);
content.style.top =
contentY + "px";
}
}
e.stopPropagation ? e.stopPropagation :
e.cancelBubble = true;
e.preventDefault ? e.preventDefault :
e.returnValue = false;
return false;
}
}
whenReady(function(){
enclose(document.getElementById("content"),500,500,-400,-200);
})
</script></body>
</html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
