现在位置首页 / 项目实战 /正文

Jquery实现右侧悬浮客服QQ层demo

作者: IT小兵 | 2014年6月13日| 热度:℃ | 评论: |参与:

在前几天的文章[Z-blog添加回到顶部效果].今天再次分享一个可以做客服电话、QQ客服的右侧悬浮层。

现在还没想到很好的封装方式,就先把现在的这种方式记录下来)。

  一、演示图

  初始状态:

  


  滑动状态(超过临界值):

 

  二、html代码

<div class="container">
    <!-- start header -->
    <div class="header">
        <div class="header-inner"></div>
    </div>
    <!-- end header -->
    <!-- start wrapper -->
    <div class="wrapper">
        <div class="wrapper-inner">
            <!-- 返回按钮 -->
            <div class="returnHome"><a href="/demonstrate.htm"><img src="images/ico_return.png"/></a></div>
            <!-- 在线客服 -->
            <div class="online onlineBlue">
                <ul>
                    <li class="item1">
                        <a class="help" href="javascript:void(0);"></a>
                        <div class="on-detail">
                            <h3><i></i>客服电话</h3>
                            <p>更快更贴心的服务热线</p>
                            <p>服务时间:周一至六9:00-18:00</p>
                            <p class="c-orange">000-0000-0000</p>
                        </div>
                    </li>
                    <li class="item2">
                        <a class="help" href="javascript:void(0);"></a>
                        <div class="on-detail">
                            <h3><i></i>QQ在线客服</h3>
                            <p>为您实时解决问题</p>
                            <p>服务时间:周一至六9:00-18:00</p>
                            <a href="javascript:void(0);"><img border="0" src="http://imgs1.mxthcdn.com/b/I16i2730m062365593198_lZXkeT.jpg" alt="客服,欢迎您来咨询" title="客服,欢迎您来咨询"></a>
                        </div>
                    </li>
                    <li class="itemlast">
                        <a class="help" style="display: none;" id="returnTop" title="返回顶部" href="javascript:void(0);"></a>
                    </li>
                </ul>
            </div>
            <div class="slide"></div>
        </div>
    </div>
    <!-- end wrapper -->
</div>

Jquery代码:

