用duilib制作仿QQ2013动态背景登录器
转载请说明原出处,谢谢~~
在上一篇博客里,我修复了CActiveXUI控件的bug,从而可以使用flash动画来制作程序的背景,这篇博客说明一下应该怎么使用CActiveXUI控件创建透明无窗体的背景。
去年的QQ2013的登陆界面就是动态界面,上篇博客我说道了,Duiengine已经有高人做好了仿QQ界面的代码,我这里只是把QQ2013的动态登陆界面制作出来。而QQ2014又换了全新的界面,不过熟悉UI制作的朋友知道,模仿QQ2014的登陆界面比Q2013的还要简单。可以看到QQ2013的登录器的如果特点就是背景是动态,这个只要使用flash文件做背景就可以了。上一篇博客已经打好了基础,现在做起来就很简单了。
我先分析一下QQ2013的登录器的布局:如图
从界面元素来讲,QQ登陆起的控件没几个,而且也只是常规的布局,最外层一个纵向布局,里面包含上中下三个横向布局,整个窗体都是可以拖动的。
其中的上下布局很简单,我就不额外赘述了,写好相对布局,贴图上去就行了。
中间的布局的左侧是一个CControlUI控件,设置背景图就可以,在这个图片右下角有一个状态按钮,选择登陆后的状态,这里的话用绝对布局放一个小图片到头像图片的右下角,然后在点击他时弹出个菜单就可以了,菜单的部分我也在前面的博客里说明了。而右侧就是一个CEditUI,一个CComboUI,两个CLabel,两个COptionUI控件。麻烦一点的就是帐号输入框,如果要达到和QQ一样效果就最好自定义一个CCbomboUI控件。最近在忙着做仿酷狗程序,我就不再花时间在这里开发这个控件了,好在这个控件开发起来应该很容易,可以参照我前面的仿酷狗的文章。
而在xml中布局时,应该怎么布局就可以让flash做背景了?我这里说明一下。比如这个QQ登陆,我前面说了最外层应该使用一个纵向布局,如果要加上flash背景,就应该再额外套用一个布局来做最外层,里面包含一个CActiveXUI控件播放flash,再用绝对布局把QQ登陆起的布局放到flash上面,下面是示例代码和效果图:
<?xml version="1.0" encoding="UTF-8"?>
<Window size="380,290" caption="0,0,0,290" roundcorner="3,3" ><VerticalLayout bordersize="1" bordercolor="#FF000000" ><ActiveX name="flashActiveX" clsid="{D27CDB6E-AE6D-11CF-96B8-444553540000}" mouse="false"/><VerticalLayout bkcolor="00FFFFFF" float="true" pos="0,0" width="380" height="290" ><HorizontalLayout height="30" bkcolor="00FFFFFF" inset="2,2,0,0"><!-- 标题栏 --><Label text=" 仿QQ登录器2013 BY:Redrain" textcolor="#FFFF0000" width="280" /><Control /><Button name="closebtn" width="42" maxheight="18" tooltip="点击这里直接退出游戏" normalimage="file='frame_btn_close_normal.bmp' mask='#FFFF00FF'" hotimage="file='frame_btn_close_hot.bmp' mask='#FFFF00FF'" pushedimage="file='frame_btn_close_down.bmp' mask='#FFFF00FF'"/></HorizontalLayout ><HorizontalLayout bkcolor="00FFFFFF" > <!-- 主操作栏 --></HorizontalLayout><HorizontalLayout bkcolor="00FFFFFF" height="50"> <!-- 登陆按钮 --><Button name="LoginBtn" text="登陆" padding="110,0,0,0" width="165" height="30" normalimage="file='login_btn_normal.png' conrer='10,10,10,10'" hotimage="file='login_btn_normal.png' conrer='10,10,10,10'" pushedimage="file='login_btn_normal.png' conrer='10,10,10,10'"/> </HorizontalLayout></VerticalLayout></VerticalLayout>
</Window>
就说道这里吧,为了防止有人用他做界面型盗号木马,我就不把源码公布了,相信看到这里,我不公布代码大家也能做出和QQ 2013一样的登陆界面了。
Redrain 2014.8.8
用duilib制作仿QQ2013动态背景登录器相关推荐
- Android 仿QQ动态背景登录
记得前阵子高考的那段时间,发现QQ的登录背景是会动的,看起来逼格很高.而今天也来带领大家去实现这样一个逼格很高的 动态登录背景. 之前网上看到有一些也实现了这样的功能,但基本只是给了个按钮表示一下,然 ...
- 如何制作一个简单动态背景登录页面?
所需文件如下: 草方块.ico为页签图标(可以替换为自己想要得图标icon) new_video.mp4为背景视频(可以替换为自己的视频内容) login.html文件内容 <!DOCTYPE ...
- HTML5+CSS3+JS制作动态背景登录界面
目录 第一步:编写HTML框架 第二步:设置css样式表 第三步:编写js代码 第一步:编写框架 1.分别新建html,css和js文档后,将css和js分别链接至html中. 2.编写html基本框 ...
- HTML+CSS实现动态背景登录页面
实现背景图片的动态变换 首先我们把背景图片插入进去,在HTML页面body板块中,添加几个图片div <body><div class="bgk">< ...
- android uber启动动画,仿 Uber 视频背景登录界面以及登录动画
现在有越来越多的 app 的登录/注册界面的背景是播放视频或者 gif,我主要看了 Uber 和 keep 的登录界面再配合拉勾的登录界面仿作了一个登录界面. 1.首先,查资料 我在 github 上 ...
- 樱花动态背景登录页面
樱花3D旋转 1.页面效果 登录页面 注册页面 目录: 部分代码展示: css代码 源码下载请到:https://download.csdn.net/download/m0_60407695/3464 ...
- android采用MVP完整漫画APP、钉钉地图效果、功能完善的音乐播放器、仿QQ动态登录效果、触手app主页等源码...
Android精选源码 一个可以上拉下滑的Ui效果,觉得好看可以学学 APP登陆页面适配 一款采用MVP的的完整漫画APP源码 android实现钉钉地图效果源码 一个使用单个文字生成壁纸图片的app ...
- android采用MVP完整漫画APP、钉钉地图效果、功能完善的音乐播放器、仿QQ动态登录效果、触手app主页等源码
Android精选源码 一个可以上拉下滑的Ui效果,觉得好看可以学学 APP登陆页面适配 一款采用MVP的的完整漫画APP源码 android实现钉钉地图效果源码 一个使用单个文字生成壁纸图片的app ...
- duilib修复ActiveXUI控件bug,以支持flash透明动态背景
转载请说明原出处,谢谢~~ 昨天在QQ控件里和同学说起QQ2013登陆窗体的开发,从界面角度考虑,单单一个登陆界面是很容易做出来的.腾讯公司为了防止各种盗号行为可谓煞费苦心,QQ2013采用了动态背景 ...
最新文章
- windows下安装程序制作
- ASINetworkQueues(经典2)
- _splitpath,_makepath分析路径
- BOM--window对象
- 如何为项目配置opencv
- 产品经理如何搭建自己的知识地图?
- 国内外流行的JS游戏开发框架介绍---kalrry
- 优化mac触摸板(Trackpad)使用体验的推荐设置
- ardupilot固件二次开发_【国外开源】无人机 ArduPilot Mega 控制板原理图/PCB/固件源码...
- 《马丁伊登》读后感范文(下)2000字
- 网易大神app ios和android,网易大神app是干嘛的?网易大神有什么用?
- php简易留言板功能,PHP实现简单留言板功能的方法
- 机器学习概述----机器学习并没有那么深奥,它很有趣(2)
- eclipse 反编译插件安装
- layer弹出iframe的高度不自适应。一直是150px
- 计算机主板diy,DIY电脑配件立即选——主板篇
- xmta温度控制仪说明书_【智能温控仪XMTA-908说明书】- 黄页88网
- 详解ERP中的计划层次!
- DLNA DMR实现
- 移动设备是一种口袋大小的计算机设备,移动设备视频格式如何转换?
热门文章
- 媒体 | 冒志鸿:理想nine percent最难寻
- 拉普拉斯算子的疑惑--拉普拉斯算子作用于矢量和定义Hessian矩阵时遇到的问题
- nodeJS实现简易爬虫
- 收藏了!3D建模软件大全,想入门3D建模的小伙伴一定不要错过
- win10能上网显示无法连接服务器,电脑不能联网怎么办 Win10无法连接网络解决方法...
- 报错Field Mapper in xxx.xxxServiceImpl required a bean of type ‘dao.xxxMapper‘ that could not be found
- 成绩统计(编写一个使用EL的jsp程序)
- MPI多进程问题记录
- 漫画丨什么是边缘云?
- JavaWeb --MYSql(MySql基础,MySql高级,JDBC,从类路径下加载输入流对象)