案例14-QQ延时显示弹框

最新推荐文章于 2020-04-30 17:29:36 发布
最新推荐文章于 2020-04-30 17:29:36 发布
阅读量147 收藏
点赞数
分类专栏： 案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kino2046/article/details/100839778
版权


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>QQ延时面板</title>

    <style>

        .wrap{

            width: 300px;

            height: 700px;

            border: 1px solid #000;

            box-shadow: 0 0 10px #000;

            position: absolute;

            right: 40px;

            top: 10px;

            border-radius: 10px;

        }

        .user{

            height: 150px;

            border-bottom: 1px solid rgb(70, 120, 212);

        }

        .user a{

            text-decoration: none;

            color: #000;

            position: absolute;

            right: 10px;

            top: 10px;

        }

        .avatar{

            width: 100px;

            height: 100px;

            border-radius: 50%;

            border: 2px solid rgb(57, 150, 236);

            position: absolute;

            left: 10px;

            top: 20px;

            cursor: pointer;

        }

        .info{

            width: 200px;

            height: 150px;

            position: absolute;

            background-color: rgb(238, 180, 180);

            left: -210px;

            top: 0;

            border-radius: 10px;

            box-shadow: 0 0 10px rgb(243, 88, 88);

            display: none;

        }

        .info p{

            text-indent: 10px;

            color: rgb(110, 6, 6);

        }

    </style>

</head>

<body>

    <div class="wrap">

        <div class="user">

            <a href="javascript:;">☓</a>

            <div class="avatar">

                <img src="./img.png" alt="">

            </div>

        </div>

        <div class="info">

            <p>昵称：开课吧</p>

            <p>地点：北京市 朝阳区</p>

        </div>

    </div>

<script>

function $(cssSelector){

    var els = document.querySelectorAll(cssSelector);

    return els.length > 1?els:els[0];

};  

/*

    css 方法，用来获取或设置样式

    只传：el,attr 获取样式

    el,attr,val: 设置样式

*/  

function css(el,attr,val){

    if(val === undefined){

        return getComputedStyle(el)[attr]

    }

    el.style[attr] = val;

} 

(function(){

    var avatar = $(".avatar");

    var info = $(".info");

    var timer = 0;

    // avatar.onmouseover = function(){

    //     clearTimeout(timer);

    //     css(info,"display","block");

    // };

    // avatar.onmouseout = function(){

    //     clearTimeout(timer);

    //     timer = setTimeout(function(){

    //         css(info,"display","none");

    //     },200);

    // };

    // info.onmouseover = function(){

    //     clearTimeout(timer);

    // };

    // info.onmouseout = function(){

    //     clearTimeout(timer);

    //     timer = setTimeout(function(){

    //         css(info,"display","none");

    //     },200);

    // };

    info.onmouseover =  avatar.onmouseover = function(){

        clearTimeout(timer);

        css(info,"display","block");

    };

    info.onmouseout = avatar.onmouseout = function(){

        clearTimeout(timer);

        timer = setTimeout(function(){

            css(info,"display","none");

        },200);

    };

    // info.onmouseover = function(){

    //     clearTimeout(timer);

    //     css(info,"display","block");

    // };

 

})()    

</script>

</body>

</html>

