<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. 使用cnpm搭建私有NPM仓库 发布npm包

    关于如何使用cnpm搭建私有的npm仓库看这里→ http://blog.fens.me/nodejs-cnpm-npm/ 我本人还没有机会真正实践操作过,公司的npm仓库是我老大搭建的,我这里仅仅记 ...

  2. 目前微信 微博 新浪 豆瓣等所有分享的js插件

    原理 功能 集成微信.微博.开心.豆瓣.人人.qq微博.搜狐.qq空间等分享 即时分享: 默认加载插件,即启动全部分享 定制分享:通过参数配置.静态数据配置 由你决定何时分享,如何分享 扩展: 通过数 ...

  3. EJB基础知识

    本人博客文章网址:https://www.peretang.com/basic-knowledge-of-ejb/ 什么是EJB 可移植的, 可重用的, 可伸缩的业务应用程序的平台 为什么选择EJB ...

  4. Java 中Calendar、Date、SimpleDateFormat学习总结

    在之前的项目中,经常会遇到Calendar,Date的一些操作时间的类,并且总会遇到时间日期之间的格式转化问题,虽然做完了但是总是忘记,记不清楚,每次还都要查找资料.今天总结一下,加深印象. Cale ...

  5. Linux命令 用户管理命令

    groupadd [功能说明] 新建用户组 [语法格式] Groupadd[-f][-r][-g<GID><-o>][组名] [选项参数] 参数 说明 -f 建立已存在的组,强 ...

  6. head first python helloword

    如何使用python 打出hello word 在python shell 键入print 'hello word'( python 2) or  print ("hello word&qu ...

  7. 数列[专杀Splay版]

    时间限制: 3 Sec  内存限制: 128 MB提交: 49  解决: 7 题目描述 输入一个数列,你需要进行如下操作:  1. 把编号为I的数值改为K  2. 输出从小到大排序后第k个数 输入 输 ...

  8. 使用 Socket.IO 开发聊天室

    前言 Socket.IO 是一个用来实现实时双向通信的框架,其本质是基于 WebSocket 技术. 我们首先来聊聊 WebSocket 技术,先设想这么一个场景: · 用户小A,打开了某个网站的充值 ...

  9. 手把手教你从基础学习JQuery

    JQuery JQuery 语法 1.jQuery("选择器").action();通过选择器调用事件函数 但jQuery中,jQuery可以用$代替,即$("选择器&q ...

  10. uwp版的音乐播放器练手

    UWP项目之音乐播放器 这个项目本来是我女朋友的一个小作业,她做不出来,结果只能是我来代劳.经过几天的时间虽然赶出来了,但是自己不是很满意,还有很多不满意的地方,因此决定在最近的一段时间内,重新完成. ...