function (e){ //其实我一开始也不知道用啥 //console.log(e)我们可以打印一下 //然后通过观察看他里面的变量哪个再上滚下滚时候不同...//可以通过这传入值e.deltaY的正负来判断 //deltaY大于0为下滚,deltaY小于0为上滚 } window.onmousewheel
鼠标滚动上下翻页效果是一种常见的网页交互设计,它使得用户可以通过鼠标滚轮的滚动来实现页面的上下翻页操作。...2)鼠标滚动的动态面板 因为我们要实现鼠标滚动的交互,一般的元件没有鼠标向上滚动和向下滚动的交互,所以我们要用动态面板来制作,只有动态面板有这个交互。...这里我们要在动态面板内矩形上增加一个锚点,可以用透明的矩形去中,把锚点放在矩形中间的位置就是高10000点的位置,然后让滚动条默认滚动到中间锚点的位置,这样向上向下滚动都没有问题了。...3)动态面板载入时 前面讲到我们设置了中部锚点,要让滚动条默认滚动到中间锚点的位置。所以在载入时,我们要用滚动到锚点的交互,让滚动条滚动到中部的位置。...为了防止这种情况,我们可以默认把开关控制值设置为1,这样图片就不会切换了,然后我们等待1毫秒,等待滚动到中部结束,然后用在开关控制值设置为0,打开开关。
Ctrl+H 将 z 值移动到指针。 将选定折点的 z 值移动到指针的高程。保留 x 值和 y 值。这仅在启用立体模式时可用。 Ctrl+G 移动指针 z 值。 将指针 z 值移动到所选折点的高程。...加号 (+) 或 Ctrl+滚动鼠标滚轮 放大。 放大该地图。 减号 (-) 或 Ctrl+滚动鼠标滚轮 缩小。 缩小地图。 Z+水平移动光标或 Z+滚动鼠标滚轮 更改 z 值。...要增加 z 值,可向后转动鼠标滚轮或按 Z 键同时将指针向右侧拖动。要减小 z 值,可向前转动鼠标滚轮或按 Z 键同时将指针向左侧拖动。...Shift+Z+水平移动光标或 Shift+滚动鼠标滚轮 加快 z 的变化速度。 按住 Shift 并转动鼠标滚轮。...Caps Lock+Z+水平移动光标或 Caps Lock+滚动鼠标滚轮 减慢 z 的变化速度。 按住 Caps Lock 并转动鼠标滚轮。
我们需要开发一个类似微信聊天框的交互体验:每当聊天框中展示新消息时,需要将聊天框滚动到底部,展示最新消息。...如果在 web 什么也不做,聊天体验可能是这样的,需要用户手动滚动到最新消息:试想一下如何在 web 中实现微信的效果。每当聊天框中接收到新消息时,都需要调用滚动方法滚动到消息底部。...滚动条怎么跑到左边,并且滚动行为和鼠标滚轮的方向反了,滚轮向上滚,聊天框却向下滚。...(让人想起了 MacOS 连鼠标滚轮的反人类体验)查阅文档发现 CSS 有个 direction: rtl; 属性可以改变内容的排布的方向。这样我们就可以把滚动条放回右边了。...然后在通过监听滚动事件,改变滚动方向就可以恢复鼠标滚轮的滚动行为。
前言其实想要实现功能很简单,就是在一张图片上监听鼠标滑轮滚动的事件,然后根据上滚还是下滚实现图片的缩放。...mousewheelmousewheel鼠标滚轮,显而易见动动鼠标滚轮就能触发事件,但是用光标拖拽滚动条就不能触发事件。...有火狐鼠标滚轮兼容问题。onmousewheelonmousewheel事件:会在鼠标滚轮滚动的时候被触发,对鼠标滚轮是否滚动进行判断,但是火狐浏览器不支持这个属性。...event.wheelDellta:可以用来获取鼠标的滚动方向,对于得到的值,只看正负,往上滚是正值,往下滚是负值。...在页面有滚动条的时候,滚动条会随着鼠标滚轮滚动而滚动,这是浏览器的默认行为,可用return false来取消浏览器的默认行为。有火狐鼠标滚轮兼容问题。
本文简介 点赞 + 关注 + 收藏 = 学会了 在 《Fabric.js 使用纯色遮挡画布(前景色)》 中讲到使用纯色的方式遮盖画布。...而纯色的话就不需要管色块的尺寸,移动到哪,怎么缩放都是全屏(整个画布)纯色。...覆盖 let rect = new fabric.Rect({ width: 80, height: 80, }) canvas.add(rect) // 通过鼠标滚轮缩放画布...canvas.on('mouse:wheel', opt => { const delta = opt.e.deltaY // 滚轮,向上滚一下是 -100,向下滚一下是 100...if (zoom > 20) zoom = 20 if (zoom < 0.01) zoom = 0.01 canvas.zoomToPoint( { // 关键点
在画板区域单击鼠标右键可以调出标尺和网格线背景。 ? 从标尺向下或向右拖拽,可以调出参考线,右键锁定参考线。参考线可用于设置页边距,也可以用于排版等。...相关Tips: 按住Alt+鼠标滚轮可以直接放大或缩小界面 按住Ctrl+鼠标滚轮可以左右移动画板 双击抓手工具可以直接恢复到原始界面大小 双击画板工具出现画板选项界面 放大镜工具使用的同时按住空格键可以切换抓手工具...二者的区别是,铅笔工具更自由,可以随心所欲直接画,然后再调整每个点的弯曲程度;钢笔工具可以更加细致,添加和减少锚点。 ? 除了曲线之外,工具栏中也有直线工具可以画直线。...我们通过这一点,可画出简单的DNA双螺旋分子,主要步骤见下图和视频。 首先画一条直线,设置效果-波纹效果 ? 调整隆起大小-波纹数量-平滑度 ? 对象-扩展外观-进一步修改颜色和线条粗细等 ?...以上图中的双螺旋分子为例,将其编辑好,全选右键编组后,拖动到画笔框里,选择添加图案画笔,设置完成后,任意画一条直线,然后单击新建的自定义图案画笔,就可以生成一条任意形状的DNA分子链。 ?
,移动,松开事件 鼠标滚轮事件----onmousewheel----火狐不支持,由DOMMouseScroll替代 判断滚轮上滚还是下滚----火狐不支持,由detail替代 取消滚动条随滚轮移动的默认行为...div,那么就让鼠标呆在点击出,而不是跑到左上角,计算出div在每次鼠标点击时需要的偏移量即可 ---- 鼠标滚轮事件----onmousewheel----火狐不支持,由DOMMouseScroll...替代 d1.onmousewheel=function() { alert("鼠标滚轮滚动了"); }; //为div绑定一个鼠标滚轮事件...addEventListener("DOMMouseScroll",function(){ alert("鼠标滚轮"); },false) ---- 判断滚轮上滚还是下滚----火狐不支持,由...("d1"); //为div绑定一个鼠标滚轮事件 addEventListener("DOMMouseScroll",function(event){ //判断滚轮向上滚
二、几种可能的方法 方法1 用鼠标滚轮回滚到 20 页,把图片理解一遍之后,再回到 100 页继续看。这个方法是比较笨拙的,非常浪费时间。如果看了几行内容还想再看一下图片怎么办?再滚动鼠标往回滚?...此时,你可以用鼠标把这个贴图拖动到屏幕的任意地方,也可以通过滚轮来放大或缩小贴图,如果需要多个图片、代码混合着学习,可能就是类似这样的桌面: ?...可以把所有相关部分的信息全部在一个屏幕上展示,不用来回切换,通过鼠标的滚轮来缩放也非常方便。如果某个贴图不用了,直接选中后按下 Esc 键即可丢弃。
/images/bg.jpg', img => { canvas.setBackgroundImage(img) canvas.renderAll() }) // 监听鼠标滚轮缩放事件...canvas.on('mouse:wheel', opt => { const delta = opt.e.deltaY // 滚轮,向上滚一下是 -100,向下滚一下是 100...this.canvas.zoomToPoint( { // 关键点 x: opt.e.offsetX, y: opt.e.offsetY...}, zoom // 传入修改后的缩放级别 ) }) 复制代码 使用 mouse:wheel 监听鼠标滚轮滚动,如果向上滚动,deltaY 的值是100,向下就是...zoomToPoint 可以理解为 setZoom 的增强版,第一个参数是原点坐标,本例传入鼠标当前所在的坐标;第二个参数是缩放级别。 代码仓库 ⭐Fabric 滚轮缩放画布
本文会添加滚轮缩放画布、拖拽画布等功能来测试 “锁定背景图” 的效果。 应该可以清晰看出,不管如何拖拽和缩放画布,背景图都纹丝不动。...添加滚轮缩放 使用滚轮缩放画布,需要监听 mouse:wheel 。...// 省略部分代码 canvas.on('mouse:wheel', opt => { const delta = opt.e.deltaY // 滚轮,向上滚一下是 -100,向下滚一下是 100...** delta if (zoom > 20) zoom = 20 if (zoom < 0.01) zoom = 0.01 canvas.zoomToPoint( { // 关键点...拖拽包括鼠标点下,鼠标移动,松开鼠标这3个事件: 鼠标点下:mouse:down 鼠标移动:mouse:move 松开鼠标:mouse:up canvas.on('mouse:down', opt =>
(Button.left, 2) # 点击鼠标2下 # 鼠标滚轮 mouse.scroll(0, 2) # 滚动鼠标 监听鼠标 def on_move(x, y):...print(button) # 左右键(Button.left、Button.right、Button.middle) print(pressed) # 左键(left)、右键(right)、滚轮...(Button.middle)的按压状态(True,False) def on_scroll(x, y, dx, dy): # 监听鼠标滚轮 print('Scrolled {0}'.format...((x, y))) # 坐标 print(dx, dy) # dy(-1:下滚,1:上滚)dx(0) with Listener(on_move=on_move, on_click=on_click...ctr.scroll(0, 50) # 滚轮操作 #向上滚动50单位。 ctr.scroll(0, -50) # 滚轮操作 #向下滚动50单位。
anchor 锚记a标记是这个单词的缩写 arrow 箭头 auto 自动 appName 程序名 appCodeName 程序代号 appVersion 程序版本 appAgent 程序代理...line 线 last 最后一个 link 链接 left 左边 list 列表 length 长度 lowercase 小写 level 级别 M: mouseover 移动到元素上...mouseout 从元素上移开 mousemove 移动鼠标 mousewheel 在其他浏览器的滚轮事件 mousedown 鼠标按下事件 mouseup 鼠标抬起事件 margin 外边距 millimeter...onmouseout 在鼠标离开时 onmousemove 在鼠标移动时 onmousedown 在鼠标按下时 onmouseup 在鼠标抬起时 onkeydown 在按键按下时 onkeyup在按键抬起时...previousElementSibling 返回上一个兄弟元素 password 密码 position 位置 prepend 预先 padding 内边距 progress 进度 point 点
onhashchange: 当窗口的锚点哈希值发生变化时触发。 鼠标相关 onclick: 当点击页面时触发。 onmouseup: 鼠标按键被松开时触发。...onmouseout: 鼠标移出窗口时触发。 onmouseover: 鼠标移动到窗口时触发。 onauxclick: 指示在输入设备上按下非主按钮时触发,例如鼠标中键。...onmouseenter: 当鼠标指针移动到元素上时触发。 onmouseleave: 当鼠标指针移出元素时触发 onmousemove: 鼠标被移动。...onmouseover: 鼠标移到某元素之上。 onmouseout: 鼠标从某元素移开。 onmouseup: 鼠标按键被松开。 onwheel: 该事件在鼠标滚轮在元素上下滚动时触发。...onhashchange: 该事件在当前URL的锚部分发生修改时触发。 onload: 一张页面或一幅图像完成加载。
最近来个需求,要做一个页面,每个模块都是百分百全屏且右侧有个导航栏能自动感应在哪个模块,点击也能直接跳转到该锚点。 其实难点也就那几个,慢慢捋一下就好,话不多说上代码!!...1、锚点跳转且点击哪个会模块右侧导航栏就会高亮 我这个导航栏是因为未来增加模块以免还要自己手动加了就直接调接口循环了,如果是固定的直接写死也行,看见那个:key=“key”了没,对,你想的没错,跟那个没关系...2、关于翻页自动感应 思路 前面说了,我们是使用index来控导航栏中哪个模块高亮的 当鼠标往下滚动时让整个页面往下滚动整个页面的高度且index加一反之减一 具体实现 mouseWheel(e) { if (e.wheelDelta || e.detail) { if (e.wheelDelta > 0 || e.detail < 0) { // 当鼠标向上滚动时触发...} if (e.wheelDelta 0) { // 当鼠标向下滚动时触发 } } } 在最外层容器中加入这个鼠标触发事件 然后就可以监听鼠标滚轮向上还是向下了
只要在代码左侧的gutter区域点右键,就会出现下图的菜单:勾选上Show Line Numbers即可。 ?...这种情况下,如果要从同一逻辑行的“第一行”移动到“第二行”,需要按gj,即先按g再按方向。虽然Vim提供了这个方法,但还是经常按错。...好消息是,启用了Use Soft Wraps的WebStorm不需要这样,直接按j就可以从同一逻辑行的“第一行”移动到“第二行”。...) with Ctrl+Mouse Wheel (Ctrl+鼠标滚轮改变字体大小),就OK了!...声明:本文由w3h5原创,转载请注明出处:《WebStorm 显示行号+自动换行+鼠标滚轮缩放设置》 https://www.w3h5.com/post/13.html
biHelp(帮助图标) Color : 背景颜色 BorderStyle:窗体外观与边界设置 Position:位置 Font:窗体中文字各个属性 Hint:窗体 Icon:窗体 ShowHint:鼠标移动到该组件上方时是否显示提示信息...OnMouseWheelDown:鼠标滚轮下滚触发 OnMouseUp:鼠标滚轮上滚触发 OnMouseWheel:鼠标滚轮滚动 OnResize:窗口或框架调整大小时。 OnPaint:窗口重画。...OnMouseDown:文本中鼠标每次按下 OnMouseUp:文本中鼠标每次抬起 OnMouseEnter:鼠标移进文本上方 OnMouseLeave:鼠标移出文本上方 OnEnter:鼠标光标进入文本...OnExit:鼠标光标离开文本 OnClick:鼠标点击文本 OnChange:每次键盘输入 Panel Visible:可视性 TMemo ScrollBars:滚动条设置 TabStop:Tab键...Flat:是否鼠标在突起显示,或作为普通按钮 Images:按钮的图像列表 DisableImages:按钮被禁用时的图像列表 HotImages:鼠标指向该按钮时的图像列表 ImageIndex:确定按钮显示的图像序号
效果实现:鼠标移动到该元素上,在元素上只要鼠标发生移动就会触发这个函数。 onmouseenter //鼠标进入元素操作 应用场景:一般是需要介绍一个元素信息,但是不需要实时获取的时候。...效果实现:这里可能很多的人没有具体的追究过和leave的区别,这里需要说明的一点是leave是离开范围的时候,但是out是离开元素的时候,怎么看出来呢?...onmousewheel //滚轮滚动的时候触发 应用场景:需要滚轮操作的时候 效果实现:将鼠标移动到该元素的区域,这个时候滚动您的鼠标的滚轮,就会触发函数。...效果实现:将鼠标移动到该元素的区域,这个时候按压键盘上的任意键位,均可以触发,那么numlock如果关闭的时候,数字键是不是可以呢?...效果实现:将鼠标移动到该元素上面,这个时候按压任意键位并放开就会触发,这个时候如果您的输入法是中文的,那么放开会不会触发呢?会的,只要您的键位放开了,不管是不是系统按键,都是可以触发的。
而UGUI没有图集的概念,可以充分利用资源,避免重复资源 UGUI出现了锚点的概念,更方便屏幕自适应 NGUI支持图文混排,UGUI暂未发现支持此功能 UGUI没有UIWrap来循环scrollview...属性 Pos:控件轴心点相对于自身锚点的位置。 Anchor锚点:UI元素的四个顶点与锚点的间距保持不变。锚点总是相对于父级,不能超越父物体范围。.../Max Value 最小/最大值 Whole Numbers 整数数值 Value 数值Scrollbar(滚动条) 属性 Size 手柄大小 Number of Steps 从开始滑动到末尾的步骤...面板) 简介 就是一张透明度为100的ImageScroll View(滑动视图) 属性 ViewPort Content 用来存放内容 ScrollBar Horizontal 水平的滚轮...ScrollBar Vertical 垂直的滚轮 Visiblity 层级显示 Spacing 间隔
A --全选 T -- 隐藏坐标菜单栏 大键盘上的1 是点模式,2线模式 3面模式 CTRL + ALT +Q --- 切换四维视图 SHIFT + C ---游标返回到世界原点 SHIFT +S --...默认围绕z轴,按住R后按ctrl 5度5度的选择 ,按住R后按shift是旋转的很轻微) 围绕X轴旋转 -- 先按r 再按x 围绕Y轴旋转 -- 先按r 再按y 选中多个物体 -- 是shift+鼠标左键...,取消选中也一样(会按2次) 整个屏幕的旋转--按住鼠标中间的滚轮 放大或者缩小--移动鼠标中间的滚轮 平移 -- shift + 按住鼠标中间的滚轮 复制物体 -- shift +d L --- 选择相关联的边...(在鼠标指向的面按L会选择与这个面有关的面), Y -- 拆面 F -- 填充面 G--移动 Ctrl + R ---环切循环边并可移动循环边(加滚轮调制段数) ALt + 点击一段线 --- 选择循环边...2个都选中移动到一个地方,选中立方体按左边的移动菜单,把立方体往下移动 ,露出贝塞尔曲线,先选中贝塞尔曲线再选中立方体 ,切换到编辑模式 点击投影映射,选中切割后的一个面,沿法线挤出,就成了一个沙发,