搜索
查看: 14899|回复: 15

[界面] HTMLayout仿Picasa照片查看器效果

  [复制链接]

16

主题

58

帖子

515

积分

培训班

积分
515
发表于 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, 下载次数: 1273)
多多洛 专注界面 QQ 334150781
回复

使用道具 举报

0

主题

34

帖子

274

积分

二级会员

Rank: 3Rank: 3

积分
274
发表于 2013-9-10 12:10:25 | 显示全部楼层

厉害啊,必须顶啊。。。{:3_41:}

厉害啊,必须顶啊。。。
回复

使用道具 举报

0

主题

28

帖子

387

积分

二级会员

泥水工...

Rank: 3Rank: 3

积分
387
QQ
发表于 2013-9-10 12:18:40 | 显示全部楼层

超屌的效果..很实用

超屌的效果..很实用
回复

使用道具 举报

5

主题

444

帖子

2510

积分

五级会员

Rank: 8Rank: 8

积分
2510
发表于 2013-9-10 12:19:20 | 显示全部楼层

很炫的效果,小小改进了一下, 改用更容易控制的动画事件,改为动态设置图像URL,动态获取图像大小, 放到一个源码文件里。[code][lang=aardio

很炫的效果,小小改进了一下,
改用更容易控制的动画事件,改为动态设置图像URL,动态获取图像大小,
放到一个源码文件里。
  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = win.form( text = "仿Picasa照片查看器效果";exmode="toolwindow" )
  4. /*}}*/

  5. winform.transparent(true);//启用分层窗口以支持透明
  6. winform.fullscreen(true);//全屏

  7. import web.layout;//导入内置浏览器引擎
  8. import web.layout.behavior.windowCommand;//导入标题栏按钮支持库
  9. wbLayout = web.layout(winform); //创建浏览器

  10. wbLayout.html = /**
  11. <!DOCTYPE html>
  12. <html>
  13. <body>
  14.         <div id="hl_ctrl_bar"><span id="close" command="window-close" title="关闭">r</span></div>
  15.         <img id="simulate_area"></img>
  16. </body>
  17. </html>
  18. **/

  19. wbLayout.css = /**
  20. html { background: none; } /* HTML背景透明 */
  21. body, html { margin:0; padding:0; height:100%; width:100% }
  22. body { margin:0; outline: none; background-color:rgba(0,0,0,0.7); }

  23. /* 窗体控制按钮 */
  24. #hl_ctrl_bar { max-width: max-intrinsic; padding-right: 5px; position: absolute; right:0; top:0; padding: 0; }
  25. #hl_ctrl_bar span {
  26.         display: block; float: left; color: #fff; line-height: 22px; padding: 0 5px;
  27.         font-family: Webdings; font-weight: bold; font-size: 13px;
  28.         behavior: windowCommand; /* 添加标题栏按钮交互行为 */
  29. }
  30. #hl_ctrl_bar #close {
  31.         width: 40px; height: 40px; padding:0; overflow: hidden;line-height: 28px;
  32.         text-indent: 16px; font-size: 14px;background-color:#666; border-radius:0 0 0 100%;
  33. }
  34. #hl_ctrl_bar span#close:hover { background-color: #da3610; }

  35. #simulate_area[ready]{  
  36.         background:#000;/* 设背景色后发光效果性能会好点 */
  37.         outline:15px glow #000 0px;
  38.         width:0; height:0;
  39.        
  40. }

  41. /* 图像已下载完成 */
  42. #simulate_area[src]:not(:incomplete){   

  43.         top: 50%%; left: 50%%; right: 50%%; bottom: 50%%;
  44.         position: absolute;   
  45.        
  46.         /*初始化事件*/
  47.         assigned!:
  48.                 self.start-animation( 0.9s ); /*启动动画*/
  49.    
  50.     /*动画事件*/
  51.     animation-step!:
  52.         self::width = morph("cubic-in-out", 1px, self.min-intrinsic-width()),
  53.         self::height = morph("cubic-in-out", 1px, self.min-intrinsic-height() );
  54.         
  55.      animation-end!:
  56.              self.ready = "true"; /* 动画完了再显示发光效果 */
  57. }
  58. **/

  59. winform.updateImage = function(url){
  60.         var ltEle = wbLayout.queryEle('#simulate_area'); //CSS选择器获取节点对象
  61.         ltEle.src = url;//动态修改图像       
  62. }

  63. //预览指定图像
  64. winform.updateImage( "http://bbs.aardio.com/data/attachment/portal/201308/20/165515p11prhr96zp919xh.jpg" )

  65. winform.show();
  66. win.loopMessage();
