<!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 || //wheel事件
e.wheelDeltaX / 4 || // mousewheel
0; // 属性未定义
var deltaY = e.deltaY * -30 || // wheel事件
e.wheelDeltaY / 4 || // webkit中的mousewheel
(e.wheelDeltaY === undefined && // 若没有2D的，就用1D滚轮属性
e.wheelDelta / 4) ||
e.detail * -10 || // DOMMouseScroll
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>