• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >axure > Axure教程:手把手教你做截获鼠标指针(或鼠标变手型跟随)

Axure教程:手把手教你做截获鼠标指针(或鼠标变手型跟随)

作者: @beikehuahua  字体:[增加 减小] 来源:互联网 时间:2017-06-14

本文主要包含axure,axure交互,axure的使用,小楼老师axure教程,axure rp 6.0下载等相关知识, @beikehuahua 希望在学习及工作中可以帮助到您

未标题-1q

昨天突发感想,教大家做了个Axure导航栏或广告悬停的效果。今天我又心血来潮了,再教你们一个很实用的 ?应用场景:

截获鼠标指针,做鼠标跟随事件。

相信不少同学都遇到过:想把鼠标变成“手形”工具,但苦苦不得其解的时候吧?下面,是美女手把手教你做哦,(把举例中的红色标尺图替换成手就欧拉)~~~

(想感受一下应用场景,可打开百度地图,最右侧有:“工具”-> “测距”或“标记”功能。)

场景如下图:

100000

我随意用了个标尺图片,代表手型。核心和关键就是:“页面鼠标移动时”,截获鼠标坐标,移动内容到鼠标坐标。共三步。

第一步:

1)做个矩形红色按钮(这个不用我教了吧?),命名为button。

2)拖个图片,换为你想用的图(如下面的红色小图片)。 再拉个矩形控件,把“移动到某处….”等说明文字写入矩形内。

如下图:

10001

3)选择2中的俩元件,转换为一个动态面板,命名为content。

4) ? 隐藏content动态面板,如下图中箭头3处。

10002

第一步完,元件准备完毕,一个是测距 button,一个动态面板content。

第二步 :为button设置单击事件:

如下:

1)移动动态面板content到红色按钮的下方对齐处,,绝对坐标[[button.left,button.bottom]]

(为了保证每次单击测距按钮,标尺都是从下面最近处跟随鼠标)

2)显示content。

其中 :1)具体步骤?如下图: ?1->2->3->4->5->6 , 移动 ?content ?到绝对位置 ? ?x:fx ? fx设置为b.left ?b为button ? 。

1005

点击fx,会弹出编辑值窗口,如下图:

1006

先点击下面的新增局部变量,点击小黑三角,选元件button,简些为b,插入变量This.left

把插入变量后,前面的0删掉,This改为b,成 ? [[b.left]]

同样的步骤,把 ?y:fx处设置为[[b.bottom]]

2) ?接着在用例编辑窗口的左侧,选择“显示”,对应勾选content。第二步完。

第三步,也是最重要的一步:

页面下方有两个重要事件:

  1. 页面鼠标移动时。
  2. 页面鼠标单击时。

其中?1,a)在该页面的正下方,点击“页面交互”选项卡,点击最下方的“更多事件”,找到“页面鼠标移动时”选项, 并点击页面鼠标移动时,弹出用例编辑窗。

1,b)如下1->2->3->4->5->6,设置事件为:移动content 绝对位置到[[Course.x,Course.y]]

( x:fx,设置为Course.x。y:fx,设置为Course.y。)

10016

其中: ?2“页面鼠标单击时“事件: ?在弹出的用例编辑窗, ?选择 ?“ 隐藏”——>勾选?“content”.

最终事件如下:

10017

预览或生成页面,即可见页面效果。

无论你的鼠标再哪里,那个content(图和文字)都紧跟着你。

1016

你的鼠标移到哪里,标尺就实时跟到哪里。当然了,你可把标尺图片换成“小手儿”,我这里“页面鼠标单击”时,隐藏了content,大家还可以接着设置任何你想设置的事件,如显示个其他的图片,弹出个输入对话框等等。

其实Axure能做好多效果:态面板的多状态循环切换、加上全局变量的配合、还有 等待 定时事件,滚动到、移动到 等等等,基本能做好多好多的动效。

我做产品经理快两年,用了两年的Axure做高保真原型,自己偷偷摸索了不少小窍门儿,但是我是个炒鸡懒的女子,加上公司的产品和成果不敢乱往网络上传,所以很少分享和产品页面相关的东西。

但我分享的绝对是实用的东西~~~

这两天还算闲,所以发了两篇,等有空了,我还会发~~~

有问题请留言哈,我有空一定解答。

您可能想查找下面的文章:

  • Axure设计:制作iOS列表左滑菜单效果
  • Axure教程:限制输入框输入字数
  • Axure教程:怎样做低保真轨迹追踪与回放
  • Axure教程:微信聊天列表原型制作(二)
  • Axure教程:如何画出曲线图?
  • Axure教程:微信聊天列表原型制作(一)
  • 自定义微信元件库:Axure基本元件的应用(下)
  • 自定义微信元件库:Axure基本元件的应用(上)
  • Axure教程|原型设计之抽屉列表
  • Axure教程:中继器如何切换标记状态?

相关文章

  • 2017-06-13Axure教程:微信面对面建群原型设计
  • 2017-06-14Axure教程 - 为原型设计添加点动画效果
  • 2017-06-14Axure教程|如何制作”返回顶部”原型功能?
  • 2017-06-14Axure7.0教程(七)math函数的使用(2)Math函数简介
  • 2017-06-14Axure中继器的基本使用:实现一个简易的人员添加、删除模块
  • 2017-06-13Axure教程:用中继器和日期函数实现万年历
  • 2017-06-13Axure教程:微信聊天列表原型制作(二)
  • 2017-06-13Axure教程:如何制作一个不区分大小写的验证码原型?
  • 2017-06-14Axure RP设计顶部导航冻结,注册模块互切换,滚动条设计的方法
  • 2017-06-14用Axure 实现“打飞机”,骚年,来一发(上)

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 如何优雅的用Axure装逼?高保真原型心得分享
    • 如何在Axure RP 8 中规范使用 Font Awesome 图标库完成设计
    • Axure8.0小案例:手把手教你画挖掘机
    • Axure实现多级联动下拉框
    • Axure7.0教程(七)math函数的使用(2)Math函数简介
    • Axure教程:移动端原型如何适配不同分辨率的手机?
    • Axure教程:原型设计之侧滑菜单
    • 矩形框:深度理解和应用元件样式(二)
    • 如何用Axure快速制作APP交互原型
    • Axure教程——页面载入进度条

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有