HTMLayout仿Picasa照片查看器效果

多多洛 · 发表于 2013-9-9 23:03:40

本帖最后由多多洛于 2013-9-10 07:51 编辑

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

第四弹 —— 仿Picasa照片查看器效果
预览图：

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

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

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

本例源码下载地址：

仿Picasa照片查看器效果.7z (64.9 KB, 下载次数: 1648)

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

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

多多洛 · 发表于 2013-9-10 12:40:24

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

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

多多洛 · 发表于 2013-9-10 12:42:16

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

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

神码 · 发表于 2013-9-10 14:33:49

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

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

vbvfp · 发表于 2013-9-10 19:23:34

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

多多洛 · 发表于 2013-9-10 21:48:24

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

多谢指教！

C1188598 · 发表于 2013-11-27 21:51:29

真心不错!

ldd200888 · 发表于 2014-6-12 13:48:40

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

请问，为何close按钮的tip显示为两个方框（乱码），而非“关闭”呢？？如何才能正常显示？

神码 · 发表于 2014-6-12 14:19:55

ldd200888 发表于 2014-6-12 13:48
请问，为何close按钮的tip显示为两个方框（乱码），而非“关闭”呢？？如何才能正常显示？

关闭按钮指定了Webdings字体，该字体中文是乱码。
所以可以参考多多洛的代码，指定一下提示框的字体，

/*提示框样式*/
popup {
font-family: '微软雅黑','宋体';
font-size: 12px;
font-weight: normal;
padding: 0 5px;
}

复制代码

jasongaoks · 发表于 2014-11-17 13:50:29

太强大了！

rotou · 发表于 2017-8-20 10:46:07

这个效果做的不错。学习了

ibsmagic · 发表于 2018-6-7 16:02:13

有个问题，就是htmllayout调用的是IE的内核吧，速度会比较慢？而且根据系统装的版本不同，会不会运行效果不同？

		自动登录	找回密码
密码			注册会员