了解Mockplus的用户会知道,该原型工具目前并不直接支持鼠标悬停功能。但我经过尝试,发现想用它实现一个鼠标悬停事件并不是什么难事,比如网页设计中很常见的鼠标悬停时菜单下拉的效果,只要换个思路,利用Mockplus的状态交互功能,就能轻松实现。

我们来看看详细步骤:

第一步:用矩形做一个菜单。

打开Mockplus,从界面左侧的组件库中拖出一个矩形,将其复制成多个。其中一个作为菜单的显示区域(图中蓝色矩形),另外几个拼接起来作为菜单的内容。

在右侧参数面板中,将第一个矩形设置为不可见。然后将另外几个矩形合并为组。

第二步:移动矩形

将蓝色矩形移动到不可见矩形的位置,并在右侧参数面板中将蓝色矩形下移一层,此时依然可以看到蓝色矩形,因为上层的形状是不可见的。

第三步:利用状态交互,实现鼠标悬停时菜单下拉的效果。

在界面右侧的参数面板上,将透明度设置为0,并点击“透明度”前的小闪电。选择“鼠标经过时”,透明度设置为100。

这样,一个简单的鼠标悬停下拉菜单就做好了。

点击界面上方的“预览”,即可查看效果:

这就是原型设计的奇妙之处:用有限的条件创造出无限的效果。正如弹钢琴,琴键有限,音乐却是无限的。对于一个优秀的设计者来说,原型工具本身具备的功能并不是最重要的。功能越多,操作难度就越大,也越不容易上手。Mockplus是简单易用的原型工具,让设计师在简单而不受限的平台进行设计。因此,无论你是设计新手,还是资深的设计师或产品经理,Mockplus都值得一试。

在Mockplus中,如何做鼠标悬停时菜单下拉的效果?的更多相关文章

  1. 【IDE_PyCharm】PyCharm中配置当鼠标悬停时快速提示方法参数

    方法一:通过在settings里面设置当鼠标至于方法之上时给出快速提示 方法二:按住Ctrl键,光标放在任意变量或方法上都会弹出该变量或方法的详细信息,点击鼠标还能跳转到变量或方法的定义处

  2. 在循环中使用鼠标悬停时表示当前悬停选中,传入this关键字即可

    在前端循环中使用鼠标悬停事件 <div class="message-widget contact-widget"> <!-- Message --> {% ...

  3. jQuery的鼠标悬停时放大图片的效果

    这是一个基于jQuery的效果,当鼠标在小图片上悬停时,会弹出一个大图,该大图会跟随鼠标的移动而移动.这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后 ...

  4. 基于jQuery的鼠标悬停时放大图片的效果制作

    这是一个基于jQuery的效果,当鼠标在小图片上悬停时,会弹出一个大图,该大图会跟随鼠标的移动而移动.这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后 ...

  5. jQuery鼠标悬停3d菜单展开动画

    效果体验:http://hovertree.com/texiao/jquery/93/ 竖直的主菜单贴着页面左侧,当光标移入菜单项时,以3D动画的方式弹出对应的二级菜单.采用jQuery和CSS3实现 ...

  6. jQuery鼠标悬停文字渐隐渐现动画效果

    jQuery鼠标悬停文字渐隐渐现动画效果 当时是做项目的时候用到的所以图片有些大,九张,真正要做图片不需要这么大 css样式 <style> *{ margin: 0; padding: ...

  7. 基于CSS3制作的鼠标悬停动画菜单

    之前分享了好多款css3实现的鼠标悬停效果.今天再给大家带来一款基于CSS3制作的鼠标悬停动画菜单.这款菜单适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界 ...

  8. JS之document例题讲解1(两张表之间数据转移、日期时间选择、子菜单下拉、用div做下拉菜单、事件总结)

    作业一:两个列表之间数据从一个列表移动到另一个列表 <div style="width:600px; height:500px; margin-top:20px"> & ...

  9. 解决iphone填写表单时,表单项获取焦点时往下拉屏,导致顶部标题栏下滑错位

    $(function () { //解决iphone填写表单时,表单项获取焦点时往下拉屏,导致顶部标题栏下滑错位 var u = navigator.userAgent; var isiOS = !! ...

随机推荐

  1. [Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

    前两天网友在群里说起了Flutter,就了解了一下,在手机上跑了它的demo,直接就被打动了. 虽然网上有很多教程,但真正开始的时候,还是会碰到很多坑.下面详细的讲解Flutter + Android ...

  2. UVA-10115

    字符查找替换,WA了N次,一次只能替换一个,下一次find必须从第0个位置开始 import java.io.File; import java.io.FileNotFoundException; i ...

  3. OpenCL 存储器次序的验证

    ▶ <OpenCL异构并行编程实战>P224 的代码,先放上来,坐等新设备到了再执行 //kernel.cl __global ); // 全局原子对象 __kernel void mem ...

  4. C#--反射技术

    反射:反射为了动态(比如动态的加载dll,动态创建类型.动态调用方法等) 引用 using System.Reflection 原理: 一个类库编译后会生成一个以.dll结尾的文件,一个以.pdb结尾 ...

  5. sqlserver查询自定义的函数

    1)sp_helptext同样适应用自定义函数 2)sys.sql_modules表也可以查 查看函数的源代码: exec sp_helptext '函数名'

  6. python 日期格式

    %a 星期几的简写%A 星期几的全称%b 月分的简写%B 月份的全称%c 标准的日期的时间串%C 年份的后两位数字%d 十进制表示的每月的第几天%D 月/天/年%e 在两字符域中,十进制表示的每月的第 ...

  7. 第一个struct2程序(2)

    第三步 需要使用ActionForm了.在Struts1.x中,必须要单独建立一个ActionForm类(或是定义一个动作Form),而在Struts2中ActionForm和Action已经二合一了 ...

  8. 预习 jdbc 技术简介

    JDBC简介: JDBC全称为java database connectivity,是sun公司指定的java数据库连接技术的简称. 他是sun公司和数据库开发商共同开发出来的独立于DBMS的应用程序 ...

  9. 疯狂JAVA——第七章 java基础类库

    System类代表当前java程序的运行平台,程序不能创建System类的对象,System类提供了一些类变量和类方法,允许直接通过System类来调用这些类变量和类方法.

  10. 在制MO未取到FP2

    描述:工单被过滤掉 IN_SFCHEADER表数据被删除掉 备份表监控可见数据是有写入IN_SFCHEADER表 删除前会将数据写入IN_SFCHEADER_TEMP表,发现物料编码是带了一个尾续CZ ...