热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

Axure教程——鼠标滚动缩放图片

在PC端,鼠标滚动缩放图片是我们经常会用到的操作滚动鼠标。本文作者分享了在Axure中实现鼠标滚动缩放图片效果的教程,一起来看一下吧。在PC端,鼠

在PC端,鼠标滚动缩放图片是我们经常会用到的操作滚动鼠标。本文作者分享了在Axure中实现鼠标滚动缩放图片效果的教程,一起来看一下吧。

在PC端,鼠标滚动缩放图片是我们经常会用到的操作滚动鼠标。本文作者分享了在Axure中实现鼠标滚动缩放图片效果的教程,一起来看一下吧。

Axure教程——鼠标滚动缩放图片

在PC端滚动鼠标,鼠标滚动缩小放大图片是我们常用的操作,所以今天作者就教大家如何在Axure中实现这个效果:

Axure教程——鼠标滚动缩放图片

原型地址:

那接下来我们就开始制作吧滚动鼠标

一、制作材料和思路分析

首先我们要准备一个图片,后续我们就是通过交互来放大这个图片的滚动鼠标

我们要做的操作是鼠标滚动放大图片以及鼠标拖动移动图片,那么我们需要的事件就是鼠标滚动时和鼠标拖动时,那在Axure里面就只有动态面板有这样的交互事件,所以这个效果就要用动态面板来制作滚动鼠标

展开全文

动态面板需要有滚动效果的话,里面必须要有元件,并且高度超过动态面板的高度,所以这时我们就需要在动态面板里放置一个透明的矩形,并且调出动态面板的垂直滚动条滚动鼠标

这时动态面板里就会出现滚动条,但是动态面只是用于制作滚动效果,不应该出现滚动条,所以我们需要将该动态面板再次转为动态面板,外面板比内面板小,这样就可以通过外面板遮挡住内面板的滚动条,同时内面板又具备滚动效果滚动鼠标

这里我们外面板的尺寸应该和图片一致;内面板的高和图片一致,宽可以设置大一点,直到看不到滚动条滚动鼠标。将动态面板放在图片的上方,如下图所示:

Axure教程——鼠标滚动缩放图片

动态面板里面的透明矩形的高度,我们可以自由设置,因为后续我们会通过scrollY函数,这个函数可以获取动态面板垂直滚动的距离,那么我们再根据动态面板的滚动的矩形来设置图片的大小滚动鼠标

所以矩形的高度就控制了图片能够放大的极限,我们可以通过控制透明矩形的高度来控制图片的最大尺寸滚动鼠标

最后我们还需要两个文本标签,默认隐藏,分别用来记录图片初始的宽度和高度(最小的尺寸)滚动鼠标

二、交互制作 1. 制作鼠标拖动图片的效果

鼠标拖动外面板时,我们用移动的交互,选择移动的对象为该动态面板和图片,选择跟随鼠标移动,这样就可以实现图片跟谁鼠标拖动的效果了滚动鼠标

Axure教程——鼠标滚动缩放图片

2. 制作鼠标滚动缩放图片

内面板滚动时,我们用设置尺寸的交互,我们设置图片的宽度为图片初始的宽度+动态面板滑动距离和图片处置高度的比值,再按照图片初始的宽度放大对应的倍数滚动鼠标

简单来说,就是滚动了几个图片高度的距离,就放大多少倍,例如图片宽高度都是300,如果动态面板里滚动了600,图片的宽度应该就变成300+300*600/300=900滚动鼠标

设置完宽度,我们再来看高度,高度就简单一点,就是图片初始的高度加上滚动的距离,例如图片高度是300,滚动了600,所以图片的高度就变成300+600=900滚动鼠标

Axure教程——鼠标滚动缩放图片

通过比例的方式可以让图片宽和高放大同样的倍数,这样图片就不会变形滚动鼠标

那这样我们就完成了鼠标滚动缩放图片的交互效果了滚动鼠标,以后使用时只需替换图片,调整填写尺寸,就可自动生成了滚动缩放的效果了,是不是很方便呢?

不过做到这里的话,还存在一个小的问题,就是图片放大的时候,动态面板内外面板没有跟着同时放大,所以就是导致放大后鼠标要在图片中部,就是动态面板原来的尺寸范围内才能通过滚动缩放滚动鼠标。不过做到这里我觉得也差不多了,如果感兴趣的同学也可以将面板按同样比例来缩放。

那以上就是鼠标滚动缩放图片的全部内容了,感谢您的阅读,我们下期见滚动鼠标

本文由 @Axure高保真原型 原创发布于人人都是产品经理,未经许可,禁止转载滚动鼠标

题图来自 Unsplash,基于 CC0 协议滚动鼠标


