<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. Linux网络原理及基础设,yum管理RPM包

    一:ifconfig命令 1,ifconfig命令的功能:显示所有正在启动的网卡的详细信息或设定系统中网卡的IP地址. 2. 使用ifup和ifdown命令启动和停止网卡(详见linux系统管理P42 ...

  2. linux下部署php项目-Apache、php、mysql关联

    linux下部署php项目环境可以分为两种,一种使用Apache,php,mysql的压缩包安装,一种用yum命令进行安装. 使用三种软件的压缩包进行安装,需要手动配置三者之间的关系.apache和p ...

  3. SqlDataReader 之指定转换无效

    //获取最新显示顺序数据 string str = string.Format(@"if exists(select ShowOrder from GIS_FuncDefaultLayer ...

  4. Javascript中的数组去重-indexof方法

    在Javascript中,有时我们会用到数组去重.我在这里给大家介绍一下本人认为最简单实用的一种方法-indexOf()去重. var arr = [1,1,1,2,2,2,3,3,4,5,6,2,1 ...

  5. ES6 常用总结——第一章（简介、let、const）

    ES6整理 1. ECMAScript 6简介 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准.它的目标,是使得 JavaScript 语言可以用来编写复杂 ...

  6. django 自定义过滤器（filter）处理较为复杂的变量的实例

    简述:django 在views中有数据需要通过字典(dict)的方式传递给template,该字典中又包含了字典,而且字典中的键值还是一个对象,在template中处理传递过来的数据的时候,字典不能 ...

  7. vue初学实践之路——vue简单日历组件(1)

    ---恢复内容开始--- 最近做的项目有一个需求,需要有一个日历组件供预定功能使用,之前的代码过于繁琐复杂,所以我采用vue重写了这个组件. npm.vue等等安装. 只是一个简单的日历组件,所以并不 ...

  8. 如何让.Net线程支持超时后并自动销毁！

    如何让.Net线程支持超时后并自动销毁! 1.使用CancellationTokenSource之基于Task实现方式 CancellationTokenSource source = new Can ...

  9. oracle表的简单操作

    版权声明:本文为博主原创文章,转载时请注明原文链接. 1.创建表 ) ) not null,primary key(num)); 创建了一个两个字段的表,num和name,都设置为非空,num设为主键 ...

  10. find的用法

    find在Linux系统中和其它工具,如sed.awk.grep等结合起来用,非常有用. 1.列出系统中所有属于root用户的“set uid”文件 #find / -perm 4755 –uid 0 ...