$(function(){
    if ('undefined' == typeof(document.body.style.maxHeight)) {
        /* 在线客服 */
        var $own;
        $(".online li").hover(function(){
            $own = $(this);
            $own.addClass("ie6hover");
        },function(){
            $own.removeClass("ie6hover");
        })
    }
    /* 定位在线客服 */
    var $content = $(".wrapper-inner"), /* 中间主要内容 */
        $online = $(".online"), /* 在线客服 */
        $returnHome = $(".returnHome"), /* 返回首页 */
        $returnTop = $("#returnTop"), /* 返回顶部 */
        contentWidth = $content.width(),
        onlineWidth = $online.width(),
        returnHomeWidth = $returnHome.width(),
        wWidth, /* window的宽度 */
        wHeight, /* window的高度 */
        contentLeft, /* $content距离左边的距离 */
        contentTop, /* $content距离顶部的距离 */
        dScrollTop, /* 滚动条距离顶部位置 */
        crisisHeight, /* 临界高度,就是滚动条滚动到哪个位置就开始执行 */
        onlineConnectHeight = $(".slide").height(), /* online中连接header和在线客服中间的距离 */
        returnHomeConnectHeight = $(".header").height(), /* online中连接header和在线客服中间的距离 */
        targetValue = 960, /* 临界大小,也就是当window的宽度为960时怎么样怎么样,也可以设置1200,看需求 */
        Hang = $.extend({
            defineReturnTop: function(){ /* 返回到顶部 */
                if(dScrollTop == 0){
                    $returnTop.fadeOut(200);
                }else if(dScrollTop > 0){
                    $returnTop.fadeIn();
                }
            },
            defineSize: function(){ /* 初始化 */
                wWidth = $(window).width(),
                    wHeight = $(window).height(),
                    dScrollTop = $(document).scrollTop(),
                    contentLeft = $content.offset().left, /* wrapper-inner距离左边距离 */
                    contentTop = $content.offset().top, /* wrapper-inner距离顶部距离 */
                    crisisHeight = contentTop + onlineConnectHeight; /* online距离顶部的距离 */
                /* 悬浮对象 */
                var hangObj = {
                    online: {
                        target: $online, /* 目标标签 */
                        crisisHeight: crisisHeight, /* 临界高度值 */
                        left: "", /* absolute的left值 */
                        leftFixed: "", /* fixed的left值 */
                        top: crisisHeight, /* absolute的top值 */
                        topFixed: "20px", /* fixed的top值 */
                        topIe6: dScrollTop /* ie6下面top值 */
                    },
                    returnHome: {
                        target: $returnHome,
                        crisisHeight: contentTop,
                        left: "",
                        leftFixed: "",
                        top: contentTop,
                        topFixed: "10px",
                        topIe6: dScrollTop
                    }
                }
                Hang.defineReturnTop(); /* 返回顶部事件调用 */
                if(wWidth < targetValue){/* 当window的宽度小于960时做以下操作 */
                    hangObj.online.left = wWidth - onlineWidth;
                    hangObj.online.leftFixed = wWidth - onlineWidth;
                    hangObj.returnHome.left = 0;
                    hangObj.returnHome.leftFixed = 0;
                    Hang.defineHangCrisis(hangObj.online);
                    Hang.defineHangCrisis(hangObj.returnHome);
                }else if(wWidth >= targetValue){
                    hangObj.online.left = contentWidth + contentLeft;
                    hangObj.online.leftFixed = contentWidth + contentLeft;
                    hangObj.returnHome.left = contentLeft - returnHomeWidth;
                    hangObj.returnHome.leftFixed = contentLeft - returnHomeWidth;
                    Hang.defineHangCrisis(hangObj.online);
                    Hang.defineHangCrisis(hangObj.returnHome);
                }
            },
            defineHangCrisis: function(obj){ /* 定义悬浮临界事件 */
                /* 除ie6以外的浏览器 */
                if ('undefined' != typeof(document.body.style.maxHeight)) {
                    /* 当滚动条高度小于online以上的高度(也就是还未碰到临界值),让online以absolute的形式显示,宽度是相对于body定位 */
                    if(obj.crisisHeight > dScrollTop){
                        obj.target.removeClass("onlineFixed");
                        obj.target.css({left: obj.left, top: obj.top});
                    }else{
                        /* 当滚动条滚动到online处时,online就开始以fixed的形式持续显示,宽度是相对于body定位 */
                        obj.target.addClass("onlineFixed");
                        obj.target.css({left: obj.leftFixed,top: obj.topFixed});
                    }
                }else{/* 针对ie6 */
                    if(obj.crisisHeight > dScrollTop){
                        obj.target.css({left: obj.left, top: obj.top});
                    }else{
                        obj.target.css({left: obj.left, top: obj.topIe6});
                    }
                }
            }
        },function(){});
    /*----------------- 以下为触发事件----------------------- */
    Hang.defineSize(); /* 初始化大小 */
    $(window).resize(function(){
        Hang.defineSize();
    })
    $(window).scroll(function(){
        Hang.defineSize();
    })
    /* 返回顶部 */
    $returnTop.click(function(){
        $(document).scrollTop(0);
    })
})

分析:

  因为代码里注释的很清楚,所以我这里只做一个简单介绍(关于在线客服)。

  先说一下我的设计思路,我先考虑它会有几种状态,不改变窗口大小和改变窗口大小的区别,滚动滑动条和不滚动滑动条的区别。

  (1)不改变窗口大小并且不滚动滚动条(或者滚动条未超过临界值),是用position:absolute定位在一个固定位置(相对于body),位置定义看自己需求,想要在左边就左边右边就右边。我这里固定在wrapper-inner中间内容的左侧,slide的底部那个位置(crisisHeight临界高度就是根据这个得到的)。所以left值为wrapper-inner左边的距离加上wrapper-inner的宽度,即contentWidth + contentLeft。高度为header的高度加上slide的高度,即contentTop + onlineConnectHeight。

  (2)不改变窗口大小并且滚动滚动条(滚动条滚动超过临界值),是用position:fixed定位在一个固定位置(不包括ie6,因为它不支持fixed,下面会有专门讲解),fixed相对于body的(窗口左上角),left值为wrapper-inner左边的距离加上wrapper-inner的宽度,所以为contentWidth + contentLeft。高度为0(自定义的),即一直在窗口顶部。

  (3)改变窗口大小并且不滚动滚动条(或者滚动条未超过临界值),这里就是改变一下left值,把位置放在window的右边,所以left值为window的宽度减去left值自身的宽度,即wWidth - onlineWidth。top值不变。

  (4)改变窗口大小并且滚动滚动条(滚动条滚动超过临界值),这里就是改变一下left值,把位置放在window的右边,所以left值为window的宽度减去left值自身的宽度,即wWidth - onlineWidth。top值不变。

  (5)ie6下面定义就只有一点不一样,没有fixed这个属性。所有top值不一样,它的top值为滚动滚动的高度,即dScrollTop

  hangObj为悬浮对象字面量,可以根据需求添加多个模块,只需在这边添加属性,再调用方法即可,降低了代码重复率(我后期还会继续精简代码量)。

  希望这些能给需要的人一丁点帮助,如果有哪里讲的不好或者不对的地方往指正,谢谢~点击下载demo


点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询