QQ头像的延时提示框

我们经常登QQ，也都经历过这种情况，鼠标放在对方的头像上就可以显示出其基本信息，利用延时器可以极好的避免了鼠标移出头像时，名片就立马消失的效果。看似很简单的操作用JavaScript写还是有点小逻辑在的。下面分享我的一篇代码：

最终效果图：

到底是如何实现的呢？

首先在body中写入两个div作为框架，并加入图片

注：这里的头像要单独拿出来，作为一个单独的图片加入进去。以便后面用JS控制鼠标经过头像时名片才显示出来。

其次为这些div加入样式

最后，为其添加JS效果：

注：setTimerout是添加定时器的，鼠标滑动时可以停留300毫秒便于切换到名片上，没有闪退的效果。

同学们可以自己试一试哦，代码还是要多敲，熟能生巧。我会一直学习前端，虽然不够聪明，但会一直坚持下去！

QQ头像的延时提示框相关推荐

js笔记（9）之定时器数字时钟延时提示框
定时器 function show(){alert('a'); } setInterval(show,1000); 函数,毫秒(间隔型.无限次执行) setTimeout(show,1000); (延 ...
自定义Dialog提示框高仿QQ浏览器版本更新提示框
前言: 今天是5月7号,真的好久没有写博客了,时光匆匆,我总感觉自己忙忙碌碌似的,静想片刻确实是挺忙的,但是在繁忙当中却缺少了总结归纳,相信大家都知道总结归纳的重要性了,今天我要和大家分享我的自定义D ...
将你的 QQ 头像（或者微博头像）右上角加上红色的数字，类似于微信未读信息数量那种提示效果。类似于图中效果
第 0000 题:将你的 QQ 头像(或者微博头像)右上角加上红色的数字,类似于微信未读信息数量那种提示效果. 类似于图中效果这个问题需要用到PIL库,涉及到一些非常基本的用法.代码如下: from ...
第 0000 题：将你的 QQ 头像（或者微博头像）右上角加上红色的数字，类似于微信未读信息数量那种提示效果。
第 0000 题: 将你的 QQ 头像(或者微博头像)右上角加上红色的数字,类似于微信未读信息数量那种提示效果. from PIL import Image,ImageFont,ImageDraw,I ...
C# 获取指定 “QQ头像“ 绘制 “圆形头像框“GDI(Graphics)
效果图: 完全代码(下方有详细解读) private void textBox1_TextChanged(object sender, EventArgs e){//这里是文本框的事件值发生改变时 ...
Android仿QQ、微信聊天界面长按提示框效果
最近在工作项目中要实现一个长按提示 "复制" 的功能,类似于QQ.微信聊天界面长按提示框效果,本来想偷懒在网上找个开源的项目用,但是看了好几个都不是很满意,所以就打算按照自己的思路 ...
【每日python小程序练习】第一天：将你的 QQ 头像（或者微博头像）右上角加上红色的数字，类似于微信未读信息数量那种提示效果。
题目:将你的 QQ 头像(或者微博头像)右上角加上红色的数字,类似于微信未读信息数量那种提示效果. 类似于图中效果 from PIL import Image,ImageDraw,ImageFont ...
Android 9.0 延时开机动画解决首次开机黑屏和去掉android正在启动的提示框
1.概述在9.0的系统产品rom定制化开发中,在一些产品中会出现在首次开机的时候,由于在开机动画播放完以后会出现几秒短暂的黑屏情况,然后进入默认Launcher,这在产品体验上也是感觉到有点差,所 ...
Android文本长按qq风格,Android仿QQ、微信聊天界面长按提示框效果
先来看看效果图如何使用示例代码 PromptViewHelper pvHelper = new PromptViewHelper(mActivity); pvHelper.setPromptVie ...

QQ头像的延时提示框

QQ头像的延时提示框相关推荐

最新文章

热门文章