商丘做网站,商丘网站优化,商丘网络推广,商丘网络公司
当前位置:首页 > 万博体育娱乐 > 网站设计 >

Axure8教程:网页orApp鼠标滚动效果

发表日期:2018-01-05 13:59万博娱乐体育浏览次数: 本文关键词:Axure8,教程,网页,orApp,鼠标,滚动,效果,网页

  网页orApp鼠标滚动效果在原型设计中如何实现,文章对此作出了分享。

  

 

  前些天要做一个高保真的email应用原型,在做滑动显示邮件列表的时候发现自用各种事件都满足不了,网上也没有一个比较规范的教程,自己特意整理了一下,在做网页或者app时能模仿出鼠标滚动效果,注意是滚动,不是点击拖动。

  步骤1:将“内部框架组件”组件拖拽到“index”页面,设置好坐标和大小。

  

 

  步骤1图

  步骤2:将“内部框架组件”组件转换成动态面板,默认状态为state1并取消勾选“自动调整为内容尺寸”。

  

 

  步骤2图

  步骤3:切换到“内部框架”页面,将“内部框架组件”组件的滚动条设置为“从不显示滚动条”。

  

 

  步骤3图

  步骤4:切换到“index”页面,在此页面的上点击鼠标右键,再设置滚动条为“从不显示滚动条”,并再检查 index页面的动态面板是否取消勾选“自动调整为内容尺寸”。

  

 

  步骤4图

  步骤5:在“内部框架”页面再拖入一个“内部框架”,也就是在index的state1页面拖入一个“内部框架”组件,将这个组件转换成动态面板(将默认状态修改为state2),要注意的是设置大小,一定要注意滚动条要超过index的state1页面的显示范围,这样能够避免在页面中显示出滚动条。

  

 

  步骤5图

  步骤6:设置刚刚插入的第二个“内部框架组件”动态面板,取消state1页面中的滚动条和边框的显示,取消勾选“自动调整为内容尺寸”,在state1动态面板下修改刚刚插入的第二个“内部框架组件”动态面板上右键,选择“自动显示垂直滚动条”。

  

 

  步骤6图

  步骤7:在state2页面中拖入一个长图片或者加入长文本,点击F5就能看到效果了。

  

 

  步骤7图

  8.更多:可以设置上下边界,不显示滚动条,可以完全模拟出鼠标滑轮滚动效果,可以尝试下用下别的组件。

  效果预览:https://o9qpvp.axshare.com

  本文由 @虚伪的温柔 原创发布。未经许可,禁止转载。

  题图来自PEXELS,基于CC0协议

如没特殊注明,文章均来自网络! 转载请注明来自:http://www.bluecatslive.com/news/wzsj/6712.html

网站设计案例推荐

热门文章

揭秘2017年最新的网站快速排名设...

网站在前期的时候都是很难上排名的吗,那么是因为你的网站基础优化都没做好,怎么可能会有排名呢,首页说到了基础的优化那就要从根本的地方说起。前期就是先把网站的设计和网...

日期:2017-06-30 浏览次数:5371

终于等到你!2017年2月设计圈实...

随着情人节的结束,2月份的设计圈干货大合集悄然更新。新的工具新的资源,依然是以往的分量,依然是相同的味道。和过去的合集相似,免费的素材、工具、服务占据了列表中9成的...

日期:2018-04-01 浏览次数:642

现代404页面设计趋势分析与案例...

每个网站都是由不同功能不同类型的页面构成的,当用户打开错误链接的时候,网站的404页面就派上用场了。一个可靠的404页面在告知用户他们走错地方的同时,还应当引导用户继续浏...

日期:2018-02-27 浏览次数:633

商丘建站公司:内行讲堂!让设...

你还在加班为每一个小功能的实现自己“码码码”吗?今天想早点下班的你,快来看看我最新发现的工具包吧!有了他们,这些功能你只需要直接用,或者用一点时间把他们优化的比作者创造时更...

日期:2018-04-15 浏览次数:623

商丘网站维护:如何写出一个完...

本文对如何写出一个完美的错误信息,进行了3个重要组成部分的分析。 每个系统都会有无法正常工作的时候。可能是用户的错误或系统的失败。在这两种情况下,以正确的方式处理错...

日期:2018-05-27 浏览次数:618

相关文章

对比这10个注意事项,你的网页...

对于网页而言,视觉信息的传达至关重要。用户通过页面获取信息,文字、图片、图标、按钮、表单等UI元素都承载着不同类型的信息。在这其中,文字的作用尤其巨大。排版设计的时...

日期:2018-01-05 浏览次数:63

响应式网页设计指南...

响应式网页是一种对于设计的全新思维模式,响应是双方的,是互动的过程,在这个过程中设计师要考虑设备的性能、Dom节点数量、屏幕的大小等。 1、如何理解响应式设计(RWD) 响应...

日期:2018-01-05 浏览次数:64

6种实验性的网页导航模式,激发...

不同的导航模式对于网站的影响不尽相同,针对不同的内容、不同的用户,你需要仔细挑选导航模式。 虽然绝大多数的设计都遵循设计规则和用户的使用习惯,但是标新立异的设计仍然...

日期:2018-01-05 浏览次数:66

风骚一点!在网页中玩转霓虹色...

霓虹色真的是让人又爱又恨的一种设计元素啊。作为设计趋势,你会看到别人的设计中,霓虹色的运用是如此的帅气和炸裂,可是自己上手的时候,却一下子将逼格拉回到80年代,尴尬...

日期:2018-01-05 浏览次数:66

Axure教程:屏幕纵向切换...

通过鼠标滚轮的前滚及后滚操作,实现屏幕纵向的上翻页和下翻页效果,其实不难。一起来学习吧。 一、原型效果 二、准备工作 本文原型是在1366*768分辨率下完成的。 元件 矩形:2个...

日期:2018-01-05 浏览次数:66

随机推荐

弹框体系总结...

网站设计之卡式布局运用策略...

说走就走!勾引你出门旅游的网...

网站建设首页设计图文混排的技...

超全面干货!弹窗设计的5条基本...

让用户“看见” 是一种心机行为...