复制代码

点评

真棒: 5.0
真棒: 5
学习了  发表于 7 天前

评分

参与人数 1银币 +30 收起 理由
air_fans + 30 很给力!

查看全部评分

回复

使用道具 举报

0

主题

9

帖子

83

积分

一级会员

Rank: 2

积分
83
发表于 2013-9-10 12:39:33 | 显示全部楼层

稍微的不是很流畅。想知道有什么办法可以流畅一些。不过顶了。很强大。

稍微的不是很流畅。想知道有什么办法可以流畅一些。不过顶了。很强大。
回复

使用道具 举报

16

主题

58

帖子

515

积分

培训班

积分
515
 楼主| 发表于 2013-9-10 12:40:24 | 显示全部楼层

[quote][size=2][url=forum.php?mod=redirect&goto=findpost&pid=61301&ptid=10820][c

神码 发表于 2013-9-10 12:19
很炫的效果,小小改进了一下,
改用更容易控制的动画事件,改为动态设置图像URL,动态获取图像大小,
放 ...

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

使用道具 举报

16

主题

58

帖子

515

积分

培训班

积分
515
 楼主| 发表于 2013-9-10 12:42:16 | 显示全部楼层

[quote][size=2][url=forum.php?mod=redirect&goto=findpost&pid=61302&ptid=10820][c

智慧人生 发表于 2013-9-10 12:39
稍微的不是很流畅。想知道有什么办法可以流畅一些。不过顶了。很强大。

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

使用道具 举报

5

主题

444

帖子

2510

积分

五级会员

Rank: 8Rank: 8

积分
2510
发表于 2013-9-10 14:33:49 | 显示全部楼层

我前面改的已经把outline放到动画最后才显示了,不会影响动画流畅度, 因为改成动画,需要自己调整延时参数,不同的延时参数会有不同的流畅度,有的人喜欢快,有

我前面改的已经把outline放到动画最后才显示了,不会影响动画流畅度,
因为改成动画,需要自己调整延时参数,不同的延时参数会有不同的流畅度,有的人喜欢快,有的人喜欢平滑,这个需要细细调整出最好的效果。

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

使用道具 举报

16

主题

138

帖子

942

积分

三级会员

Rank: 4

积分
942
发表于 2013-9-10 19:23:34 | 显示全部楼层

又一个精品,可惜这次又来晚了

又一个精品,可惜这次又来晚了
原创网http://fanal.cn谢谢支持
回复

使用道具 举报

16

主题

58

帖子

515

积分

培训班

积分
515
 楼主| 发表于 2013-9-10 21:48:24 | 显示全部楼层

[quote][size=2][url=forum.php?mod=redirect&goto=findpost&pid=61305&ptid=10820][c

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

多谢指教!
多多洛 专注界面 QQ 334150781
回复

使用道具 举报

0

主题

2

帖子

16

积分

新手入门

Rank: 1

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

真心不错!

真心不错!
回复

使用道具 举报

1

主题

8

帖子

55

积分

一级会员

Rank: 2

积分
55
发表于 2014-6-12 13:48:40 | 显示全部楼层

[quote][size=2][url=forum.php?mod=redirect&goto=findpost&pid=61301&ptid=10820][c

神码 发表于 2013-9-10 12:19
很炫的效果,小小改进了一下,
改用更容易控制的动画事件,改为动态设置图像URL,动态获取图像大小,
放 ...

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

使用道具 举报

5

主题

444

帖子

2510

积分

五级会员

Rank: 8Rank: 8

积分
2510
发表于 2014-6-12 14:19:55 | 显示全部楼层

[quote][size=2][url=forum.php?mod=redirect&goto=findpost&pid=66508&ptid=10820][c

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

帖子

32

积分

新手入门

Rank: 1

积分
32
发表于 2014-11-17 13:50:29 | 显示全部楼层

{:3_48:}太强大了!

太强大了!
回复

使用道具 举报

1

主题

11

帖子

127

积分

一级会员

Rank: 2

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

使用道具 举报

您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

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

GMT+8, 2017-11-25 13:19 , Processed in 0.140625 second(s), 23 queries , WinCache On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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