开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

鼠标滚轮滚动时背景模糊

是一种常见的网页交互效果，通过监听鼠标滚轮事件，实现页面背景模糊效果的变化。这种效果可以提升用户体验，使页面看起来更加动态和生动。

背景模糊效果可以通过CSS的filter属性来实现。filter属性可以应用各种图形效果，包括模糊效果。在这种情况下，我们可以使用blur()函数来实现背景模糊效果。通过监听鼠标滚轮事件，可以动态改变filter属性的值，从而实现背景模糊的变化。

以下是一个示例代码，演示了如何通过JavaScript监听鼠标滚轮事件，并根据滚动方向改变背景模糊的程度：

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      height: 100vh;
      background-image: url("background.jpg");
      background-size: cover;
      transition: filter 0.5s ease;
    }
  </style>
</head>
<body>
  <script>
    var blurAmount = 0;

    function handleScroll(event) {
      if (event.deltaY > 0) {
        blurAmount += 1;
      } else {
        blurAmount -= 1;
      }

      document.body.style.filter = "blur(" + blurAmount + "px)";
    }

    window.addEventListener("wheel", handleScroll);
  </script>
</body>
</html>

在这个示例中，我们使用了一个背景图片作为页面的背景，并将其大小设置为cover，以使其充满整个页面。通过transition属性，我们为背景模糊效果添加了一个过渡动画，使其变化更加平滑。

在JavaScript代码中，我们定义了一个blurAmount变量来存储背景模糊的程度。在handleScroll函数中，我们根据滚动方向的不同，增加或减少blurAmount的值，并将其应用到filter属性上，从而实现背景模糊的变化效果。

需要注意的是，这只是一个简单的示例代码，实际应用中可能需要根据具体需求进行修改和优化。此外，为了实现更好的兼容性和性能，可以考虑使用CSS预处理器、动画库或者其他相关技术来实现更复杂的背景模糊效果。

腾讯云相关产品中，可以使用云服务器（CVM）来托管网页应用，使用云数据库（CDB）来存储数据，使用云存储（COS）来存储静态资源等。具体产品介绍和链接地址可以参考腾讯云官方文档。

希望以上内容能够满足您的需求，如果还有其他问题，请随时提问。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

mac用鼠标滚轮滚动方向相反_macbook触控板怎么滚动

iPad 用习惯了以后，在 Mac 上也喜欢把触控板的双指滑动滚动方向设成 “自然”模式，但是鼠标滚轮的滚动方向也随之反过来了。...估计很多苹果电脑用户和我一样希望触控板和鼠标滚动方向相反 …… 你可以试试 Scroll Reverser 这款软件。...启动 Scroll Reverser 后，点击 Mac 屏幕顶部菜单栏多出个图标，即可在下拉菜单里分别设置 Mac 鼠标和触控板的滚动方向了。...6 b8 q- @’ e6 N0 C% R 七度苹果电脑软件另外，如果多人共用一台苹果电脑，每个人的鼠标/触控板习惯又不一样，也可以用 Scroll Reverser 快速切换滚动方向设置。

2.6K1 0

c# dev控件 gridcontrol 数据跟随鼠标滚轮滚动也可以编辑

在绑定书到gridControl后经常发现：如果你设置了 this.gridView3.OptionsBehavior.Editable = false; 那数据可以跟随滚轮滚动，但如果你要复制某个单元格的数据时会发现不能复制...但如果你设置了 this.gridView3.OptionsBehavior.Editable = true; 那单元格数据是可以复制了，但又不能跟随滚轮滚动了，那问题来了：能不能即可以让数据跟随滚轮滚动又可以复制呢...我是这样做的：窗体加载时注册一个滚轮事件： private void OwlbmUseInStyle_Load(object sender, EventArgs e) {...this.gridView1.MouseWheel += new System.Windows.Forms.MouseEventHandler(this.gridView1_MouseWheel); } //滚轮事件设置单元格不可编辑

1K4 0

原生 JS 实现惯性滚动，给鼠标滚轮增加阻尼感，纵享丝滑

