<script type="text/javascript" src="./whenReady.js"></script> <!-- 使用了whenReady文件中的函数 -->
<body>
<script type="text/javascript">
/**
* 把内容元素装到一个指定大小（最小是 50*50）的窗体或视口内
* 可选参数contentX和contentY指定内容相对窗体的初始便宜量
* 如果指定，他们必须 <= 0
* 这个窗体有mousewheel事件处理程序
* 它允许用户平移元素和缩放窗体
*/
function enclose(content,framewidth,frameheight,contentX,contentY){
//这些参数不仅仅是初始值
//他们保存当前状态，能被mousewheel处理程序使用和修改
console.log("begin");
framewidth = Math.max( framewidth,50);
frameheight = Math.max( frameheight,50);
contentX = Math.min(contentX, 0) || 0;
contentY = Math.min(contentY, 0) || 0;
//创建frame元素，且设置css类名和样式
var frame = document.createElement("div");
frame.className = "enclosure"; //这样我们能在样式表中定义样式
frame.style.width = framewidth + "px"; //设置frame的尺寸
frame.style.height = frameheight + "px";
frame.style.overflow = "hidden"; //没有滚动条，不能溢出
frame.style.boxSizing = "border-box"; //border-box简化了调整frame大小的计算
frame.style.webkitBoxSizing = "border-box";
frame.style.MozBoxSizing = "border-box";
//把frame放入文档中，并把内容移入frame中
content.parentNode.insertBefore(frame,content);
frame.appendChild(content);
//确定元素相对于frame的位置
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);
//注册mousewheel事件处理程序
frame.onwheel = wheelHandler; //未来浏览器
frame.onmousewheel = wheelHandler; //大多数当前浏览器
if(isFirefox) //仅火狐浏览器
frame.addEventListener("DOMMouseScroll",wheelHandler,false);
function wheelHandler(event){
var e = event || window.enent; //标准或IE事件对象
//查找wheel事件对象、mousewheel事件对象（包括2D和1D形式）
//和Firefox的DOMMouseScroll事件对象的属性
//从事件对象中提取旋转量
//绽放deltal一遍一次鼠标滚轮"单机"相对于屏幕的缩进增量的是30px
//如果未来浏览器在同一事件上同时触发“wheel”和“mousewheel”
//这个最终会重复计算
//所以，希望取消wheel事件将阻止mousewheel事件的产生
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属性
e.wheelDelta/4 || //那么就用1D的滚轮属性
e.detail*-10 || //Firefox的DOMMouseScroll事件
0 //属性未定义
);
//在大多数浏览器中，每次鼠标滚轮单机对应的delta是120
//但是，在mac中，鼠标滚轮似乎对速度更敏感，
//其delta值通常要打120倍，使用Apple鼠标至少如此
//使用浏览器测试解决这个问题
if( isMacWebkit){
deltaY/=30;
deltaX/=30;
}
//如果在Firefox（未来版本）中得到mousewheel或wheel事件
//那么就不在需要DOMMouseScroll
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){ //如果按下Alt键，就可以调整frame大小
if(deltaX){
framewidth -= deltaX; //新宽度，但不能比内容大
framewidth = Math.min(framewidth, contentwidth);
framewidth = Math.max(framewidth,50); //且也不能比50小
frame.style.width = framewidth+"px"; //在frame上设置它
}
if(deltaY){
frameheight -= deltaY; //同样的操作对frame的高度做一遍
frameheight = Math.min(frameheight,contentheight);
frameheight = Math.max(frameheight-deltaY,50);
frame.style.height = frameheight+"px";
}
}
else{ //如果没有按Alt辅助键，就可以平移frame中的内容
if(deltaX){
//不能再滚动了
var minoffset = Math.min(framewidth - contentwidth,0);
//把deltaY添加到contentX，但不能小于minoffset
contentY = Math.max(contentX+deltaX,minoffset);
contentY = Math.min(contentX,0); //或比0大
content.style.left = contentX + "px"; //设置新的偏移量
}
if(deltaY){
var minoffset = Math.min(frameheight - contentheight,0);
//把deltaY添加到contentY，但不能小于minoffset
contentY = Math.max(contentY+deltaY,minoffset);
contentY = Math.min(contentY,0); //或比0大
content.style.top = contentY + "px"; //设置新的偏移量
}
}
//不让这个事件冒泡，阻止任何默认操作
//这回阻止浏览器使用mousewheel事件滚动文档
//希望对于相同的鼠标滚动
//调用wheel事件上的preventDefault（）也能阻止mousewheel事件的产生
if(e.preventDefault)
e.preventDefault();
if(e.stopPropagation)
e.stopPropagation();
e.cancelBubble = true; //IE事件
e.returnValue = false; //IE事件
return false;
}
}
whenReady(function(){
enclose(document.getElementById('content'),400,200,-200,-300);
});
</script>
<style type="text/css">div.enclosure{border: solid black 10px;margin:10px;}</style>
<img id="content" src="./37178802_25568731.jpg"> <!--换成自己的图片 ->
</body>