kino2046
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
QQ头像的延时提示框
webs_chen的博客
11-24 875
我们经常登QQ，也都经历过这种情况，鼠标放在对方的头像上就可以显示出其基本信息，利用延时器可以极好的避免了鼠标移出头像时，名片就立马消失的效果。看似很简单的操作用JavaScript写还是有点小逻辑在的。下面分享我的一篇代码： 最终效果图： 到底是如何实现的呢？ 首先在body中写入两个div作为框架，并加入图片 注：这里的头像要单独拿出来，作为一个单独的图片加入进去。以便后面用J
延迟弹出QQ对话框
fjnjxr的博客|PHP每周一贴
12-19 928
三、设置多个QQ客服，然后随机弹出一个客服QQ对话框 针对企业中有多个客服的情况，为了客服直接合理分配接待。刚刚也研究出了一套解决方案就是预设多个客服QQ，然后给访客随机弹出一个客服QQ的对话框！当然这个适合于企业，对于个人站长就没必要了。 多客服代码如下： 1 2 3 4 5 6 7 8 9 10
用setTimeout模拟QQ延时提示框
aizhanqian5077的博客
12-22 132
很简单的代码，不多解释，一看就懂。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> #div1{width:50px; height...
JS延时提示框
blacop的博客
09-28 425
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style> div {float:left;margin: 10px} #div1{width:50px;height: 50px;background: red;} #div2{wi
延时提示框
女神修炼日记
11-24 314
思路思考： 1、鼠标移入移出效果 2、定时器延时消失效果 解决过程： var oDiv1 =document.getElementById('div1'); var oDiv2 =document.getElementById('div2'); var timer; oDiv1.onmouseover=oDiv
swift-HHPopController更好用的仿微信QQ弹框控件
08-15
Swift-HHPopController是专为iOS开发者设计的一个高效、易用的弹框控件，它模仿了微信和QQ中的弹出对话框效果，为应用程序添加了一种优雅的用户交互方式。这个库是用Swift编程语言编写的，充分利用了Swift的语法特性...
ios-Swift-QQ最新版抽屉侧滑和弹框视图.zip
07-11
源码GitHub地址：https://github.com/wangliujiayou/DrawerView 欢迎Star. 简书地址: http://www.jianshu.com/p/679b94639765
Delphi实现QQ消息弹框.doc
11-14
在本文档中，我们讨论如何使用Delphi编程语言来实现类似QQ消息弹框的效果。首先，这个弹框设计灵感来源于Microsoft Messenger和QQ2004奥运版，它具有吸引用户注意力的特点，如从屏幕右下角逐渐弹出，无标题但可移动...
纯CSS实现微信小程序仿QQ顶部提示弹框动画效果
09-22
微信小程序仿QQ顶部提示弹框动画效果的实现，主要是通过纯CSS代码完成的动画效果。这种效果在现代网页和移动应用中非常常见，用来提供用户操作的即时反馈或者提示信息。在这个案例中，我们将详细探讨如何利用微信小...
vs2010 mfc 类似QQ弹框源码
04-09
【QQ弹框】：QQ弹框是指腾讯QQ软件在用户界面中显示的一种通知方式，通常出现在屏幕右下角，用于提示新消息、更新或其他系统事件。这种弹框设计直观、易于吸引用户的注意力，且不干扰主窗口的操作。 【右下角消息弹...
js延时提示框
qq_37729827的博客
12-26 236
延时提示框<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ float: left; margin: 10px; }
js小功能---延迟提示框
qq_39396275的博客
07-02 567
效果如下： 代码如下： &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;延迟提示框&lt;/title&gt
QQ弹窗功能中遇到的问题及如何实现
曾小超的博客
01-04 336
遇到的问题一：窗口一直抖动 overflow-y: scroll;//让滚动条始终存在 遇到的问题二：出现底部滚动条 overflow-x:hidden;//让底部滚动条隐藏 遇到的问题三：忘记修改值 .ad{ position: fixed; right: 0; bottom: 0; width: 576px; /高度一开始设为324px好调位置，最后要设为0/ height:0; border...
案例25：随机打乱图片
kino2046的博客
03-26 997
<!DOCTYPEhtml> <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>无标题文档</title> <linkrel="styl...
案例6-输入正确的QQ号码
kino2046的博客
09-06 827
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta ...
案例5-九九乘法表-颠倒的
kino2046的博客
09-05 548
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-C...
案例：鼠标滚轮改变div高度
kino2046的博客
04-30 493
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-e...
使用Delphi构建QQ风格的消息弹框
这种弹框在显示时从屏幕右下角逐渐滑出，具有无标题但可移动和调整大小的特性，以及不规则形状（如圆角）和渐变色的视觉效果。以下是实现这些功能的关键知识点： 1. **无标题窗体拖动与大小调整**： Delphi中的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值