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 ...
随机推荐
- 使用babel编译es6
起因:开发中慢慢的学习使用es6,但是JavaScript需要浏览器来解析,而不是所有浏览器都支持es6,所以为了兼容es6,需要第三方工具进行编译es6. 工具:node,gulp,gulp-bab ...
- WebService入门实例教程
什么是WebService 通过使用WebService,您的应用程序可以向全世界发布信息,或提供某项功能,它是基于Web的服务,通过Web进行发布.查找和使用. WebService脚本平台需支持X ...
- CI Weekly #20 | 从持续集成的角度看 “云” 的价值
很多移动开发工程师对 fastlane 耳熟能详,最近 flow.ci 的 iOS 工作流「编译」这步已采用 fastlane gym 工具(iOS 应用打包签名自动化),进一步优化了构建打包速度.快 ...
- 基于Express+Socket.io+MongoDB的即时聊天系统的设计与实现
记得从高中上课时经常偷偷的和同学们使用qq进行聊天,那时候经常需要进行下载qq,但是当时又没有那么多的流量进行下载,这就是一个很尴尬的事情了,当时就多想要有一个可以进行线上聊天的网站呀,不用每次痛苦的 ...
- （转）Nginx的启动、停止与重启
启动 启动代码格式:nginx安装目录地址 -c nginx配置文件地址 例如: [root@LinuxServer sbin]# /usr/local/nginx/sbin/nginx -c /us ...
- javaSE_05Java中方法（函数）与重载、递归-思维导图
思维导图看不清楚时: 1)可以将图片另存为图片,保存在本地来查看 2)右击在新标签中打开放大查看
- NetCore WebSocket 即时通讯示例
1.新建Netcore Web项目 2.创建简易通讯协议 public class MsgTemplate { public string SenderID { get; set; } public ...
- [1] 插件架构(PLUG-IN)
网上的一种比较好对插件的定义是:插件(Plug-in,又称addin.add-in.addon或add-on,又译外挂)也称为扩展,是一种遵循一定规范的应用程序接口编写出来的程序,主要是用来扩展软件功 ...
- python制作pdf电子书
python制作pdf电子书 准备 制作电子书使用的是python的pdfkit这个库,pdfkit是 wkhtmltopdf 的Python封装包,因此在安装这个之前要安装wkhtmltopdf 安 ...
- ionic 的缓存 和局部刷新
最近两天在做项目时,发现ionic的缓存功能非常方便好用,提高了再低端手机特别是android比较低版本上的流畅性!可是,后来发现,整体的缓存整个页面并不是一个一劳永逸的办法,结合局部刷新功能,感觉就 ...