原生js实现通过鼠标滑轮改变元素大小

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {width: 100px;height: 100px;background: red;}</style>
</head>
<body><div></div><script>// 通过滚轮 向上 向下  改s变 div的宽度  ↑ 变宽  ↓ 变窄var div = document.querySelector('div');var h = 100;// var w=100;toWheel(div, function () {// this->divconsole.log(this)h += 5;//this重定向this.style.height = h + 'px';// this.style.width=w+'px';}, function () {h -= 5;this.style.height = h + 'px';// this.style.width=h+'px';})// toWheel(el,downFn,upFn)// el 添加滚动事件的元素// downFn 滚轮向下时执行的函数// upFn 滚轮向上时执行的函数// 谷歌  function toWheel(el, downFn, upFn) {el.addEventListener('mousewheel', function (e) {if (e.wheelDelta > 0) {// 向上//call实现重定向upFn && upFn.call(el)  //该方式可判断有没有传参 有传参继续往下执行} else {// 向下downFn && downFn.call(el)}})// 火狐el.addEventListener('DOMMouseScroll', function (e) {if (e.detail > 0) {// 向下downFn && downFn.call(el)} else {// 向上upFn && upFn.call(el)}})}</script>
</body>
</html>

javaScript实现通过鼠标滑轮改变元素大小相关推荐

Pycharm通过设置实现ctrl+滚动鼠标滑轮缩放字体大小
正常情况下,pycharm里面的字体大小需要设置才会改变,而不能直接用ctrl和鼠标滑轮来控制字体大小,这很不方便,这里和大伙分享通过设置就能利用ctrl+鼠标滑轮改变字体大小的方法. 首先,选择文件 ...
vue拖拽辅助线+改变元素大小组件
vue-dragline 项目根据react-dragline 改写为vue. github地址:https://github.com/BadMooncc/vue-dragline 支持拖拽辅助线,改 ...
transform并未改变元素大小等问题
transform并未改变元素大小等问题链接: https://segmentfault.com/q/1010000002557576. transform是在现有的元素上浏览器做的渲染,不会改变位 ...
js拖拽之二：实现拖动元素上下左右改变元素大小
具体原理参考 js拖拽一 <script> var oDiv = document.getElementById("div1"); oDiv.onmousedown = ...
idea pycharm设置鼠标滚轮改变字体大小的方法
【Python环境搭建】PyCharm鼠标滚轮改变字体大小等
设置方式 File->Settings->General 内建函数在Python Console里面输入dir(__builtins),可以显示所有的内建函数输入help(内建函数名) ...
php 页面拖动改变大小,鼠标拖动改变DIV等网页元素的大小的实现方法
1.初次实现 1.1 html代码 div change width by drag div change width by drag 1.2 js代码 var eleLeft = $('#myDiv ...
Vue+JavaScript实现鼠标滑轮滑动控制元素横向滚动
实现列表跟随鼠标滑轮滑动横向滚动第一步:父元素设置为 overflow-x: scroll(竖向同理) .scroll-box{width: 1000px;overflow-x: scroll; ...
盘点三个JavaScript案例——实现限时秒杀、定时跳转、改变盒子大小
前言今天来给大家盘点三个JavaScript案例,分别是实现限时秒杀.定时跳转.改变盒子大小案例,一起来看看吧! 一.实现限时秒杀案例 1.在淘宝网中,商家为了促销经常搞一些活动,例如限时秒杀是常见 ...

javaScript实现通过鼠标滑轮改变元素大小

原生js实现通过鼠标滑轮改变元素大小

javaScript实现通过鼠标滑轮改变元素大小相关推荐

最新文章

热门文章