JavaScript鼠标滚轮控制左右移动

项目效果：

实现方法：

<!DECTYPE html>
<html>
<head>
<meta charset=‘utf-8’>
<title>onwheel-test</title>
</head>
<body>  <div id='out' style='width:500px;height:500px;overflow:auto'>  <div id='inside' style='width:1000px;height:1000px;background-color:gray;overflow:auto'>  </div>  </div>  <script type='application/javascript'>  var outDiv = document.getElementById('out');  outDiv.onwheel = function(event){  //禁止事件默认行为（此处禁止鼠标滚轮行为关联到"屏幕滚动条上下移动"行为）  event.preventDefault();  //设置鼠标滚轮滚动时屏幕滚动条的移动步长  var step = 50;  if(event.deltaY < 0){  //向上滚动鼠标滚轮，屏幕滚动条左移  this.scrollLeft -= step;  } else {  //向下滚动鼠标滚轮，屏幕滚动条右移  this.scrollLeft += step;  }  }/**// 如果要手动设置滚动条在Y轴方向的位置可以直接设置scrollTop,例如：outDiv.scrollTop = 500;// 如果要手动设置滚动条在X、Y轴方向的位置可以使用函数scrollTo,例如设置X轴滚动100，Y轴滚动400：outDiv.scrollTo(100,400);**/</script>
</body>
</html>

JavaScript鼠标滚轮控制左右移动相关推荐

html鼠标滑轮换图片,JavaScript实现鼠标滚轮控制页面图片切换
鼠标上的滚轮是一个不错的东东,为什么这么说,因为它能帮助我们快速的浏览网页,快速的进行长篇文章的阅读.对于web前端的我们来说又怎么能不注重这个鼠标滚轮呢,那么它能如何让用户更好的浏览网页呢?本文主要 ...
鼠标滚轮控制图片的放大和缩小
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
鼠标滚轮控制panel滚动条
在winform开发中,通过设置Panel的AutoScroll属性来控制滚动条是否显示,但显示滚动条的时候,鼠标的滚轮是无法控制Panel里面的滚动条的,只能控制Form的滚动条,当我们需要控制Pa ...
鼠标滚轮控制音量软件
简介: 当我们想要调整电脑的音量时,有时无法将其设置为我们需要的精确音量,只能调个大概,使用这款 tb-vol-scroll 软件可以帮助我们轻松控制电脑音量,通过用鼠标滚轮滑动的方式就能增大或减小音 ...
WPF 使用鼠标滚轮控制ListBox水平滚动条滚动
我们都知道在WPF中鼠标滚轮可以控制垂直滚动条滚动,但没有什么属性设置可以让它控制水平滚动条滚动,所以我们需要自己去实现水平滚动. 首先,在ListBox的Mousewheel事件中获得ListBox ...
svg html 鼠标滚轮交互,鼠标滚轮控制SVG线条动画
之前用D3制作图表是初次接触SVG,当时只顾感叹D3的强大了.后来当看到网站 Serio Verify 的时候,才意识到SVG用于制作可交互的页面动画是多么有意思. 于是自己也尝试在HTML页面中制作 ...
python字体大小快捷键_PyCharm（2019.1版本）用鼠标滚轮控制放大缩小字体
今天准备使用pycharm来编写scrapy爬虫,结果发现字体很小,习惯性用Ctrl+鼠标滚轮来控制字体大小,发现它竟然不听使唤,才想起来PyCharm是新安装的一直没用,赶紧来设置一番吧. 使用过p ...
在Unity使用键盘控制摄像机的移动以及用鼠标滚轮控制摄像机视野放大和缩小
首先在Unity中新建一个ViewControl的脚本,并把这个脚本挂载在主摄像机上面,然后复制下列的代码! using System.Collections; using System.Collec ...
js实现图片的放大缩小（鼠标长按拖拽、鼠标滚轮控制放大缩小）
系列文章目录文章目录系列文章目录背景与效果图 1.背景如下(功能图): 2.效果图如下: 拖拽后的效果缩放的效果放大的效果一.功能:支持鼠标长按拖拽 1.鼠标事件: 2.拖拽功能流程 3. ...

JavaScript鼠标滚轮控制左右移动

项目效果：

实现方法：

JavaScript鼠标滚轮控制左右移动相关推荐

最新文章

热门文章