利用jQuery实现页面悬浮在线客服代码



44 175 59



特效描述:利用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;">51前端</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;">51前端</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;">51前端</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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 浮动 悬浮 悬浮层 悬浮框 浮动层 浮动框 浮动插件 悬浮插件 滑动星星打分 收缩展开 展开收缩 收缩 展开 浮动提示框 在线客服 其他 浮动菜单 浮动导航 收缩菜单 收缩导航 qq在线客服 qq客服 在线客服插件 鼠标滑过 鼠标悬停 跟随鼠标移动

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到