当前位置: 首页 > news >正文

【Axure教程】鼠标滚动上下翻页效果

鼠标滚动上下翻页效果是一种常见的网页交互设计,它使得用户可以通过鼠标滚轮的滚动来实现页面的上下翻页操作。这种效果通常应用于多图片、或长页面分页浏览的情况,使得用户可以方便地快速浏览内容,提高用户的交互体验。

今天作者就教大家如何在Axure中制作一鼠标滚动上下翻页的效果,我们会以鼠标滚动切换图片为案例。

一、效果展示

鼠标向上滚动时,切换查看上一张图片;

鼠标向下滚动时,切换查看下一张图片;

循环效果,如果在最后一张图片继续向下滚动,就会循环至第一张图片;如果在第一张图片继续向上滚动,就会循环值最后一张图片。

【原型预览】

https://axhub.im/ax9/ca3dd539f46dc856/#g=1&p=滑轮切换图片(上下滚动切换图片)

【原型下载】

方式1:加入原型分享群后,可免费分享该原型,请咨询微信522073109

方式2:https://weidian.com/item.html?itemID=3856417707

二、制作教程

1. 材料准备

这个模板我们主要用到中继器、图片元件、文本标签、矩形来制作。

1)图片的动态面板

我们先导入一张图片,导入后鼠标右键将图片转为动态面板,然后复制动态面板的状态,有几张图片就复制几个状态,在每个状态里一次打入对应的图片,这样图片的动态面板就完成了。

2)鼠标滚动的动态面板

因为我们要实现鼠标滚动的交互,一般的元件没有鼠标向上滚动和向下滚动的交互,所以我们要用动态面板来制作,只有动态面板有这个交互。

我们在动态面板里增加一个矩形,填充颜色为透明色,这样就不会遮挡与图片了。因为我们要做滚动的效果,所以动态面板里面的元件尺寸,一定要比动态面板高,这样才会出现滚动条。所以我们把矩形的尺寸设置为19998,2万是axure的极限,反正就是拉到最长,这样可以让他有足够的滚动空间。

动态面板调出滚动条,高度和图片一致,这里会默认看到滚动条,案例中的滚动条是默认隐藏的,所以我们需要用一个特殊的操作来隐藏,我们把动态面板宽拉大,直到滚动条在图片右侧,然后我们再次将动态面板转为动态面板,这样就多了一个外面板,外面板选择不显示滚动条,宽高和图片设置为一样,放在图片动态面板上方。这要就即可以有滚动效果,但是又不出现滚动条。

2. 设置交互

1)向下滚动的交互

鼠标向下滚动时,按理来说,我们只需用设置面板状态的交互,就能将图片设置到下一个页面。

但是我们在这中间遇到了问题,这样写了之后会发现,鼠标向下滚动,会有很多张图片切换,整个页面很乱。这里面的原因是因为鼠标向下滚动是一个持续值,有些人滚动一下可能持续0.1秒,有些人滚动一下可能1秒,就是没有办法一瞬间完成这个操作,导致这途中触发了多次事件。

为了解决这个问题,我们就要做一个开关来控制,我们用个隐藏的文本标签就可以了,默认值为0,如果值为0的时候,就是可以滚动切换的状态,一开始切换的时候,我们就要把开关的值设为1,然后在用设置面板状态的交互,设置到下一页,这里需要增加向上滑动的动画,动画时间可以自己设置,案例中是1秒。然后等待1秒时间,这里等待时间和动画时间应该一致。我们在把开关的值设置为0,这样就相当于重新打开开关可以继续滚动切换图片。

2)向上滚动的交互

鼠标向上滚动是的思路和交互和上面向上滚动是的交互基本是一致的,唯一需要改的就是设置动态面板从下一项变成上一项,动画效果从向上滚动变成向下滚动。

然后我们会发现有一个问题,就是一开开始进入,如果直接向上滚动时没有效果的,因为滚动条已经在顶部没办法向上滚动,只有先向下滚动后才能继续向上滚动。那如果一开始我们就想向上滚动该怎么办呢?因为设置了循环,理论上是可以向上滚动的。

这里我们要在动态面板内矩形上增加一个锚点,可以用透明的矩形去中,把锚点放在矩形中间的位置就是高10000点的位置,然后让滚动条默认滚动到中间锚点的位置,这样向上向下滚动都没有问题了。

3)动态面板载入时

