脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jquery版悬浮模块demo,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 在做在线客服时,代码就是按照该模块命名。现在,我要添加一个返回主页的功能,我觉得再复制一遍之前的代码,那个量有点多,如果我再添加一个功能,那个量会很多……现在我用创建对象字面量的方式来创建(其实我还想做的更简单一点,将代码封装起来,直接用一个方法调用。但是现在还没想到很好的封装方式,就先把现在的这种方式记录下来)。
一、演示图
初始状态:
滑动状态(超过临界值):
二、htML代码
复制代码
<p class="container">
<!-- start header -->
<p class="header">
<p class="header-inner"></p>
</p>
<!-- end header -->
<!-- start wrapPEr -->
<p class="wrapper">
<p class="wrapper-inner">
<!-- 返回按钮 -->
<p class="returnHome"><a href="/demonstrate.htm"><img src="images/ico_return.png"/></a></p>
<!-- 在线客服 -->
<p class="online onlineBlue">
<ul>
<li class="ITem1">
<a class="help" href="javascript:void(0);"></a>
<p class="on-detail">
<h3><i></i>客服电话</h3>
<p>更快更贴心的服务热线</p>
<p>服务时间:周一至六9:00-18:00</p>
<p class="c-orange">000-0000-0000</p>
</p>
</li>
<li class="item2">
<a class="help" href="javascript:void(0);"></a>
<p 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=/uploaDFile/2014/0613/20140613084117676.jpg" alt="客服,欢迎您来咨询" title="客服,欢迎您来咨询"></a>
</p>
</li>
<li class="itemlast">
<a class="help" style="display: none;" id="returnTop" title="返回顶部" href="javascript:void(0);"></a>
</li>
</ul>
</p>
<p class="slide"></p>
</p>
</p>
<!-- end wrapper -->
</p>
复制代码
三、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为悬浮对象字面量,可以根据需求添加多个模块,只需在这边添加属性,再调用方法即可,降低了代码重复率(我后期还会继续精简代码量)。
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的javascript代码实例教程-jquery版悬浮模块demo全部内容,希望文章能够帮你解决javascript代码实例教程-jquery版悬浮模块demo所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。