然而鼠标滚轮的传感器通常采用光电或机械的方式运作，由一个旋转轴和一个传感器组成，旋转轴通常无法做出细微的距离控制，使得距离检测更像是段落式的，这些信号在传输到计算机后，并不能实现丝滑的滚动。...可以通过以下例子感受两种滚动的差异：图片https://code.juejin.cn/pen/7272919488994279484本文将教会你如何让鼠标滚轮也能够丝滑地操作网页，带来更舒适的页面惯性滚动体验...实现原理首先需要利用 DOM 事件禁止鼠标滚动，转为 JS 控制。...，视频加载需要一点时间。...，但效果在鼠标操作时体验并不好，之前的卡顿感强烈，动画细节也容易丢失：图片现在加上这个惯性滚动，体验明显就好很多了，在线查看演示：https://code.juejin.cn/pen/7178839138609659959

1.5K4 1

【Java AWT 图形界面编程】使用鼠标滚轮缩放 Canvas 画布中绘制的背景图像 ( 绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放 + 以当前鼠标指针位置为缩放中心示例 )

一、鼠标滚轮缩放的中心点设置为当前鼠标中心点 - 要点分析 ---- 鼠标指针指向界面中的 Canvas 画布某个位置 , Canvas 画布中绘制着一张超大图片 , 以该位置为中心 , 滑动鼠标滚轮时进行缩放...; 使用鼠标滚轮缩放后 , 在 Canvas 中绘制的图片的尺寸肯定是放大或者缩小了 , 尺寸发生了改变 ; 图片缩放时 , 鼠标指针指向一个位置 , 该位置对应着一个当前 Canvas 画布中的 x..., 并设置图片位置 ; 这样图片缩放时 , 始终可以保证鼠标指向的部位保持位置不变 ; 1、保存当前鼠标指针指向的位置首先 , 在类中定义如下成员字段 , pointer_x 和 pointer_y...pointer_ratio_y = canvasY / imageHeight ; 完整代码示例 : /** * 记录滚轮缩放时鼠标指针状态 */ public void...startX += dx; startY += dy; } }); } /** * 记录滚轮缩放时鼠标指针状态

2.8K1 0

3-Ps基础(工具栏)

复制图层（Alt+鼠标）移动复制，按Alt键，鼠标变成双箭头跨文件复制，按住鼠标左键不放，拖动到另外选项卡上，需要向下拽后，鼠标变“+”加号，松开即可。...)> 4.按住鼠标放大缩小，按住Alt键，向前滚动放大，向后滚动缩小 (在首选项中勾选使用滚轮设置，就可以不按Alt键了) 5.用滚轮放大缩小。...Ctrl+K打开首选项，常规设置里面用滚轮缩放选区的取消 ? 滚轮缩放.png 5- 颜色（X） ? 前景色与背景色.png 默认前景色与背景色快捷键：D 颜色三要素：色相，饱和度，明度 ?...（Ctrl+ 删除键） 6- 新建相同大小文档在临摹文件时经常需要新建相同大小的文档，首先打开需要临摹的图像，Ctrl+A全选，确保选择背景，Ctrl+C（复制）然后Ctrl+N新建文档，发现尺寸相同了...变换选区 11- 羽化（Alt+S+M+F）将选区的边缘调整为柔边（模糊边缘）前期羽化选择选框工具，上面有羽化像素，直接输入数值即可

1.3K1 0

记一次PR处理视频

导入文件添加字幕第一步：添加文字第二步：对文字样式进行调整可以加个半透明的背景，使得文字更加清晰。第三步：文字居中对齐按住shift可以垂直移动。...第四步：拖拽字幕的时间轴与视频的时间轴等长，然后使用剃刀工具进行切割背景音乐淡入淡出第一步：鼠标放在音轨上，然后按住Alt键滚动滚轮第二步：打关键帧也可以直接调节锚点开头加入高斯模糊...第一步：在效果中搜索高斯模糊拖拽效果到视频开头，然后添加关键帧动画黑场开始新建调整图层将调整图层放在视频上部，然后对顶部、底部打上关键帧视频过渡拖动效果到两个视频中间...之后在关键帧上左右拖动，即可将关键帧一分为二，可以做出坡度效果倒放效果：按住Ctrl键，在关键帧上拖动即可多个音频音量一致框选音频，在基本声音面板中勾选“响度”，选择自动匹配导出文件导出的时候注意把滚动条拉满才行...滚动条在左下角

4261 0

jquery nicescroll 配置参数

div，默认值是9999 scrollspeed - 滚动速度，默认值为60 mousescrollstep - 高速滚动鼠标滚轮，默认值是40（像素） touchbehavior - 使光标拖动滚动像在台式电脑触摸设备...，显示“抢”图标的div touchbehavior = true时，（默认：true） autohidemode，如何隐藏滚动条的作品，真=默认/“光标”=只进游标隐藏/ false =不隐藏背景，...：20） preservenativescrolling，您可以滚动本机可滚动区域用鼠标，冒泡鼠标滚轮事件（默认：true） railoffset，您可以添加抵消顶部/左边的轨道位置（默认：false...：“底部”） enabletranslate3d，nicescroll可以使用CSS转换为滚动内容（默认：true） enablemousewheel，nicescroll可以管理的鼠标滚轮事件（默认...，检测内容底部，并让家长来滚动，作为原生滚动做（默认：true） enablescrollonselection，启用自动滚动的内容时，选择文本（默认：true）

4.1K8 0

Fabric.js 缩放画布 🍬

我还会在画布上设置一个背景图，便于观察。.../images/bg.jpg', img => { canvas.setBackgroundImage(img) canvas.renderAll() }) // 监听鼠标滚轮缩放事件...y: opt.e.offsetY }, zoom // 传入修改后的缩放级别 ) }) 复制代码使用 mouse:wheel 监听鼠标滚轮滚动...，如果向上滚动，deltaY 的值是100，向下就是 -100，所以可以自己设置一条公式来控制滚动时的缩放级别。...zoomToPoint 可以理解为 setZoom 的增强版，第一个参数是原点坐标，本例传入鼠标当前所在的坐标；第二个参数是缩放级别。代码仓库 ⭐Fabric 滚轮缩放画布

5.6K3 0

【Java AWT 图形界面编程】使用小键盘按键缩放 Canvas 画布中绘制的背景图像 ( 键盘按键监听 + 绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放 + 以当前鼠标指针位置为缩放中心示例 )

| 获取并绘制图片 | 鼠标拖动计算位移 | 画布偏移 ) 博客中 , 绘制了超大图像 , 可以使用鼠标拖动 ; 在【Java AWT 图形界面编程】使用鼠标滚轮放大缩小 Canvas 画布 ( 鼠标滚轮事件监听器...MouseWheelListener ) 博客中 , 新增鼠标滚轮缩放画布示例 , 但是使用鼠标拖动时 , 拖动的效果也随之缩放, 如缩小画布后 , 移动鼠标 , 移动距离对应的缩放效果也随之缩小...; 在【Java AWT 图形界面编程】使用鼠标滚轮放大缩小 Canvas 画布中绘制的背景图像 ( 鼠标滚轮事件监听器 MouseWheelListener | Canvas 中绘制图像并设置图像大小...) 博客中 , 使用缩放背景图像的方式 , 实现缩放效果，并同时福袋鼠标指针拖拽效果 ; 本博客中实现的案例 , 在上面的基础上 , 添加了鼠标滚轮缩放的中心点设置为当前鼠标中心点 ; 1、代码示例...startX += dx; startY += dy; } }); } /** * 记录滚轮缩放时鼠标指针状态

1.8K2 0

解决Android的ListView控件滚动时背景变黑博客分类： Android小技巧 AndroidGoogle

如果大家在非黑色背景下使用ListView控件时，Android默认可能在滚动ListView时这个列表控件的背景突然变成黑色。这样可能导致程序的黑色的背景和主程序的主题既不协调。...解决的方法Google在设计Android时也考虑了，在Layout的ListView中加入 android:cacheColorHint="#00000000" 的属性即可。

7691 0

macOS 上值得推荐的软件（第一弹）

它的长截图功能，比其他同类软件做的都要好，主要是对非纯色背景的支持很好，具体的细节，感兴趣的花可以看看下面这篇官方博客的介绍：Longshot、Xnip、iShot 滚动长截图功能比较 | Longshot...然而对于使用鼠标的用户来说，这个滚动方向需要反过来，才能更符合直觉。这是由于大多数人一开始接触的是 Windows 系统，使用鼠标的习惯沿袭了过来，让你向上推鼠标滚轮，总感觉怪怪的。...这款小工具就可以设置反转鼠标滚轮方向，让你鼠标操作更加符合先前的习惯。...与此同时，由于触摸板的滚动过于平滑，切换到鼠标后，会感觉滚动一顿一顿的，体验没有触摸屏的好，为此这款小工具提供了平滑滚动的功能，让你使用鼠标滚动时，跟使用触摸板一样顺滑。...这款软件的官网地址如下，需要的话可以自行下载：MOS | 一个用于在 MacOS 上平滑你的鼠标滚动效果或单独设置滚动方向的小工具, 让你的滚轮爽如触控板NetNewsWire - 一款免费开源的 RSS

2232 0

关于ScrollViewr和滚动轮劫持(scroll-wheel-hijack)

所谓的滚动轮劫持，简单来说即是在一个可以滚动的页面使用鼠标滚轮滚动页面的过程中鼠标进入某个可以滚动的子元素导致只在这个子元素中滚动而整个页面想滚滚不动了。具体看看这个例子： ?...这里面用到几个属性： MouseWheelEventArgs中的Delta表示鼠标滚轮的变更量，当这个值为正数时表示滚轮向上。 ExtentHeight，获取ScrollViewer内容的实际高度。...熟悉了上面几个属性的作用后我们可以更好地控制鼠标滚轮的行为，当鼠标向上滚动时，判断现在是否已经滚到顶了，如果是就不处理鼠标滚轮事件： if (VerticalOffset == 0 && e.Delta...>= 0) return; 而当鼠标向下滚动时，需要根据ViewportHeight、VerticalOffset和ExtentHeight判断当前是否已经滚动到底，如果是就不处理鼠标滚轮事件...如果觉得不满足还可以参考HandyControl的ScrollViewer，它直接提供了一个CanMouseWheel属性用于控制是否响应鼠标滚轮，另外还支持了滚动等功能。

1.3K3 0

Vue 实现图片监听鼠标滑轮滚动实现图片缩小放大功能

温馨提示：查看图纸时滚动鼠标可以放大缩小温馨提示：查看图纸时滚动鼠标可以放大缩小...,显而易见动动鼠标滚轮就能触发事件,但是用光标拖拽滚动条就不能触发事件。...有火狐鼠标滚轮兼容问题。onmousewheelonmousewheel事件：会在鼠标滚轮滚动的时候被触发，对鼠标滚轮是否滚动进行判断，但是火狐浏览器不支持这个属性。...在页面有滚动条的时候，滚动条会随着鼠标滚轮滚动而滚动，这是浏览器的默认行为，可用return false来取消浏览器的默认行为。有火狐鼠标滚轮兼容问题。

3.6K2 0

随心所欲的滚动条，远离产品汪（二）

滚轮事件及兼容问题概要在鼠标上，除了点击、拖拽等事件，当然也少不了滚轮事件了，但是比较有意思的一点是，平常大家碰到兼容问题首先想到了IE这个万年背锅侠，但是这次还真不是，火狐别树一帜的凑了一回热闹。...首先，我们需要明白我们的滚轮是作用在谁的身上，根据实际需求来进行事件绑定，当我们鼠标移入可视区时，会触发滚轮事件，在移出可视区时则清除滚轮事件，接下来进行具体代码操作。...1.通过设置变量Judge来判断滚轮的滚动方向，当Judge为ture时，滚轮向上滚动，当Judge为false时，滚轮向下滚动。...Y轴坐标 newY = 0, // 鼠标拖动时的Y轴坐标 nowY = 0, // 鼠标拖动时滚动条C距父级顶部的高度 maxY = 0,...// 拖动的最大极限值 nowDisY = 0, // 点击滚动条C时距父级顶部的高度 judge = 0, // 判断鼠标滚轮的方向

2K8 0

Fabric.js 居中元素 🎗️

阅读本文需要你有一定的 Fabric.js 基础，如果还不太了解 Fabric.js 是什么，可以阅读《Fabric.js 从入门到膨胀》创建基础项目为了方便演示，我在初始化画布的时：添加一个背景图...添加鼠标滚轮滚动时缩放画布（方便演示基于视窗和基于画布的区别）。添加鼠标拖拽画布平移位置（方便演示基于视窗和基于画布的区别）。...高度 60px originX: 'center', originY: 'center' }) // 将矩形添加到画布中 canvas.add(rect) // 滚轮滚动时可修改画布缩放等级...y: opt.e.offsetY }, zoom ) }) /* 拖拽画布 */ canvas.on('mouse:down', opt => { // 鼠标按下时触发...canvas.viewportTransform) // 设置此画布实例的视口转换 canvas.isDragging = false }) 复制代码代码有点多，但滚轮滚动时可修改画布缩放等级

3.6K2 0

PS如何把图片或者头像提取成线稿

对于漫画爱好者或者喜欢线稿的小伙伴，很多小伙伴都不具备绘制线稿的能力和时间，下面站长教大家如何通过PS软件制作线稿教学内容 PS快捷键按键盘的CTRL按键加鼠标滚轮可以左右滚动画布按键盘的ALT按键加鼠标滚轮可以放大缩小画布...新建图层：快捷键（Ctrl+J）反向：快捷键（Ctrl+I） 5、改为颜色减淡后图片就变成一张白色的，接着我们选择顶部菜单栏滤镜 >> 其他 >> 最小值打开设置 PS：此处也可以使用滤镜 >> 模糊...>>高斯模糊滤镜调整 6、在弹出的最小值选项框里面设置半径（根据线稿实际显示的效果调整半径，一般1px-3px左右），然后点击确定 7、调整最小值半径后的图片显示如下 8、选择顶部导航栏文件

2K2 0

问题探讨01：如何使用鼠标滚轮使单元格中的数值增减？

这个问题是，在某单元格中有一个数字，当鼠标滚轮向上滚动时该单元格中的数字以0.01的间隔增加，向下滚动时以0.01的间隔减少？探讨很显然，这需要使用Windows API来捕获鼠标事件。...(注：可按鼠标右键退出程序) ? 图1 我想要的是，当鼠标滚轮向前滚动时，单元格中的数值增加0.01，向后滚动时，减少0.01。...实现应用程序支持鼠标滚轮的关键是，捕获鼠标滚轮的消息 MSH_MOUSEWHEEL、WM_MOUSEWHEEL。...zDelta传递滚轮滚动的快慢，该值小于零表示滚轮向后滚动（朝用户方向），大于零表示滚轮向前滚动（朝显示器方向）。lParam指出鼠标指针相对屏幕左上的x、y轴坐标。...但是，当我使用HIWORD(wParam)时，程序却崩溃了！有没有哪位朋友在这方面有研究的，可否指教一下：如何捕捉鼠标滚轮的向前或向后滚动？

1.8K1 0

2.blender的基本操作与动画案例挑战

1.基本操作 1.按住鼠标中键，移动鼠标，即可对视角进行旋转 2.按住shift+中键，移动鼠标，即可对视角进行平移 3.前后滚动滚轮，即可实现视角放大缩小的推拉如果是之前使用过C4D或者maya的用户...3.镜头框大小和移动，取消勾选【锁定相机到视图方位】，中间滚轮可以放大缩小，按住shift+中键可以平移。 4.选定观察者视角为镜头视角。 ?...调整一个比较好看的观察者视角，然后将当前视角设置为摄像机视角Ctrl+Alt+0，通过滚动中键滑轮，将摄像机框，扑得满一点。点击N面板，点击【视图】勾选【锁定相机到视图】，调一下合适的尺寸。...8.背景虚化。如果希望有一个背景虚化的效果，选择摄像机，然后点击摄像机属性，勾选【景深】，点击【聚焦到物体】后面的取色器标志，然后再点击物体摩托车，背景就会变得虚化。...可能是因为背景素材图本身就比较模糊，所以感觉效果不是太明显。 ? 点击F12可以进行单帧渲染，等待渲染完以后，可以点击【图像】导出图片。 9.动画。本动画是通过移动摄像机的观察者视角来实现的。

2.4K3 0

有意思的水平横向溢出滚动

最近接到一个很有意思的需求，能否做到当内容横向溢出时，依然能够使用鼠标滚轮对内容进行滚动的方法。什么意思呢？...，是可以响应鼠标滚轮的：垂直方向溢出滚动的容器，正常响应鼠标滚轮，可滚动内容水平方向溢出滚动的容器，不会响应鼠标滚轮，不可滚动内容那么，这里可能就是一个用户痛点。...如果在一些特定场景下，确实有横向滚动的内容，譬如横向的图片内容展示等。又想使用鼠标滚轮对内容进行滚动，能否做到呢？...那是必须的，本文就将介绍一种可能可行的技巧，在特定场景下在水平方向溢出滚动的容器，依然可以用鼠标滚轮进行滚动。旋转大法是的，既然只有垂直方向的溢出，才能响应滚轮操作。那我们不妨从这个角度入手。...: scroll，一切表现正常，我们实现了横向滚动溢出，鼠标滚轮依旧生效！

2.5K1 0

在 Mockplus 2.1 （预览版）中使用滚动区

1、添加一个滚动区。为方便查看，可以设置一个背景色 2、双击编辑滚动区 3、点击滚动条两端的按钮可以扩展或收缩滚动区中的内容。在两端按钮按下的同时，按住Ctrl键，可以加速扩展或收缩。...可以使用鼠标滚轮滚动内容部分，也可以直接鼠标拖拽内容部分。按下Ctrl键，可以加速滚动内容

7901 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