前面讲到我们设置了中部锚点,要让滚动条默认滚动到中间锚点的位置。所以在载入时,我们要用滚动到锚点的交互,让滚动条滚动到中部的位置。这里也有一个问题,因为向下滚动的时候,就会触发向下滚动的交互,导致图片会不停滚动。

为了防止这种情况,我们可以默认把开关控制值设置为1,这样图片就不会切换了,然后我们等待1毫秒,等待滚动到中部结束,然后用在开关控制值设置为0,打开开关。

这样我们就制作完成了鼠标滚动上下翻页效果的原型模板了,下次使用时,只需要在动态面板里修改页面信息,替换图片,如果需要增加文字或者其他内容的话,也可以在动态面板对应状态里添加,添加完成后预览时就会自动生成效果了,是不是很方便呢?

那以上就是本期教程的全部内容,感兴趣的同学们可以动手试试哦,感谢您的阅读,我们下期见。

相关文章:

  • Qt 自定义日志类总结
  • 算法学习|动态规划 LeetCode 416. 分割等和子集
  • Scala泛型(泛型方法,泛型类,泛型特质,上下界,协变、逆变、非变)
  • C/C++字符串
  • 基于Python GDAL库实现图像的几何校正详细教程
  • SpringBoot接参注解与校验失败后的三种异常
  • 【C语言学习】变量和数据类型
  • 【Vue2从入门到精通】详解Vue.js的15种常用指令及其使用场景
  • SpringMVC(8)——SSM整合
  • 【内网安全】横向移动Exchange服务有账户CVE漏洞无账户口令爆破
  • 10、Django开发总结:Django缓存Cache应用场景、设置以及高级使用技巧
  • 【黑客技术】LOIC —— 低轨道离子炮工具使用
  • 华为OD机试用java实现 -【吃火锅】
  • C语言 —— 数组
  • 35岁大龄程序员职业转型规划
  • [笔记] php常见简单功能及函数
  • 【Redis学习笔记】2018-06-28 redis命令源码学习1
  • Apache Spark Streaming 使用实例
  • CoolViewPager:即刻刷新,自定义边缘效果颜色,双向自动循环,内置垂直切换效果,想要的都在这里...
  • JavaScript 基本功--面试宝典
  • javascript 总结(常用工具类的封装)
  • js算法-归并排序(merge_sort)
  • Redash本地开发环境搭建
  • SpiderData 2019年2月25日 DApp数据排行榜
  • vue 配置sass、scss全局变量
  • vue2.0项目引入element-ui
  • vue脚手架vue-cli
  • 包装类对象
  • 巧用 TypeScript (一)
  • 扫描识别控件Dynamic Web TWAIN v12.2发布,改进SSL证书
  • 深度学习在携程攻略社区的应用
  • 使用parted解决大于2T的磁盘分区
  • 为物联网而生:高性能时间序列数据库HiTSDB商业化首发!
  • 物联网链路协议
  • 硬币翻转问题,区间操作
  • (8)Linux使用C语言读取proc/stat等cpu使用数据
  • (附源码)springboot“微印象”在线打印预约系统 毕业设计 061642
  • (论文阅读32/100)Flowing convnets for human pose estimation in videos
  • (每日持续更新)信息系统项目管理(第四版)(高级项目管理)考试重点整理第3章 信息系统治理(一)
  • (四) 虚拟摄像头vivi体验
  • (转)shell中括号的特殊用法 linux if多条件判断
  • (转载)VS2010/MFC编程入门之三十四(菜单:VS2010菜单资源详解)
  • .bat批处理(一):@echo off
  • .NET Framework 的 bug?try-catch-when 中如果 when 语句抛出异常,程序将彻底崩溃
  • .Net Memory Profiler的使用举例
  • .NET 线程 Thread 进程 Process、线程池 pool、Invoke、begininvoke、异步回调
  • .net中应用SQL缓存(实例使用)
  • /bin/bash^M: bad interpreter: No such file ordirectory
  • @entity 不限字节长度的类型_一文读懂Redis常见对象类型的底层数据结构
  • @kafkalistener消费不到消息_消息队列对战之RabbitMq 大战 kafka
  • @NoArgsConstructor和@AllArgsConstructor,@Builder
  • [ element-ui:table ] 设置table中某些行数据禁止被选中,通过selectable 定义方法解决
  • [ Linux Audio 篇 ] 音频开发入门基础知识
  • [ 云计算 | AWS ] 对比分析:Amazon SNS 与 SQS 消息服务的异同与选择
  • []我的函数库