JavaScript一个鼠标滚动事件的实例
<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一个鼠标滚动事件的实例的更多相关文章
- 在FireFox浏览器上，用stopImmediatePropagation阻止冒泡鼠标滚动事件
楔子 是不是在火狐用stopPropagation不太满意 很久没有笑过又不知为何 既然不快乐又不喜欢这里 不如一路向西用stopImmediatePropagation(其实我对浏览器的兼容性看不顺 ...
- js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写
js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写 一.总结 一句话总结:滚动事件scroll(),浏览器窗口调整监听resize(),思考好监听对象. 1.滚动事件scroll()的监听对象是 ...
- JS鼠标滚动事件
-----------------------------//鼠标滚动事件以下是JS临听鼠标滚动事件 并且还考虑到了各浏览器的兼容----------------------------------- ...
- vue组件添加鼠标滚动事件
在一个组件标签上加鼠标滚动事件,应该写成 @mousewheel.native
- 鼠标滚动事件 - onmousewheel
1.Jquery-MouseWheel jquery默认是不支持支持鼠标滚轮事件(mousewheel) jquery MouseWheel下载:https://github.com/jquery/j ...
- IE和Chrome执行javascript对鼠标双击事件的不同响应
最近在用天地图API帮同学做点开发的工作,主要是基于天地图的API实现违法用地举报的在线地图标绘,要实现的效果如下: 由于是基于天地图API的TPolygonTool工具实现面积量测和多边形绘制功能, ...
- 解决ScrollViewer嵌套的DataGrid、ListBox等控件的鼠标滚动事件无效
C# 中,两个ScrollViewer嵌套在一起或者ScrollViewer里面嵌套一个DataGrid.ListBox.Listview(控件本身有scrollviewer)的时候,我们本想要的效果 ...
- 鼠标滚动事件兼容性 wheel、onwheel
wheelEvent = "onwheel" in document.createElement("div") ? "wheel" : // ...
- js监控鼠标滚动事件
//滚动动画 windowAddMouseWheel(); function windowAddMouseWheel() { var scrollFunc = function (e) { e = e ...
随机推荐
- Javascript创建类和对象
现总结一下Javascript创建类和对象的几种方法: 1.原始的创建方法: <script type="text/javascript"> var person = ...
- Bottle源码阅读笔记（一）：WSGI
前言 Bottle是一个Python Web框架.整个框架只有一个文件,不到4k行的代码,没有Python标准库以外的依赖,却包含了路由.模板和插件等Web框架常用功能.通过阅读Bottle源码来了解 ...
- WEB前端：浏览器（IE+Chrome+Firefox）常见兼容问题处理--02
兼容问题目录 8.IE6不支持固定定位 9.IE6下前面元素浮动,后面元素不浮动后他们之间会有间隙 10.IE6下双边距问题 11.IE67下父级有边框,子级有margin的话会不起作用 12.IE6 ...
- mac下sublime text3 安装px转rem插件
本人使用的是os-x系统,即mac系统,每次使用单位rem用其他网页转换很不方便.自己捣腾了一下插件,现在共享给大家 第一步: 先下载插件: https://github.com/narrow-gat ...
- mongo查询系统
首先,我们先向集合(collections)中添加测试文档(documents).如下: > for(i=1;i<=5;i++) db.test.insert({x:i,y:i*i,z:6 ...
- vscode中使用markdown
vscode中使用markdown vscode 是微软推出一款轻量级的文本编辑工具,类似于sublime,由于其拥有丰富的插件,安装使用也非常简单,所以深受广大程序员的喜爱. markdown 是一 ...
- 关于dedecms的操作
系统基本参数的配置 如图 上面是设置系统的基本参数 操作是进入系统后台>点击系统>点击系统基本参数 然后右边就是系统参数等等基本参数了 记住修改后要点击确定哟 ☺ 数据库备份 如图: ...
- 黄油刀ButterKnife的使用
1.ButterKnife是一个由JakeWharton写的开源框架,它使用注解处理将属性和方法和View绑定,以生成模板代码. 2.作用: @1通过使用@BindView 注释属性取消了findVi ...
- WKWebView 官方文档
WKWebView 类 一个WKWebView对象可以显示交互式的web内容.就像一个应用程序的浏览器.你可以使用WKWebView类嵌入Web内容的应用程序.这样做,创造一个WKWebView对象, ...
- ex2:逻辑回归及正则条件下的练习
EX2 逻辑回归练习 假设你是一个大学某系的管理员,你想根据两项考试结果来确定每个申请人的录取机会.你有以前申请人的历史资料以作为逻辑回归的训练集.对于每一个训练集,你拥有每个申请人的两项考试的分 ...