Js实战之方块大小随着滚轮的上下滚动而改变大小

方块大小随着滚轮的上下滚动而改变大小

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title><style type="text/css">#box1 {width: 100px;height: 100px;background-color: aquamarine;}</style><script type="text/javascript">/*** 实现鼠标滚动控制方块的大小*/window.onload = function () {var box1 = document.getElementById("box1");//获取方块对象box1.onmousewheel = function (event) {//为方块绑定一个滚轮滚动事件，但是此事件不支持火狐浏览器event = event || window.event;/*判断滚轮的上下滚动：1、普通浏览器event.wheelDelta：向上为正，向下为负2、火狐浏览器；event.detail：向上为负，向下为正*///判断滚轮滚动的方向if (event.wheelDelta > 0 || event.detail < 0) {//滚轮向上滚动box1.style.height = box1.clientHeight - 10 + "px";} else {//滚轮向下滚动box1.style.height = box1.clientHeight + 10 + "px";}//取消addEventListener的默认行为，将语句转换为判断，如果有则执行，没有则不执行event.preventDefault() && event.preventDefault;//这样做是为了兼容IE8，因为在IE8中不支持event.preventDefault()//取消浏览器的默认行为return false;}bind(box1, "DOMMouseScroll", box1.onmousewheel());//在火狐浏览器上实现滚轮事件}function bind(obj, eventName, callback) {if (obj.addEventListener()) {//如果浏览器支持addEventListener函数obj.addEventListener(eventName, callback, false);} else {//如果不支持addEventListener,IE8及以下obj.attachEvent("on" + eventName, function () {callback.call(obj);});}}</script>
</head>
<body style="height: 2000px;">
<div id="box1"></div>
</body>
</html>

Js实战之方块大小随着滚轮的上下滚动而改变大小相关推荐

iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 记录日志
为什么80%的码农都做不了架构师?>>> 沪江CCtalk视频地址:https://www.cctalk.com/v/15114923883523 log 日志中间件最困难的 ...
【Unity3D实战】方块跑酷初级开发实战（一）
[Unity3D实战]方块跑酷初级开发实战(一) 欢迎大家来到LDS的博客,今天开始我们讲解一下跑酷类游戏的基本操作,本文为原创,视频请观看[ http://www.mkcode.net/html/u ...
《Ember.js实战》——2.3　计算属性
本节书摘来自异步社区<Ember.js实战>一书中的第2章,第2.3节,作者:[挪]Joachim Haagen Skeie(乔基姆•哈根•斯基)著,更多章节内容可以访问云栖社区" ...
iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 处理静态资源
视频地址:www.cctalk.com/v/151149238- 处理静态资源无非花开花落,静静. 指定静态资源目录这里我们使用第三方中间件: koa-static 安装并使用安装 koa-st ...
iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 路由koa-router
路由koa-router--MVC 中重要的环节:Url 处理器 ?? iKcamp 制作团队原创作者:大哼.阿干.三三.小虎.胖子.小哈.DDU.可木.晃晃文案校对:李益.大力萌.Au.DDU. ...
js前面代码出错继续运行_Node.JS实战41：让命令行变的五颜六色
通常情况下,命令行文字都是黑底白色的: 想不想来点改变? 给文字换个颜色:给背景换个颜色. 先来看段代码: console.log('[31m Hello www.JShaman.com [0m'); ...
vue.js实战——购物车练习（包含全选功能）
vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...
js 查错_7年前端开发经验的我，写了本Vue.js实战开发，开源高清PDF下载
Vue作为目前发展最迅速的前端框架越来越多的受到前端T程师青睐,Vue社区也是Web前端最活跃的社区之一. 更多的公司在转为Vue框架,但针对Vue优秀权威.实战的图书相对欠缺,梁灏著<Vue. ...
vue --- vue.js实战基础篇课后练习
练习1:在输入框聚焦时,增加对键盘上下键按键的支持,相当于加1和减1 练习2:增加一个控制步伐的prop-step,比如设置为10,点击加号按钮,一次增加10 思路: // 考虑到子模板的复用性,即在 ...

Js实战之方块大小随着滚轮的上下滚动而改变大小

方块大小随着滚轮的上下滚动而改变大小

Js实战之方块大小随着滚轮的上下滚动而改变大小相关推荐

最新文章

热门文章