<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. MPP 一、Greenplum 集群安装

    Installating and Initializing a Greenplum Database System... 1 安装说明 1.1 环境说明 名称 版本 下载地址 虚拟机 Oracle V ...

  2. Unity遮挡透明渐变

    遮挡透明若没有渐变实现方法: 1.透明中物体存在list中 2.每过一段时间(可以每帧,但是流畅性会降低)摄像机发送一条射线向玩家,out hitInfo 3.list与hitInfo比对,将在lis ...

  3. python——爬虫&问题解决&思考（四）

    继续上一篇文章的内容,上一篇文章中已经将url管理器和下载器写好了.接下来就是url解析器,总的来说这个模块是几个模块中比较难的.因为通过下载器下载完页面之后,我们虽然得到了页面,但是这并不是我们想要 ...

  4. nodejs 开发指南 书中小项目 代码

    最近 在学习node.js 先看了下语法 ,然后就看这个开发指南感觉书还是很有用,但是代码太旧了,网上也没有最新的,所以就自己查着前人的痕迹和自己修改,现在可以跑了. https://github.c ...

  5. JAVA设计模式初探之装饰者模式

    定义:动态给一个对象添加一些额外的职责,就象在墙上刷油漆.使用Decorator模式相比用生成子类方式达到功能的扩充显得更为灵活.设计初衷:通常可以使用继承来实现功能的拓展,如果这些需要拓展的功能的种 ...

  6. div+css的属性

    div+css的属性 gCascading Style Sheet 层叠式样式表 ==> 层叠样式表 Internal Style Sheet 内部样式表 External Style Shee ...

  7. 用Backtrack进行渗透测试评估

    Web应用程序的分析在渗透测试和漏洞评估中发挥了重要的作用.确定Web应用程序的正确信息(例如使用的插件,CMS类型等)都可以帮助测试者使用准确的漏洞来测试,能够降低整个渗透测试漏洞评估所花费的时间. ...

  8. 关于Oracle、SqlServer 的sql递归查询

    递归查询所有子节点 建人员表  hrmresource 主键     姓名   上级ID 层级关系:- 4      - 3           - 2                - 1      ...

  9. 关于对WEB标准以及W3C的理解与认识问题

    web标准简单来说可以分为结构.表现和行为.其中结构主要是有HTML标签组成.或许通俗点说,在页面body里面我们写入的标签都是为了页面的结构.表现即指css样式表,通过css可以是页面的结构标签更具 ...

  10. ELK-Kibana-01

      1.Kibana介绍   Kibana 是一个设计使用和Elasticsearch配置工作的开源分析和可视化平台.可以用它进行搜索.查看.集成Elasticsearch中的数据索引.可以利用各种图 ...