文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

实现思路在js中，onmousewheel是鼠标滑轮滚动事件，可以通过这个事件触发来改变图片的大小，实现图片放大缩小功能。但是我们这里是vue所以使用的是：mousewheel。...div id="productDrawing"> div class="alert">温馨提示：查看图纸时滚动鼠标可以放大缩小div> div class="productDrawing_Img...全页面代码：可作为组件使用： div id="productDrawing"> div class="alert">温馨提示：查看图纸时滚动鼠标可以放大缩小div>...IE和Opera (Presto)仅支持属性和do不支持水平滚动。这wheelDeltaX属性值指示沿水平轴的属性值。当用户操作设备向右滚动时，该值为负。否则，也就是说，如果向左，则值为正。...火狐浏览器不支持这个方法，需要会用event.detail来获取滚轮的滚动方向，向上是负值，向下是正值。

3.8K20

深入常用CSS声明(一) —— Background

当背景图片设置为inherit时，表示继承自父容器的背景图片。如果父容器没有设置背景图片，默认为none。...scroll 背景图片相对于图片容器滚动，不随内容滚动 local 如果容器内容有滚动情况，背景图片相对于内容滚动，而与包含它的容器无关 这其中要理解的可能就是scroll和local的区别。...简单来说就是包含它的容器有没有设置固定尺寸，如果没有固定尺寸，那么内容区域和容器区域其实是相同的，这样scroll和local的表现其实相同；如果容器设置了一定的高度，此时内容出现了滚动条，然后我们在底部设置了一张背景图...而当我把容器尺寸改为：238 x 224时，会发现水平方向出现了9个星星， 图片被缩小；而改为237 x 224的时候，依然是8个星星，但是图片被放大。 ?...，那么另一个值为图片容器尺寸 若值为百分比，那么会根据图片容器尺寸先折算成具体尺寸，然后再根据比例计算另一边的尺寸 如果backgound-attachment为fixed时，图片容器尺寸为当前视图窗口

