本次项目聚焦于模仿QQ登录界面。我们知道在QQ登录界面,点击QQ头像会在右侧横移出现一个添加账号的加号按钮。
本文将简单地实现鼠标移动到QQ头像,右侧会横移出现一个添加账号的按钮;鼠标移开,该按钮再滑到头像下面。
需要的控件:2个picturebox、2个timer控件***(一个用于向右横移、一个用于向左横移)。***
将这个加号图片隐藏在QQ头像下面:将这个加号图片隐藏在QQ头像下面的方法:右键点击这个加号picturebox,选择“置于底层”选项。这样就能将这个图片隐藏起来。
描述一下整个动作的逻辑:当鼠标移动到QQ头像这个图片时,添加账号这个图片从右侧滑出;当鼠标从该图片移出时,添加账号这个图片滑进该图片下面。
以下是实现该功能的步骤:
1、从工具箱中拉取两个timer控件设置相关属性,Interval表示每次动作的周期,单位为毫秒。
2、点击QQ头像这个图片找到MouseEnter、MouseLeave事件:
双击Enter事件进入代码编辑:
private void pictureBox1_MouseEnter(object sender, EventArgs e)
{
flag = 1;//没什么作用
timer1.Enabled = true;//表示时钟开启
}
3、双击timer1的tick事件,进行代码编辑:
private void timer1_Tick(object sender, EventArgs e)
{
if (flag == 1 && pictureBox11.Left <= 350)//根据位置判断
{
pictureBox11.Left = pictureBox11.Left + 4;//每次动作移动4个单位长度
}
else if (pictureBox11.Left >350)
timer1.Enabled = false;//到达该位置后停止时钟,相关动作停止,图片不再向右移动。
}
图片回到原来位置的操作是相同的,就不再赘述。
回归原来位置的代码,根据位置来判断移动是否停止,这次用的是timer2控件:
private void pictureBox1_MouseLeave(object sender, EventArgs e)
{
flag = 2;
timer2.Enabled = true;
}
private void timer2_Tick(object sender, EventArgs e)
{
if (flag == 2 && pictureBox11.Left >= 200)
{
// timer2.Enabled = true;
pictureBox11.Left = pictureBox11.Left - 4;
}
else if (pictureBox11.Left < 200)
{
timer2.Enabled = false;
}
}
}