查看: 23346|回复: 34

[更新1.1]利用onfocus的循环效果(添加幻灯片实例,鼠标移上可停止,移出可继续播放)

[复制链接]

0

主题

104

回帖

-25

积分

乞丐

积分
-25
发表于 2010-9-2 16:01:29 | 显示全部楼层 |阅读模式
尹广磊公众帐号
先来实例:(本实例只作为研究axure功能用,请各位实际应用中尽量避免展现此类复杂的应用
1.可自动循环播放
2.鼠标移上会停止
3.鼠标移开可继续循环播放

PS:有时候会失效,不知道什么原因。刷新页面重试就好。

目前该功能在chrome下效果最好
v1.1修正
1.修正了image map刷新页面的条件,修复了FF和IE下不断刷新的错误。以及减少了功能失效的概率。

上图:
未命名.jpg
下载实例:
v1.1修正版
实例-利用focus的幻灯循环v1.1.rar (94.21 KB, 下载次数: 1229)


下面是思路原型

做了一个小示范
主要思路:
1.在loadpage时把焦点转移到1组件上
2.等待500ms后把焦点转移到2组件上,同时2等待500ms后又把焦点转移到1组件上。

以此达到循环效果。

遗留问题:
1.手动停止功能
2.焦点丢失问题
3.如何隐藏焦点转换


v2.0更新

1.手动停止功能解决,参考了一下http://www.hiaxure.com/thread-377-1-1.html的刷新页面思路
2.使用panel缩小后隐藏焦点转换(因为隐藏panel焦点转换会失效)


目前未解决的其他问题:
1.焦点丢失问题还有待解决
2.有时候会失效,不知道为什么

利用focus达到循环的目的.rp

57.73 KB, 下载次数: 386

第一个思路原型-对重复循环的演示

利用focus达到循环的目的v2.0.rp

61.35 KB, 下载次数: 471

第二个思路原型-对重复循环和手动暂停的演示

实例-利用focus的幻灯循环.rar

93.76 KB, 下载次数: 319

这个在IE和FF下有刷新错误,要看效果的请下载上面的更新版本

0

主题

104

回帖

-25

积分

乞丐

积分
-25
 楼主| 发表于 2010-9-2 17:10:56 | 显示全部楼层
大家看看还有没什么好的改进方法,目前用select效果很好,输入框的话焦点转换还是会显示出来。

失效的问题头疼:dizzy:

514

主题

6310

回帖

7万

积分

管理员

创始人

Rank: 9Rank: 9Rank: 9

积分
74239
QQ
发表于 2010-9-2 21:30:08 | 显示全部楼层
思路不错,我稍后研究研究。

效果好像不大行,鼠标一进入,Firefox下整个层要么消失,要到闪。

0

主题

104

回帖

-25

积分

乞丐

积分
-25
 楼主| 发表于 2010-9-3 09:45:16 | 显示全部楼层
我用chrome测试的,有时候容易失效

0

主题

104

回帖

-25

积分

乞丐

积分
-25
 楼主| 发表于 2010-9-3 09:56:38 | 显示全部楼层
思路不错,我稍后研究研究。

效果好像不大行,鼠标一进入,Firefox下整个层要么消失,要到闪。
尹广磊 发表于 2010-9-2 21:30


更新了v1.1版本,修正了在FF和IE下的问题
主要是因为不断重复执行刷新任务造成的,修改了一下刷新条件OK了

0

主题

1

回帖

11

积分

会员

Rank: 5Rank: 5

积分
11
发表于 2011-2-18 17:40:47 | 显示全部楼层
ding

1

主题

269

回帖

292

积分

版主

Nick

Rank: 7Rank: 7Rank: 7

积分
292
QQ
发表于 2011-2-20 15:28:39 | 显示全部楼层
呵呵~今天做了个,完美循环,楼主可以看看
testloop.jpg

完美轮换,未使用框架,实现:
1.增加鼠标移入停止,鼠标移出轮换
2.模块化,要更换图片只需在模块中修改即可

使用Axure6.0.0.2844制作。http://www.hiaxure.com/thread-2878-1-1.html

TestLoop_By Nick(2011.2.20).rar

1.32 MB, 下载次数: 570

TestLoop_By Nick(2011.2.20).rp

923.05 KB, 下载次数: 1216

评分

1

查看全部评分

适不适合做产品人?请问自己:
我是否拥有完美之心、想得到、说得出、做的好

0

主题

104

回帖

-25

积分

乞丐

积分
-25
 楼主| 发表于 2011-2-21 13:02:21 | 显示全部楼层
呵呵~今天做了个,完美循环,楼主可以看看
2610

完美轮换,未使用框架,实现:
1.增加鼠标移入停止,鼠标移出轮换
2.模块化,要更换图片只需在模块中修改即可

使用Axure6.0.0.2844制作。http://www.webppd ...
曾俊龙 发表于 2011-2-20 15:28

:lol 下载下来研究下

0

主题

15

回帖

99

积分

会员

Rank: 5Rank: 5

积分
99
发表于 2011-3-3 11:06:55 | 显示全部楼层
看着效果真不错

0

主题

12

回帖

12

积分

会员

Rank: 5Rank: 5

积分
12
发表于 2011-4-1 13:58:31 | 显示全部楼层
确实是效果不错啊,下载来慢慢学习

0

主题

45

回帖

-89

积分

乞丐

积分
-89
发表于 2011-4-1 16:58:27 | 显示全部楼层
tks for sharing

0

主题

2

回帖

11

积分

会员

Rank: 5Rank: 5

积分
11
发表于 2011-4-2 01:31:44 | 显示全部楼层
感谢

0

主题

1

回帖

11

积分

会员

Rank: 5Rank: 5

积分
11
发表于 2011-4-2 13:43:55 | 显示全部楼层
学习一下

0

主题

26

回帖

58

积分

会员

Rank: 5Rank: 5

积分
58
发表于 2011-4-2 13:49:06 | 显示全部楼层
我也做了一个,共同交流探讨,6.0上做的确简单了很多

http://www.hiaxure.com/viewthread.php?tid=3234&highlight=

0

主题

46

回帖

10

积分

会员

Rank: 5Rank: 5

积分
10
发表于 2011-4-12 16:19:34 | 显示全部楼层
7# 曾俊龙

axure 6.0 正式版可以在哪下载?我用的是测试版!所以打不开

0

主题

1

回帖

11

积分

会员

Rank: 5Rank: 5

积分
11
发表于 2011-4-15 11:00:26 | 显示全部楼层
菜鸟求教程~~~

0

主题

74

回帖

93

积分

会员

Rank: 5Rank: 5

积分
93
发表于 2011-4-22 11:41:59 | 显示全部楼层
效果很好啊

0

主题

321

回帖

123

积分

会员

Rank: 5Rank: 5

积分
123
发表于 2011-7-4 10:10:06 | 显示全部楼层
呵呵~今天做了个,完美循环,楼主可以看看
2610

完美轮换,未使用框架,实现:
1.增加鼠标移入停止,鼠标移出轮换
2.模块化,要更换图片只需在模块中修改即可


很好很强大!
最巧妙之处是用了2个很接近的动态面板,解决了随机点一个广告位有可能阻断继续轮播的难题。
我之前也做了一个,但是是单个动态面板的,不动还可以很正常、流畅的轮播,但是鼠标一随机触发其中之后,后面轮播的时间间隔就越来越短了,越触发,轮播则越快。
我爱策划,喜欢交互,热爱Axure。
深圳产品经理群:154281076

0

主题

3

回帖

11

积分

会员

Rank: 5Rank: 5

积分
11
发表于 2011-10-17 15:43:26 | 显示全部楼层
怎么弄的呢?

0

主题

19

回帖

205

积分

会员

南海网交互设计师

Rank: 5Rank: 5

积分
205
QQ
发表于 2011-10-28 11:32:19 | 显示全部楼层
顶起,求助怎么弄的,有没有说明教程webppd:money
彪悍的人生依然需要解释
您需要登录后才可以回帖 登录 | 新用户注册

本版积分规则

QQ|手机版|友情链接|版权声明|关于我们|Axure中文社区 |网站地图

GMT+8, 2024-4-25 07:13

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表