1.8K50
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    CSS | 视差滚动 | 笔记

    scroll 背景相对于元素本身固定，而不是随着它的内容滚动（对元素边框是有效的）。 对父元素 css_demo 设置 overflow: scroll， 当元素内容超出页面时滚动。...另一个物理效应是规模。 如果我们把一些东西移得更远，它就会显得更小。如果它更近，它会显得更大。 如果你想抵消这种调整，你需要自己扩大或缩小它。...perspective属性用在容器上时，容器内每个元素的表现形式会不一样。 当perspective属性用在容器内每个元素身上时，会根据各自的设置值进行表现。...在视差滚动中，"向内移动"和"向外移动"是相对于观察者（即浏览器窗口）的视角来说的。 当一个层的 translateZ 值为负时，它会向内移动，也就是朝向观察者的方向。...CSS: background background-position 参考: background-position - CSS：层叠样式表 | MDN 注意: 当两个值时, 依次为 background-position

    83721

    聊聊苹果营销页中几个有趣的交互动画

    ❞ 两个效果 翻盖效果 一个是屏幕慢慢打开的效果，在屏幕打开的过程中，「电脑图片」 是在屏幕中固定不动的，直到打开完毕或者关闭完毕的时候再让 「电脑图片」 随着滚动条滚动。 ?...缩放图片 开始时是一张全屏的图片，在滚动过程中慢慢变成另一张图片，接着这张图片以屏幕正中间为基准点慢慢缩小，在缩小的过程中，这张图是定在屏幕中央的，缩小到一定值的时候，图片随着滚动条滚动。 ?...当整个蓝色区域在红色区域中的时候，sticky 元素是没有粘性效果的（如图一）； 当慢慢的向上滑的时候，蓝色的盒子超过了红色的滚动元素，那么 sticky 元素就会在蓝色的框中向下滑，实现粘性效果（如图二...❞ 缩放图片 缩放图片到屏幕这个动画我们可以用两个方式实现，一个是 「滚动视差」 实现，一个是 canvas 在滚动过程中实时渲染图片。 开始之前我们来看一下没有放大的之前图，如下： ?...图片缩小 这里我们不使用 transform: matrix 来做这个放大缩小，我们使用 background-position 和 background-size 来进行图片的 「缩小/放大和偏移」

    1.9K60

    transform、transition方法详解及scale、zoom差异性说明

    /*水平方向、垂直方向缩小一半*/ transform: scale(0.5); /*水平方向缩小一半、垂直方向放大一倍*/ transform: scale(0.5, 2); 倾斜 使用skew方法来实现文字或图像的倾斜处理...，在参数中分布指定水平方向上的倾斜角度与垂直方向上的倾斜角度。...50px); /*只在水平方向移动50px*/ transform: translate(50px); CSS3动画过渡 Transitions 将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能...0.75，时缩放0.5。...changeScale(); // 改变页面大小时，进行动态判断控制 window.onresize = changeScale; 如在分辨率下1920 * 1080会缩放0.5，截图效果如下（注意，竖向滚动条

    4K21

    实现滚动时Header自动隐藏

    这是掘金网页版的头部，当滚动条向下滑动时，主header会隐藏，次级header会吸在页面顶部。...样式 首先，我们先通过两个 div 来模拟这两个header div class="main-header-wrapper"> div class="main-header...、滚动状态（到顶部/到底部）和是否在滚动 其中，函数返回的 directions 是一个 reactive 对象，我们对其进行监听，当该变量发生变化时，说明滚动方向发生了改变。...} else if (bottom) { isHidden.value = true } 是关键，当向上滚动时，显示header；向下滚动时，隐藏header。...你可能会发现在这段代码的上面，还有一段不明所以的代码： if (topArrived) { isHidden.value = false return } 当滚动条到顶部时，直接显示header

    2.4K30

    让div水平垂直居中的几种方法

    下面我们看一下使对象垂直集中的几种不同方法，以及它们各自的优缺点。 表格布局 这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align 属性。...当 wrapper 里没有足够空间时， content 不会被截断. 缺点： Internet Explorer(甚至 IE8 beta)中无效，许多嵌套标签(其实没那么糟糕，另一个专题)....> 优点： 适用于所有浏览器 不需要嵌套标签 缺点： 没有足够空间时，content 会消失(类似div 在 body 内，当用户缩小浏览器窗口，滚动条不出现的情况) 追加元素 这种方法，在 content.../div> 优点： 适用于所有浏览器 没有足够空间时(例如：窗口缩小) content 不会被截断，滚动条出现 缺点： 唯一我能想到的就是需要额外的空元素了，可能对于某些强迫症患者来说是不愿意的...缺点： IE(IE8 beta)中无效 无足够空间时，content 被截断，但是不会有滚动条出现 如何让文本水平垂直居中 css居中属性

    2.1K20

    【Web前端】“弹性盒子”一维布局系统（补充）

    div class="item">项目 3div> div> 我们创建了一个弹性盒子容器 ​​.container​​，并包含了三个子元素（弹性项目）。...当元素表现为 flex 框时，它们沿着两个轴来布局： 主轴（main axis）是指沿着弹性盒子（flex item）放置方向延伸的轴，可以是页面上的横向行或纵向列。...当父元素设置为 ​​display: flex​​ 时，它被称为弹性容器（flex container）。而在该容器中表现为弹性盒子的元素被称为弹性项（flex item）。 四、列还是行？...row-reverse：项目在水平方向上从右到左排列。 column：项目在垂直方向上从上到下排列。 column-reverse：项目在垂直方向上从下到上排列。...十一、Flex 嵌套 在实际开发中，我们经常需要将一个弹性盒子嵌套在另一个弹性盒子内。这样可以实现复杂的布局。

    14210

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

    首先，我们需要明白我们的滚轮是作用在谁的身上，根据实际需求来进行事件绑定，当我们鼠标移入可视区时，会触发滚轮事件，在移出可视区时则清除滚轮事件，接下来进行具体代码操作。...较之上篇的实现代码，本篇中增加了两个变量。 1.通过设置变量Judge来判断滚轮的滚动方向，当Judge为ture时，滚轮向上滚动，当Judge为false时，滚轮向下滚动。...var c = $('#cn').height() - $('#bx').height(); if (Judge) { // 当滚动向上滚动时，.../判断浏览器IE，谷歌滑轮事件 if (e.wheelDelta > 0) { //当滑轮向上滚动时 Judge = true;...if (e.detail) { //Firefox滑轮事件 if (e.detail> 0) { //当滑轮向上滚动时 Judge = false;

    2K80

    导航栏滚动吸顶并自动高亮和点击跳转锚点

    2021-01-16 07:37:33 在阿里云的云市场页面上有一个效果，就是api导航栏当滚动条滚动到其所在位置时，自动吸顶，当滚动到下方所在导航栏指定的介绍时，自动高亮其导航栏。...那么需要我们自己手动来实现以下，具体实现思路就是增加滚动条监听事件，当滚动到导航栏指定内容区域时，给其导航栏增加高亮样式，点击导航栏时，计算好滚动条的滚动距离，让其滚动过去即可。...的地址，因为当导航栏吸顶时，此处会因为空出位置，下面内容上移，而产生不和谐的效果，我们需要在其吸顶的同时增加一个div来占位，以增加平滑的效果。...active":""} onClick={()=>navClick(item.id)} >{item.name} 下面来看具体的实现逻辑 //先定义两个变量 /*上一次滚动条距顶部位置...isToTop = false;//点击锚点时滚动条是向上还是向下 //导航栏点击事件 function navClick(id){ let groupList =

    10.6K50

    CSS3转换(transform)基本用法介绍

    其属性值有： left —— 0% center —— 50% right —— 100% top —— 0% bottom —— 100% 前两个值同只有两个值时的用法相同。...(听起来好绕hhh，但其实不复杂，意思就是两个值对于x，y的顺序没有规定死，可以自定义，一个表示x轴，那另一个值必须得用y轴的。...值的大小在[-1,1]时，元素为缩放；大小在[-1,1]范围外时，为放大元素；当等于1时，什么都不做；当为负值时，执行点反射和大小修改。...效果：分别在x方向和在y方向放大or缩小一定的倍数，不同方向上的放大/缩小倍数可以不同。 参数： 三维：scale3d(sx, sy, sz) 参数：分别表示在横轴、纵轴、z轴的缩放大小。 5....skewX(a) 效果：水平拉伸，将元素每个点在水平方向上扭曲一定程度。 参数：是一个角度，表示用于沿着横坐标扭曲元素的角度。

    1.6K20

    JS简易整页滚动

    向下滚动时, 当 currentPosition 比 -整体分页高度 大的时候(绝对值相比小的时候), 向下滚动;向上滚动时, 当 currentPosition 大于 0 的时候, 向上滚动. /...= currentPosition - viewHeight container.style.top = currentPosition + 'px' } } // 向上滚动页面 function...currentPosition + viewHeight container.style.top = currentPosition + 'px' } } 3.节流函数 即在规定时间内只会触发一次指定方法, 用于滚动时防止多次触发...滚动事件firefox与其他浏览器的事件不同, 所以需要进行判断. deltaY大于0的时候, 想下滚动; 反之, 向上滚动. var handlerWheel = throttle(scrollMove...touch 的最终位置大于起始位置时, 则页面向上滚动; 反之, 向下滚动. var touchStartY = 0 document.addEventListener('touchstart', event

    15.7K31

    (转载非原创)CSS3转换(transform)基本用法介绍

    (听起来好绕hhh，但其实不复杂，意思就是两个值对于x，y的顺序没有规定死，可以自定义，一个表示x轴，那另一个值必须得用y轴的。...但如果俩都是值的话，那第一个是x，第二个是y) 三个值： 前两个值同只有两个值时的用法相同。 第三个值必须得是。表示Z轴偏移量。...缩放 (1) 语法 二维： scale(sx) 或 scale(sx, sy) 效果：分别在x方向和在y方向放大or缩小一定的倍数，不同方向上的放大/缩小倍数可以不同。...值的大小在[-1,1]时，元素为缩放；大小在[-1,1]范围外时，为放大元素；当等于1时，什么都不做；当为负值时，执行点反射和大小修改。...skewX(a) 效果：水平拉伸，将元素每个点在水平方向上扭曲一定程度。 参数：是一个角度，表示用于沿着横坐标扭曲元素的角度。

    49210

    javascript如何实现类似西瓜视频的视频队列自动播放？

    这里有一个很常见的例子，平时喜欢看短视频的朋友可能会注意到，我们在浏览某视频头条时，滚动视频列表，当某一个视频滚动到手机的一定位置时（一般可以看成是屏幕中心），该视频会自动播放，当移出指定区域后视频会自动关闭并播放移入指定区域的下一个视频...因为我们使用的是Dplayer，所以我们只要将其配置属性中的mutex属性设置为true（为true时会阻止多个播放器同时播放，当前播放器播放时暂停其他播放器）。...(%),为正值时代表扩大更元素的边距范围，负值代表缩小根元素的边距范围，这里我们应该缩小范围，所以rootMargin我们可以这么设置"-180px 0px -180px 0px",这样上下的边距就会缩小...> div> } export default VideoList 以上代码中VideoItem组件我们后面会介绍，现在有个问题是我们已经监听到了需要自动播放的视频元素，但是我们如何通知VideoItem...这里笔者实现思路是给VideoItem添加一个自定义属性，该属性的值就是当前video的src，我们在监听到某个视频元素需要播放时，我们可以获取到之前设置的自定义属性，然后作为prop传给VideoItem

    2.5K20

    使用Intersection Observer API实现视频队列自动播放

    这里有一个很常见的例子，平时喜欢看短视频的朋友可能会注意到，我们在浏览某视频头条时，滚动视频列表，当某一个视频滚动到手机的一定位置时（一般可以看成是屏幕中心），该视频会自动播放，当移出指定区域后视频会自动关闭并播放移入指定区域的下一个视频...因为我们使用的是Dplayer，所以我们只要将其配置属性中的mutex属性设置为true（为true时会阻止多个播放器同时播放，当前播放器播放时暂停其他播放器）。...为正值时代表扩大更元素的边距范围，负值代表缩小根元素的边距范围，这里我们应该缩小范围，所以rootMargin我们可以这么设置"-180px 0px -180px 0px",这样上下的边距就会缩小，当然大家也可以根据需求设置不同的值...> div> } export default VideoList 以上代码中VideoItem组件我们后面会介绍，现在有个问题是我们已经监听到了需要自动播放的视频元素，但是我们如何通知VideoItem...这里笔者实现思路是给VideoItem添加一个自定义属性，该属性的值就是当前video的src，我们在监听到某个视频元素需要播放时，我们可以获取到之前设置的自定义属性，然后作为prop传给VideoItem

    1.5K20

    《从案例中学习JavaScript》之实现网页版阅读器

    Paste_Image.png 当我滚动条往上滚动的时候，屏幕右下角会出现一个向上的箭头： ? Paste_Image.png 而往下滚动的时候，又自动消失。...Paste_Image.png 我们先把顶部图片引入进来，在引入图片之前，先画两个div来盛放图片。...引入向上的箭头图标 我们准备了一张半透明的箭头图标，现在将其引入。...实现思路也很简单，就是判断当前滚动条到底是向上滚动呢，还是向下滚动？...然后设置按钮的透明度就行了，这时候，我们需要对滚动条进行监听，如果向上滚动就显示按钮，否则隐藏按钮，实现代码如下： var justScrollTop = 0; //记录上一次滚动条距离顶部的位置 /

    1.3K60
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券