红色悬浮在线客服代码

特效描述：利用jQuery实现 页面悬浮 在线客服代码，利用jQuery实现页面悬浮在线客服代码

代码部署教程

1. 引入JS

<script src=”js/jquery-1.8.3.min.js” language=”javascript” type=”text/javascript”></script>

<script src=”js/jQuery-jcContact.js” language=”javascript”></script>

2. HTML代码

<div id=”demo1″ class=”jcContact”>
<div class=”jcConraper”>
<!– 自定义部分 –>
<div style=” background:url(images/c02.png) no-repeat 0 0; height:44px;”></div>
<ul>
<li style=”font-size:20px; text-align:center; font-weight:bold; color:#ff6600; padding:15px 0 5px;”>027-12345678</li>
<li style=”background:url(images/c04.png) no-repeat center 0; height:140px;”></li>
</ul>
<div style=”background:url(images/c05.png) no-repeat 0 0; height:11px;”></div>
<div style=”line-height:22px; padding:5px 18px 25px;”>
<span style=”display:block; float:left; height:22px; line-height:22px; font-size:13px; font-weight:bold; color:#555555;”>乐分享</span>
<a href=”tencent://message/?uin=80107540″ style=”display:block; float:right; width:74px; height:22px; background:red; “><img src=”images/c06.png” height=”22″ width=”74″ border=”0″ /></a>
<div class=”clear”></div>
</div>
<div style=”background:url(images/c07.png) no-repeat; height:13px;”></div>
<!– 自定义部分 结束 –>
</div>
<div class=”jcConBtn”></div>
</div>
<div id=”demo2″ class=”jcContact”>
<div class=”jcConraper”>
<!– 自定义部分 –>
<div style=” background:url(images/c02.png) no-repeat 0 0; height:44px;”></div>
<ul>
<li style=”font-size:20px; text-align:center; font-weight:bold; color:#ff6600; padding:15px 0 5px;”>027-12345678</li>
<li style=”background:url(images/c04.png) no-repeat center 0; height:140px;”></li>
</ul>
<div style=”background:url(images/c05.png) no-repeat 0 0; height:11px;”></div>
<div style=”line-height:22px; padding:5px 18px 25px;”>
<span style=”display:block; float:left; height:22px; line-height:22px; font-size:13px; font-weight:bold; color:#555555;”>乐分享</span>
<a href=”tencent://message/?uin=80107540″ style=”display:block; float:right; width:74px; height:22px; background:red; “><img src=”images/c06.png” height=”22″ width=”74″ border=”0″ /></a>
<div class=”clear”></div>
</div>
<div style=”background:url(images/c07.png) no-repeat; height:13px;”></div>
<!– 自定义部分 结束 –>
</div>
<div class=”jcConBtn”></div>
</div>
<div id=”demo3″ class=”jcContact”>
<div class=”jcConraper”>
<!– 自定义部分 –>
<div style=” background:url(images/c02.png) no-repeat 0 0; height:44px;”></div>
<ul>
<li style=”font-size:20px; text-align:center; font-weight:bold; color:#ff6600; padding:15px 0 5px;”>000-12345678</li>
<li style=”background:url(images/c04.png) no-repeat center 0; height:140px;”></li>
</ul>
<div style=”background:url(images/c05.png) no-repeat 0 0; height:11px;”></div>
<div style=”line-height:22px; padding:5px 18px 25px;”>
<span style=”display:block; float:left; height:22px; line-height:22px; font-size:13px; font-weight:bold; color:#555555;”>乐分享</span>
<a href=”tencent://message/?uin=80107540″ style=”display:block; float:right; width:74px; height:22px; background:red; “><img src=”images/c06.png” height=”22″ width=”74″ border=”0″ /></a>
<div class=”clear”></div>
</div>
<div style=”background:url(images/c07.png) no-repeat; height:13px;”></div>
<!– 自定义部分 结束 –>
</div>
<div class=”jcConBtn”></div>
</div>
<!– 说明及参数 –>
<div id=”psWraper”>
<div id=”ps” style=” width:950px;”>
<div id=”psText”>
<h2>jQuery-jcContact 在线客服功能（修正版 ）</h2>
<ul>
<li>修正内容：<li>
<li>1. 修复部分有Bug。</li>
<li>2. 全面兼容各个浏览器(IE6+ 、Sarfai 、Chrome 、 Firefox 等等 )。</li>
<li>3. 提高插件重用性、复用性。</li>
<li>4. 优化CSS减少代码量。</li>
</ul>
</div>
<h1>jQuery-jcContact插件</h1>
<dl style=”clear:both”>
<dd><span>speed:400,</span>//设置动画时间（mm）</dd>
<dd><span>position:’center’,</span>//外层框架垂直位置，提供”top”,”center”,”bottom”</dd>
<dd><span>posOffsetY : 0,</span>//微调设置外层框架垂直位置</dd>
<dd><span>btnPosition : ‘center’,</span>//按钮垂直位置，提供”top”,”center”,”bottom”</dd>
<dd><span>btnPosoffsetY : 0 ,</span>//微调设置按钮垂直位置</dd>
<dd><span>float:’left’,</span>//框架位置，提供”left”,”right”</dd>
<dd><span>Event : “click”</span>//设置展开框架事件，提供”mouseover”,”lick”</dd>
</dl>
</div>
</div>
<div style=”text-align:center;margin:50px 0; font:normal 14px/24px ‘MicroSoft YaHei’;”>
</div>

下载地址

立即下载