<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. Unity游戏程序员面试题及解答

    典型的一些如手写排序算法.一些基本数学问题,在此就不列举了.以下整理出一些代表性的.有参考价值的题,真实面试题,附有本人的解答,欢迎讨论. 题1.指出下列哪些属于值类型? int System.Obj ...

  2. 数据库插入数据失败，log提示不能将值 NULL 插入列 'id'

    已经记不住具体的log信息了,意思就是ID如果没有设置为自增长的情况下就不能插入数据,而建表时ID字段是设置为"not null",所以就不能顺利插入数据. 解决方法有两种: ①建 ...

  3. 配置Nginx作为web server详解

    keepalived+nginx:实现高可用 corosync+ngin Nginx: 轻量级的反向代理 web服务器 处理静态文件,索引文件以及自动索引,打开文件描述缓存 使用缓存加速反向代理,简单 ...

  4. JVM-6.即时编译器

    一.即时编译器 二.运行模式 三.基本原理 四.编译优化技术 五.Java与C/C++的编译器对比 六.参考       一.即时编译器 1.在部分虚拟机(如Hotspot.IBM J9)中,Java ...

  5. 打印杨辉三角--for循环

    要求打印7行直角杨辉三角 杨辉三角特点: 第1行和第2行数字都为1: 从第三行开始,除去开头和结尾数字为1,中间数字为上一行斜对角两个数字的和. 如下图: 打印结果: 代码如下: package 杨辉 ...

  6. WireShark网络分析就这么简单 读后感

    京东618活动,满200减100,果断入手了这本经典的 WireShark教程

  7. node.js 开发环境配置 和使用方式

    1.在根目录创建一个文件夹 里面 放入js 编写完成后使用 cmd  进行编译就可以了2.expree 安装    卸载: npm uninstall -g express 安装指定版本: npm i ...

  8. [原创]使用logcat快速抓取android崩溃日志

    在android APP测试过程中会发生不少的crash,目前抓取日志的主流方法是通过eclipse或者eclipse的ddms组件进行捕抓,这两种方法有个缺点是启动时非常耗时.本文通过adb程序与b ...

  9. JVM高级特性-一、java内存结构区域介绍

    区域划分: java虚拟机在执行程序的过程中,将内存分为功能不同的几个区域,如下图: 此图列出了内存划分的各个区域,其中 线程私有的:程序计数器.虚拟机栈.本地方法栈 线程共享的:堆.方法区 下面,逐 ...

  10. 流畅的python学习笔记：第三章

    字典的变种: OrderedDict 首先来看下面的代码,在一个字典中,有name,age,city,在遍历这个字典的时候.顺序却是随机的,不是按照我们添加的顺序也就是name->age-> ...