首页 > 代码库 > jquery版悬浮模块demo
jquery版悬浮模块demo
在做在线客服时，代码就是按照该模块命名。现在，我要添加一个返回主页的功能，我觉得再复制一遍之前的代码，那个量有点多，如果我再添加一个功能，那个量会很多……现在我用创建对象字面量的方式来创建（其实我还想做的更简单一点，将代码封装起来，直接用一个方法调用。但是现在还没想到很好的封装方式，就先把现在的这种方式记录下来）。
一、演示图
初始状态：
滑动状态（超过临界值）：
二、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>
三、js代码
$(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