<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>

  

JavaScript一个鼠标滚动事件的实例的更多相关文章

  1. 在FireFox浏览器上,用stopImmediatePropagation阻止冒泡鼠标滚动事件

    楔子 是不是在火狐用stopPropagation不太满意 很久没有笑过又不知为何 既然不快乐又不喜欢这里 不如一路向西用stopImmediatePropagation(其实我对浏览器的兼容性看不顺 ...

  2. js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写

    js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写 一.总结 一句话总结:滚动事件scroll(),浏览器窗口调整监听resize(),思考好监听对象. 1.滚动事件scroll()的监听对象是 ...

  3. JS鼠标滚动事件

    -----------------------------//鼠标滚动事件以下是JS临听鼠标滚动事件 并且还考虑到了各浏览器的兼容----------------------------------- ...

  4. vue组件添加鼠标滚动事件

    在一个组件标签上加鼠标滚动事件,应该写成    @mousewheel.native

  5. 鼠标滚动事件 - onmousewheel

    1.Jquery-MouseWheel jquery默认是不支持支持鼠标滚轮事件(mousewheel) jquery MouseWheel下载:https://github.com/jquery/j ...

  6. IE和Chrome执行javascript对鼠标双击事件的不同响应

    最近在用天地图API帮同学做点开发的工作,主要是基于天地图的API实现违法用地举报的在线地图标绘,要实现的效果如下: 由于是基于天地图API的TPolygonTool工具实现面积量测和多边形绘制功能, ...

  7. 解决ScrollViewer嵌套的DataGrid、ListBox等控件的鼠标滚动事件无效

    C# 中,两个ScrollViewer嵌套在一起或者ScrollViewer里面嵌套一个DataGrid.ListBox.Listview(控件本身有scrollviewer)的时候,我们本想要的效果 ...

  8. 鼠标滚动事件兼容性 wheel、onwheel

    wheelEvent = "onwheel" in document.createElement("div") ? "wheel" : // ...

  9. js监控鼠标滚动事件

    //滚动动画 windowAddMouseWheel(); function windowAddMouseWheel() { var scrollFunc = function (e) { e = e ...

随机推荐

  1. 《算法4》2.1 - 选择排序算法(Selection Sort), Python实现

    选择排序算法(Selection Sort)是排序算法的一种初级算法.虽然比较简单,但是基础,理解了有助于后面学习更高深算法,勿以勿小而不为. 排序算法的语言描述: 给定一组物体,根据他们的某种可量化 ...

  2. 关于vue生命周期中的同步异步的理解

    在vue官网中介绍生命周期的图如下: 主要测试代码如下: 主要是测试前四个生命周期beforeCreate,created,beforeMount,mounted,里面同步和异步的执行顺序,其它的类似 ...

  3. react 的五脏六腑ing~

    用react一年多了.一直是在别人的影子下写的代码,他们也确实都是大神级的人物,不过,小菜鸟也有小菜鸟的思想~这不,今天就在重温一遍react!记一些零碎的知识点~不知道对你们有没有用,不过,对于我, ...

  4. WebLogic 安装

    首先 需要下载好Weblogic 官网:http://www.oracle.com/technetwork/middleware/weblogic/downloads/wls-main-097127. ...

  5. PHP cURL的详细使用手册

    PHP cURL的详细使用手册 PHP cURL可以帮助我们简单有效地去抓取网页内容,帮助我们方便的实现抓取功能.本文主要介绍了PHP cURL的使用方法. AD:2013云计算架构师峰会课程资料下载 ...

  6. poj3683

    poj3683 题意 n对新人举行婚礼,婚礼在不同时间段但可能重叠,婚礼有开始(Si).结束(Ti).仪式举行时间(Di),问能否给出一种举行方案,使得神父能参加所有的婚礼并举行仪式. 分析 xi为真 ...

  7. cpp(第十章)

    1. const class & func(const class &) const { do something.. } 第一个const返回后的类不允许被赋值,第二个const不允 ...

  8. idea live template高级知识, 进阶(给方法,类,js方法添加注释)

    为了解决用一个命令(宏)给方法,类,js方法添加注释,经过几天的研究.终于得到结果了. 实现的效果如下: 给Java中的method添加方法: /** * * @Method : addMenu * ...

  9. websocket学习和使用

    1)WebSocket介绍 HTML5 Web Sockets规范定义了Web Sockets API,支持页面使用Web Socket协议与远程主机进行全双工的通信.它引入了WebSocket接口并 ...

  10. mysql关闭/启用外键约束

    1.有时为了导入数据方便,需要临时关闭外键约束mysql>SET FOREIGN_KEY_CHECKS=0; 2.打开外键约束mysql>SET FOREIGN_KEY_CHECKS=1; ...