搜索
aardio官方社区 门户 查看主题

HTMLayout仿Picasa照片查看器效果

发布者: 多多洛 | 发布时间: 2013-9-9 23:03| 查看数: 14878| 评论数: 14|帖子模式

本帖最后由 多多洛 于 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, 下载次数: 1271)

最新评论

╰簬飝_⑤⑥壹╯ 发表于 2013-9-10 12:10:25

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

厉害啊,必须顶啊。。。
Maxsl.Meng 发表于 2013-9-10 12:18:40

超屌的效果..很实用

超屌的效果..很实用
神码 发表于 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
学习了  发表于 5 天前

评分

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

查看全部评分

智慧人生 发表于 2013-9-10 12:39:33

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

稍微的不是很流畅。想知道有什么办法可以流畅一些。不过顶了。很强大。
多多洛 发表于 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!脚本用法;
赞一个!
多多洛 发表于 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阴影有关系;
还有,官方范例里的一些动画效果的流畅度也不是很理想,但还是可以接受的;
如果不是太挑剔的话.
神码 发表于 2013-9-10 14:33:49

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

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

用半透明的PNG做背景性能会好一些,因为outline是实时运算出来的,不过这种全屏图像预览程序用outline也无所谓了。
vbvfp 发表于 2013-9-10 19:23:34

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

又一个精品,可惜这次又来晚了
多多洛 发表于 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放到动画最后才显示了,不会影响动画流畅度,
因为改成动画,需要自己调整延时参 ...

多谢指教!
C1188598 发表于 2013-11-27 21:51:29

真心不错!

真心不错!
ldd200888 发表于 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显示为两个方框(乱码),而非“关闭”呢??如何才能正常显示?
神码 发表于 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. }
复制代码
jasongaoks 发表于 2014-11-17 13:50:29

{:3_48:}太强大了!

太强大了!
rotou 发表于 2017-8-20 10:46:07
这个效果做的不错。学习了

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

GMT+8, 2017-11-23 21:01 , Processed in 0.093750 second(s), 22 queries , WinCache On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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