<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. 在容器中利用Nginx-proxy实现多域名的自动反向代理、免费SSL证书

    在个人的小项目或者测试环境中,配置反向代理显得十分繁琐,而借助 Nginx-proxy 的镜像,即使是小白,也能快速实现域名转发. 1.域名.IP自动转发 在开始之前,首先黑进了自家的路由器,将某个域 ...

  2. poi jsp xls

    poi jsp xls <%@ page language="java" pageEncoding="UTF-8"import="java.ut ...

  3. Java IO流--练习

    1)将若干个Student对象,若干个Teacher对象,写出到d:/0404/a.txt中 2)将该文件中所有Student对象反序列化回来装入List, 所有的Teacher对象反序列化回来转入另 ...

  4. 在ie下，a标签包被img的时候，为什么有个蓝色的边线

    效果像下图这样 那是由于<img>在ie下有默认边框,只要清除边框就可以了,在style中定义 img{ border:none } 显示效果就变成下面这样了 完!

  5. cpp(第十七章)

    1.baseic_ostream<charT,traits>& write(const char_type *s,streamsize n),cout.write()第一个参数提供 ...

  6. axis调用webservice的简单方法

    package com.service; import org.apache.axis.client.Call; import org.apache.axis.client.Service; publ ...

  7. 关于iphone点击readonly的input虚拟键盘不消失的情况

    今天遇到了一个比较棘手的问题,事情是这样的: 咱有一个添加地址的页面,大概长这样: 收货地址后那个"请选择收货地址"是一个readonly的input, 咱一进页面,直接点击这个& ...

  8. 用户权限模块之oauth2.0

    主要是在springsecurity上面扩展即可,所以内容也是基于上一个, sql: CREATE TABLE `auth_access_token` ( `id` int(11) NOT NULL ...

  9. css样式表的选择器与分类

    css 样式表的作用: 主要用于结构,样式与行为,CSS主要的作用就是美化网页的一个语言,它的特点: 1.结构与样式分离的方式,便于后期维护与改版; 2.样式定义精确到像素的级别; css样式表的结构 ...

  10. 快速排序（Quicksort）的Javascript实现

    日本程序员norahiko,写了一个排序算法的动画演示,非常有趣. 这个周末,我就用它当做教材,好好学习了一下各种排序算法. 排序算法(Sorting algorithm)是计算机科学最古老.最基本的 ...