专栏首页前端资源QQ聊天插件,鼠标划入划出显示隐藏效果。

QQ聊天插件,鼠标划入划出显示隐藏效果。

最近进行网站的二次开发,其中有一个在线客服插件,要修改一下,之前是点击显示隐藏,要改成鼠标移入移出显示隐藏。

HTML部分代码:

<div class="service_qq" style="right: -175px;">
    <div id="rightArrow" style="background-position: -50px 0px;"><a href="javascript:;" title="客服"></a></div>
    <div id="floatDivBoxs">
        <div class="floatDtt">联系客服</div>
        <div class="floatShadow">
            <ul class="floatDqq">
                <li style="padding-left:0px;"><a target="_blank" href="tencent://message/?uin=1209278955&amp;Site=sc.chinaz.com&amp;Menu=yes"><img src="img/qq.png" align="absmiddle">前端客服1</a></li>
                <li style="padding-left:0px;"><a target="_blank" href="tencent://message/?uin=203666169&amp;Site=sc.chinaz.com&amp;Menu=yes"><img src="img/qq.png" align="absmiddle">前端客服2</a></li>
                <li style="padding-left:0px;"><a target="_blank" href="tencent://message/?uin=207320252&amp;Site=sc.chinaz.com&amp;Menu=yes"><img src="img/qq.png" align="absmiddle">前端客服3</a></li>
                <li style="padding-left:0px;"><a target="_blank" href="tencent://message/?uin=1909723148&amp;Site=sc.chinaz.com&amp;Menu=yes"><img src="img/qq.png" align="absmiddle">前端客服4</a></li>
            </ul>
            <div class="floatDtxt">咨询热线</div>
            <div class="floatDtel">000-00000000</div>
            <div style="text-align:center;padding:10PX 0 5px 0;background:#EBEBEB;"><img src="img/wap_ico.jpg"><br>二维码</div>
        </div>
        <div class="floatDbg"></div>
    </div>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/qq.js"></script>
</div>

CSS部分代码:

*{padding:0;margin:0;}
html,body{font-size:12px;font-family:"微软雅黑";outline:none;color:#666;background:#fff;}
ul,ol{list-style:none;}
img{border:none;outline:none;}
a{color:#666;text-decoration:none;outline:none;}
a:hover{color:#e8431f;}

/*浮动客服*/
.service_qq{position: fixed;top: 180px;right: 0;padding-left: 50px}
#floatDivBoxs{width:170px;background:#fff;z-index:999;}
#floatDivBoxs .floatDtt{width:100%;height:45px;line-height:45px; background:#f08326;color:#fff;font-size:18px;text-indent:22px;position:relative;}
#floatDivBoxs .floatDqq{padding:0 14px;}
#floatDivBoxs .floatDqq li{height:45px;line-height:45px;font-size:15px;border-bottom:1px solid #e3e3e3; padding:0 0 0 50px;}
#floatDivBoxs .floatDtxt{font-size:18px;color:#333;padding:12px 14px;}
#floatDivBoxs .floatDtel{padding:0 0 15px 10px;}
#floatDivBoxs .floatDtel img{display:block;}
#floatDivBoxs .floatDbg{width:100%;height:20px;background:url(../img/online_botbg.jpg) no-repeat;box-shadow:-2px 0 3px rgba(0,0,0,0.25);}
.floatShadow{ background:#fff;box-shadow:-2px 0 3px rgba(0,0,0,0.25);}
#rightArrow{width:50px;height:45px;background:url(../img/online_arrow.jpg) no-repeat;  position: absolute;left: 0;z-index:999;}
#rightArrow a{display:block;height:45px;}

js 部分代码:

$(function () {
    $(".service_qq").animate({right: '-175px'}, 300);
    $("#rightArrow").css('background-position', '-50px 0');

    $(".service_qq").mouseenter(function () {
        $(".service_qq").animate({right: '0'}, 300);
        $("#rightArrow").css('background-position', '0px 0');
    });
    $('#floatDivBoxs').mouseleave(function () {
        $(".service_qq").animate({right: '-175px'}, 300);
        $("#rightArrow").css('background-position', '-50px 0');
    });
})

效果如下:

源码下载:点击下载

其中遇到了 mouse 事件的问题,可以参照:JQuery几个mouse事件的区别和用法

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

推荐阅读

  • 如何将设计思维应用到精益初创公司的软件开发

    我们所说的设计思维,是指由 IDEO 公司的 Tim Brown 提出,并且正在改变全世界组织的设计思维,简称 DT。(译者注:IDDO,当代最具影响力的设计公司之一)

    Aceyclee
    Serverless无服务器云函数
  • InnoDB 事务加锁分析

    一般大家对数据库事务的了解可能停留在事务的ACID特性以及事务4种不同的隔离级别层面上,而对于事务 4 种不同隔离级别如何实现了解相对较少。

    2020labs小助手
    MySQLSQL数据库MVCMVCC
  • FutureTask 核心源码解析

    研究源码,一般我们都从整体以及实例先入手,再研究细节,不至于一开始就“深陷其中而"当局者迷".

    JavaEdge
    HTTPJava
  • 200行代码落地人脸识别开锁应用

    2019年国庆,帮朋友实现了一个人脸识别进行开锁的功能,用在他的真人实景游戏业务中。几个月来运行稳定,体验良好,借着这个春节宅家的时间,整理一下这个应用的实现过程。

    高树磊
    人脸识别图像处理
  • 滑动验证码攻防对抗

        在业务安全领域,滑动验证码已经是国内继,传统字符型验证码之后的标配。众所周知,打码平台和机器学习这两种绕过验证码的方式,已经是攻击者很主流的思路,不再阐述。冷渗透介绍的是一个冷门的绕过思路和防御方案。这些积累,均来自于实战之中,希望有用。

    周俊辉
    HTTP网络安全安全网站
  • 程序员进阶必读,万字总结Mysql优化精华篇

    price decimal(8,2)有2位小数的定点数,定点数支持很大的数(甚至是超过int,bigint存储范围的数)

    程序员内点事
    全文检索缓存SQL数据库Python
  • 运维转型 | 运维人不再只是“救火英雄”

    各行各业都开启了数字化转型的进程,运维团队在这种时代的浪潮中又该何去何从?我在帮助一些企业落地了运维技术平台之后,开始反思这个问题,并将所思所想整理成本篇文章。

    嘉为科技
    企业运维自动化云计算
  • WEB开发常见的安全漏洞和解决思路

    SQL注入时web开发中最常见也是危害性最大的安全漏洞,SQL注入攻击可能会导致 服务器故障,数据泄漏,数据被恶意删除等等严重后果。

    windwei
    SQLHTTPhttps安全漏洞PHP
  • 详解Winograd变换矩阵生成原理

    文本首发知乎:https://zhuanlan.zhihu.com/p/87516875

    Ldpe2G
    编程算法
  • Linux网络性能优化相关策略

    1. rx-checksumming:校验接收报文的checksum。

    glinuxer
    Linux

扫码关注云+社区

领取腾讯云代金券