如何使用layer展示弹窗包含QQ图标打开QQ事件

使用layer展示弹窗的实现html代码，效果看起来还不错，需要的朋友赶紧用起来。

一、效果展示

二、代码

以下是具体的实现代码片段，大家根据顺序复制添加即可。

html代码

<!DOCTYPE html>
<html>
<head>
  <title>hover-tips</title>
  <!--阿里矢量图库引入图标样式-->
  <link rel=stylesheet href=https://at.alicdn.com/t/font_1213440_afnvx78jhfm.css>
  <!--引入layer.css-->
  <link rel=stylesheet href=https://cdn.staticfile.org/layer/2.3/skin/layer.css>
  <!--引入jquery-->
  <script src=https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js></script>
  <!--引入layer.js-->
  <script src=https://cdn.staticfile.org/layer/2.3/layer.js></script>
</head>
<body>
<div class=div0>
  <input type=hidden id=layer_mobile value=13912341234/>
  <input type=hidden id=layer_qq value=123/>
  <a href=javascript:; class=tips-info>
    <i class=iconfont icon_prd_2lianxikefu-biger></i>
  </a>
</div>
</body>
 
</html>

要用到layer，需要引入layer.js和layer.css文件，在实际开发中可以直接从官网（https://www.layui.com/）把文件下载下来放到项目中，我这里是用的Staticfile CDN的开源库：http://www.staticfile.org/，图标则是使用的阿里矢量图库中的iconfont

js代码

var timer;
/*悬浮展示信息效果---start*/
$(document).on({
          mouseenter: function () {
          clearTimeout(timer);
          var mobile = $(#layer_mobile).val();
          var qq = $(#layer_qq).val();
          var qqExist = function () {
              if (qq) {
                  return '<li><label htmlFor=>QQ：</label><a href=tencent://message?uin='+qq+'&Site=&menu=yes><i class=iconfont icon_prd_qq2></i></a></li>';
                    }
                  return '';
                };
           layer.tips(
                    '<div class=layer-tips-info>' +
                    '<ul>' +
                    '<li><label htmlFor=>电话：</label>'+ mobile +'</li>' +
                    '<li><label htmlFor=>手机：</label>13912341234</li>' +
                    qqExist() +
                    '</ul></div>',
                    $(this), {
                        tips: [1, '#fff'],
                        time: ''
                    })
            },
            mouseleave: function () {
                timer = setTimeout(function () {
                    layer.closeAll();
                }, 500);
            }
        }, '.tips-info');
/*悬浮展示信息效果---end*/
/*鼠标指到tips上时让tips不会消失---start*/
$(document).on({
      mouseenter: function () {
           clearTimeout(timer)
      },
      mouseleave: function () {
           layer.closeAll();
      }
    }, '.layui-layer-tips');
/*鼠标指到tips上时让tips不会消失---end*/

mouseenter：当鼠标指针穿过元素时，会发生 mouseenter 事件。jQuery 事件 - mouseenter() 方法

mouseleave：当鼠标指针离开元素时，会发生 mouseleave 事件。jQuery 事件 - mouseleave() 方法

layer.tips(content,follow,options) tips层

content：tips中需要展示的内容

follow：#id或者.class

options：可选，tips参数，控制tips的方向和颜色，1-上、默认(2)-右、3-下、4-左。例如tips: [1, '#fff']

更多用法：http://layer.layui.com/

打开qq控件：<a href=tencent://message?uin=oneQqNum&Site=&menu=yes>

oneQqNum写想要打开的qq，其他地方写死就行

css代码

body{
  font: 12px/1 Microsoft Yahei, Tahoma, Helvetica, Arial, \5b8b\4f53, sans-serif;
}
ul{
  list-style: none;
  padding:0;
}
.div0{
  margin-left:100px;
  margin-top:200px;
}
.layer-tips-info {
  color: #000;
  width: 200px;
  padding: 10px; 
}
.layer-tips-info li {
    margin-bottom: 10px;
}
 
.layer-tips-info li label {
   color: #000;
   margin-right: 5px; 
}

layer QQ事件 QQ图标展示弹窗