推荐阅读
  • 在 Angular Google Maps 中实现图片嵌入信息窗口的功能,可以通过使用 `@agm/core` 库来实现。该库提供了丰富的 API 和组件,使得开发者可以轻松地在地图上的信息窗口中嵌入图片。本文将详细介绍如何配置和使用这些组件,以实现动态加载和显示图片的功能。此外,还将探讨一些常见的问题和解决方案,帮助开发者更好地集成这一功能。 ... [详细]
  • 技术分享:深入解析GestureDetector手势识别机制
    技术分享:深入解析GestureDetector手势识别机制 ... [详细]
  • 本文详细解析了CSS背景属性的简写顺序,包括背景颜色、背景图像、背景重复方式、背景固定方式等关键要素,帮助开发者更好地理解和应用这一重要样式规则。通过具体示例和实际应用场景,文章深入探讨了每个属性在简写形式中的排列和作用,为前端开发提供了实用的参考。 ... [详细]
  • 本文详细介绍了利用JavaScript实现图片懒加载的有效方法。通过监听窗口的加载和调整事件,可以显著提升网页性能和用户体验。具体实现包括在 `window.onload`、`window.onresize` 和 `window.onscroll` 事件中动态加载图片,确保只有当图片进入可视区域时才进行加载,从而减少初始加载时间并提高页面响应速度。此外,还提供了一些优化技巧,如使用 Intersection Observer API 来进一步简化代码和提升效率。 ... [详细]
  • 微信小程序详解:概念、功能与优势
    微信公众平台近期向200位开发者发送了小程序的内测邀请。许多人对微信小程序的概念还不是很清楚。本文将详细介绍微信小程序的定义、功能及其独特优势。 ... [详细]
  • 深入解析 Android 中 EditText 的 getLayoutParams 方法及其代码应用实例 ... [详细]
  • 本文详细介绍了使用 Python 进行 MySQL 和 Redis 数据库操作的实战技巧。首先,针对 MySQL 数据库,通过 `pymysql` 模块展示了如何连接和操作数据库,包括建立连接、执行查询和更新等常见操作。接着,文章深入探讨了 Redis 的基本命令和高级功能,如键值存储、列表操作和事务处理。此外,还提供了多个实际案例,帮助读者更好地理解和应用这些技术。 ... [详细]
  • 本文深入解析了HTML框架集(FRAMESET)的使用方法及其应用场景。首先介绍了几个关键概念,如如何通过FRAMESET标签将主视图划分为多个独立的区域,每个区域可以加载不同的HTML文件。此外,还详细探讨了FRAMESET在实际开发中的优缺点,并提供了具体的实例代码,帮助开发者更好地理解和应用这一技术。 ... [详细]
  • 在JavaScript中,定位属性是理解元素布局的关键。本文通过详细的图示解析,介绍了这些属性的基础概念。以`clientHeight`为例,它表示元素的可见内容区域高度,不包括边距(margin)、边框(border)和滚动条。同样,`clientWidth`则表示元素的可见内容区域宽度。这些属性对于精确控制页面元素的尺寸和位置至关重要。 ... [详细]
  • 在 Vue 中,可以通过 `ref` 属性精确控制滚动条的位置。具体来说,使用 `ref` 获取 DOM 元素,并通过事件处理函数(如点击事件)来调整滚动条的滚动距离。需要注意的是,直接使用 `$refs` 可能不会立即生效,因此需要确保在适当的生命周期钩子或异步操作中进行操作。此外,结合 `nextTick` 方法可以确保 DOM 更新完成后再执行滚动操作,从而实现更稳定的控制效果。 ... [详细]
  • SQLite数据库CRUD操作实例分析与应用
    本文通过分析和实例演示了SQLite数据库中的CRUD(创建、读取、更新和删除)操作,详细介绍了如何在Java环境中使用Person实体类进行数据库操作。文章首先阐述了SQLite数据库的基本概念及其在移动应用开发中的重要性,然后通过具体的代码示例,逐步展示了如何实现对Person实体类的增删改查功能。此外,还讨论了常见错误及其解决方法,为开发者提供了实用的参考和指导。 ... [详细]
  • 解读插件常用前缀及其功能意义 ... [详细]
  • 地图集成方法与应用 ... [详细]
  • 在探讨C语言编程文本编辑器的最佳选择与专业推荐时,本文将引导读者构建一个基础的文本编辑器程序。该程序不仅能够打开并显示文本文件的内容及其路径,还集成了菜单和工具栏功能,为用户提供更加便捷的操作体验。通过本案例的学习,读者可以深入了解文本编辑器的核心实现机制。 ... [详细]
  • 深入解析JavaScript中的函数防抖与节流技术及其应用场景
    本文深入探讨了JavaScript中函数防抖和节流技术的原理及应用场景。通过详细的示例代码,全面解析了这两种优化方法在实际开发中的重要作用,为开发者提供了宝贵的参考和实践指导。 ... [详细]
author-avatar
Hello_DavidLeete_811
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有