aardio 官方社区

 找回密码
 注册会员

QQ登录

只需一步,快速开始

搜索
查看: 32467|回复: 16

HTMLayout仿Picasa照片查看器效果

[复制链接]

16

主题

41

回帖

527

积分

培训班

积分
527
发表于 2013-9-9 23:03:40 | 显示全部楼层 |阅读模式
本帖最后由 多多洛 于 2013-9-10 07:51 编辑

声明:HTMLayout 界面实战 系列完全授权给 aardio论坛任意使用,本人不保留任何权利,大力支持AAU!
本系列模仿界面本意是学习如何使用 HTMLayout,请不要用于非法用途!
本系列后续还有其他界面仿制,请各位提出好的界面以便斟酌仿制!

第四弹 —— 仿Picasa照片查看器效果
预览图:
225927cpqjlswppoc0oluc.jpg


特点:
1. 在右上方使用border-radius实现的1/4圆角关闭按钮。
2. 整个界面半透明效果,配合展示图片半透明效果
3. 展示图片入场后立即动画放大效果

结语:
对于本学习示例源码包,大家有任何疑问请在本贴提问,楼主将及时答复;
另,大家有什么新鲜的界面可以提供出来,楼主将会酌情仿制。

许可说明:
本源码提供给aardio官方,根据aardio开源许可大家可以自由使用。

本例源码下载地址: 仿Picasa照片查看器效果.7z (64.9 KB, 下载次数: 1767)

0

主题

9

回帖

86

积分

一级会员

积分
86
发表于 2013-9-10 12:39:33 | 显示全部楼层
稍微的不是很流畅。想知道有什么办法可以流畅一些。不过顶了。很强大。

16

主题

41

回帖

527

积分

培训班

积分
527
 楼主| 发表于 2013-9-10 12:40:24 | 显示全部楼层
神码 发表于 2013-9-10 12:19
很炫的效果,小小改进了一下,
改用更容易控制的动画事件,改为动态设置图像URL,动态获取图像大小,
放 ...

呵呵,很不错!
整合到一起了,方便大家复制粘贴代码测试,全屏显示,从网络加载图像,更高级的csss!脚本用法;
赞一个!

16

主题

41

回帖

527

积分

培训班

积分
527
 楼主| 发表于 2013-9-10 12:42:16 | 显示全部楼层
智慧人生 发表于 2013-9-10 12:39
稍微的不是很流畅。想知道有什么办法可以流畅一些。不过顶了。很强大。

是不流畅,可能跟outline阴影有关系;
还有,官方范例里的一些动画效果的流畅度也不是很理想,但还是可以接受的;
如果不是太挑剔的话.

5

主题

429

回帖

2420

积分

五级会员

积分
2420
发表于 2013-9-10 14:33:49 | 显示全部楼层
我前面改的已经把outline放到动画最后才显示了,不会影响动画流畅度,
因为改成动画,需要自己调整延时参数,不同的延时参数会有不同的流畅度,有的人喜欢快,有的人喜欢平滑,这个需要细细调整出最好的效果。

用半透明的PNG做背景性能会好一些,因为outline是实时运算出来的,不过这种全屏图像预览程序用outline也无所谓了。

16

主题

118

回帖

914

积分

三级会员

积分
914
发表于 2013-9-10 19:23:34 | 显示全部楼层
又一个精品,可惜这次又来晚了

16

主题

41

回帖

527

积分

培训班

积分
527
 楼主| 发表于 2013-9-10 21:48:24 | 显示全部楼层
神码 发表于 2013-9-10 14:33
我前面改的已经把outline放到动画最后才显示了,不会影响动画流畅度,
因为改成动画,需要自己调整延时参 ...

多谢指教!

0

主题

2

回帖

16

积分

新手入门

积分
16
发表于 2013-11-27 21:51:29 | 显示全部楼层
真心不错!

1

主题

7

回帖

57

积分

一级会员

积分
57
发表于 2014-6-12 13:48:40 | 显示全部楼层
神码 发表于 2013-9-10 12:19
很炫的效果,小小改进了一下,
改用更容易控制的动画事件,改为动态设置图像URL,动态获取图像大小,
放 ...

请问,为何close按钮的tip显示为两个方框(乱码),而非“关闭”呢??如何才能正常显示?

5

主题

429

回帖

2420

积分

五级会员

积分
2420
发表于 2014-6-12 14:19:55 | 显示全部楼层
ldd200888 发表于 2014-6-12 13:48
请问,为何close按钮的tip显示为两个方框(乱码),而非“关闭”呢??如何才能正常显示?

关闭按钮指定了Webdings字体,该字体中文是乱码。
所以可以参考多多洛的代码,指定一下提示框的字体,
  1. /*提示框样式*/
  2. popup {
  3.     font-family: '微软雅黑','宋体';
  4.     font-size: 12px;
  5.     font-weight: normal;
  6.     padding: 0 5px;
  7. }
复制代码

0

主题

4

回帖

35

积分

新手入门

积分
35
发表于 2014-11-17 13:50:29 | 显示全部楼层
太强大了!

1

主题

10

回帖

129

积分

一级会员

积分
129
发表于 2017-8-20 10:46:07 | 显示全部楼层
这个效果做的不错。学习了

2

主题

1

回帖

27

积分

新手入门

积分
27
发表于 2018-6-7 16:02:13 | 显示全部楼层
有个问题,就是htmllayout调用的是IE的内核吧,速度会比较慢?而且根据系统装的版本不同,会不会运行效果不同?
您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

手机版|未经许可严禁引用或转载本站文章|aardio.com|aardio 官方社区 ( 皖ICP备09012014号 )

GMT+8, 2024-3-2 02:26 , Processed in 0.065608 second(s), 25 queries .

Powered by Discuz! X3.5

Copyright © 2001-2023 Tencent Cloud.

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