瓦窑源码 快速建站好帮手
客服QQ客服QQ 微信号微信号

JQ制作的可拖拽任意位置的在线客服代码下载

特效介绍

这套JQ制作的可拖拽任意位置的在线客服代码,使用JQ制作的,悬浮于网页的任意位置,可以自由拖拽到任何位置,避免遮盖网页上的重要位置,非常适合用来制作在线客服、漂浮广告之类的功能。

在线客服代码

使用方法:

<script src="/js/jquery.min.js"></script>
<script>
var floatTool = {};
    floatTool._move = false;
    floatTool.ismove = false;
    floatTool._x;
    floatTool._y;
    floatTool.moveBox = $('#floatTool'); //整体悬浮框
    floatTool.drag = $('#floatTool .move'); //可拖动部分
    floatTool.defaultTop = (window.screen.height - floatTool.moveBox.height())/2 - 200; //默认顶部保持上下居中,再往上去200像素
$(window).scroll(function(){
    var offsetTop = floatTool.defaultTop + $(window).scrollTop()+'px';
    floatTool.moveBox.animate({top:offsetTop},{
        duration: 600,
        queue: false
    });                          
});
//拖动
floatTool.drag.mousedown(function (e) {
    floatTool._move = true;
    floatTool._x = e.pageX - parseInt(floatTool.moveBox.css("left"));
    floatTool._y = e.pageY - parseInt(floatTool.moveBox.css("top"));
});
$(document).mousemove(function (e) {
    if (floatTool._move) {
        var x = e.pageX - floatTool._x;
        var y = e.pageY - floatTool._y;
        var wx = $(window).width() - floatTool.moveBox.width();
        var dy = $(document).height() - floatTool.moveBox.height();
        if(x >= 0 && x <= wx && y > 0 && y <= dy) {
            floatTool.moveBox.css({
                top: y,
                left: x
            });
            floatTool.ismove = true;
        }
    }
}).mouseup(function () {
    floatTool._move = false;
});
</script>
<!--代码部分end-->

TAG标签:在线客服代码

上一个:JQ制作在线QQ客服咨询代码+手机电话号码
下一个:点击隐藏切换的QQ微信二维码在线客服代码

免责声明:本站模板均来自用户分享和网络收集,仅供学习研究,请勿用于商业用途,若损害您的权益,请联系网站客服,核实后立即删除。
  • 信息来源:瓦窑源码
  • 发布时间:2021-02-22
  • 阅读人数:

瓦窑源码专注织梦网站源码与静态模板分享,提供织梦模板,dedecms模板,织梦企业源码,dedecms商业源码和织梦免费模板下载

织梦源码 - 织梦模板 - 网页素材 - 织梦教程 - 站长学院 - 热门排行 - Tags标签 - 网站地图 - 免责声明

Copyright©2021 瓦窑源码 Why114.COM 版权所有 鲁ICP备20017802号-2

客服QQ:1847629575 微信号:qilujianzhan

展开