利用jQuery實現頁面懸浮在線客服代碼



47 187 63



特效描述:利用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

加群請備注:從官網了解到

湖北30选5开奖结果走势图表