搜索
查看: 7761|回复: 12

[界面] HTMLayout仿桌面歌词效果

  [复制链接]

16

主题

58

帖子

527

积分

培训班

积分
527
发表于 2013-9-12 00:28:29 | 显示全部楼层 |阅读模式
声明:HTMLayout 界面实战 系列完全授权给 aardio论坛任意使用,本人不保留任何权利,大力支持AAU!
本系列模仿界面本意是学习如何使用 HTMLayout,请不要用于非法用途!
本系列后续还有其他界面仿制,请各位提出好的界面以便斟酌仿制!

第五弹 —— HTMLayout仿桌面歌词效果
预览图:
demo.png

特点:
1. 使用的自定义中文字体博洋行书7000,字体文件是经过阉割的,为了缩小体积,仅仅保留需要显示的文字字体,本例说明,在htmlayout中使用自定义中文字体是可行的,有了@font-face 您可以将 草檀斋毛泽东字体、书体坊兰亭体 等等很酷的字体嵌入到软件资源当中,几MB的书法体汉字库如果是web页面加载的话是个可怕的事情,而在本地软件htmlayout中则不存在网络加载字体库的问题。使您应用特殊字体文件得心应手。

2. 可以拖动歌词显示区域,鼠标移动到歌词上显示半透明背景,即可拖动之。

3. 歌词的动态着色的效果的实现原理是:复制同样文字内容的一个层,使其遮罩于原文字层之上,并设置文字不换行,指定宽度,超出显示区域隐藏,然后再aau部分动态控制这个层的宽度百分比,使效果看起来就像卡拉Ok屏幕上的歌词染色效果一样。

4.这只是一个想法的试验品,主要是验证歌词染色效果是否可行。

遗憾:
1. 未能实现文字的颜色渐变效果,目前只能是纯色,尚未发现有解决方案;
2. 当歌词超长时,即超出屏幕显示范围的长度时,有可能会造成上下2层文字的错位。
3. 因为outline阴影的特性,导致歌词部分鼠标悬停时候动态设置的背景色夺取了文字的阴影渲染效果,阴影渲染给了带背景的div元素,导致文字在悬停、拖动时候失去了阴影效果;
4. 歌词在着色过程中,如果右键弹出菜单,会阻止继续着色。

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

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

本例源码下载地址: 仿桌面歌词效果.7z (27.38 KB, 下载次数: 561)

评分

参与人数 1银币 +10 收起 理由
handongcn + 10

查看全部评分

coder
回复

使用道具 举报

0

主题

29

帖子

274

积分

二级会员

Rank: 3Rank: 3

积分
274
发表于 2013-9-12 11:07:58 | 显示全部楼层

很酷的效果

很酷的效果
回复

使用道具 举报

0

主题

34

帖子

276

积分

二级会员

Rank: 3Rank: 3

积分
276
发表于 2013-9-12 14:17:57 | 显示全部楼层

{:3_41:}厉害,牛逼了。。。

厉害,牛逼了。。。
回复

使用道具 举报

14

主题

56

帖子

534

积分

培训班

积分
534
发表于 2013-9-14 10:47:37 | 显示全部楼层

高产用户,让我等刚入门HTMLayout的望尘莫及!

高产用户,让我等刚入门HTMLayout的望尘莫及!
回复

使用道具 举报

7

主题

87

帖子

593

积分

三级会员

Rank: 4

积分
593
发表于 2013-9-15 17:47:25 | 显示全部楼层

能从你的代码中学到不少东西!感谢你的分享!

能从你的代码中学到不少东西!感谢你的分享!
本人男,爱好女!
http://www.hxcarrot.com
回复

使用道具 举报

2

主题

77

帖子

559

积分

三级会员

Rank: 4

积分
559
发表于 2013-9-27 09:09:17 | 显示全部楼层

不错,学习了

不错,学习了
回复

使用道具 举报

3

主题

23

帖子

153

积分

一级会员

Rank: 2

积分
153
发表于 2013-9-27 17:48:33 | 显示全部楼层

支持下,界面做的很好~~值得学习~~

支持下,界面做的很好~~值得学习~~
回复

使用道具 举报

0

主题

1

帖子

5

积分

新手入门

Rank: 1

积分
5
发表于 2013-10-5 15:37:21 | 显示全部楼层

那要怎么样实现让他自动平滑滚动?

那要怎么样实现让他自动平滑滚动?
回复

使用道具 举报

0

主题

1

帖子

32

积分

新手入门

Rank: 1

积分
32
发表于 2016-3-15 17:37:33 | 显示全部楼层

资源开销太大

资源开销太大
回复

使用道具 举报

0

主题

4

帖子

80

积分

一级会员

Rank: 2

积分
80
发表于 2016-3-29 14:23:45 | 显示全部楼层

学习了,很好很酷

学习了,很好很酷
回复

使用道具 举报

2

主题

38

帖子

258

积分

二级会员

Rank: 3Rank: 3

积分
258
发表于 2016-4-27 08:50:53 | 显示全部楼层

学习了{:3_41:}

学习了
回复

使用道具 举报

0

主题

10

帖子

60

积分

一级会员

Rank: 2

积分
60
发表于 2016-9-2 20:17:20 | 显示全部楼层

学习了,收藏

学习了,收藏
回复

使用道具 举报

13

主题

55

帖子

314

积分

二级会员

Rank: 3Rank: 3

积分
314
发表于 2016-9-5 15:54:32 | 显示全部楼层

搞的非常的好,学习学习

搞的非常的好,学习学习
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2020-2-17 23:32 , Processed in 0.062500 second(s), 29 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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