jquery toggle()方法制作右側浮動的qq在線客服代碼



141 562 188



特效描述:jquery toggle()方法制作 右側浮動 qq在線客服,qq在線客服

代碼結構

1. 引入JS

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>

2. HTML代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>右側可伸縮的QQ客服在線JS代碼</title> 
<script type="text/javascript">
$(function(){
	$("#xiaotu").toggle(function(){
		$(this).next().hide();
		$(this).css("background","url(images/fang.gif) no-repeat left center");
	},function(){
		$(this).next().show();
		$(this).css("background","url(images/suo.gif) no-repeat left bottom");
	})
})
</script>
<body style="height:1200px;">
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋體";}
a{text-decoration:none;color:#333;}
a:hover{text-decoration:underline;}
/* floatqq */
.floatqq{position:fixed;top:54px;right:100px;z-index:999;width:120px;height:450px;}
*html .floatqq{position:absolute;top:expression(eval(document.documentElement.scrollTop));margin:130px 0 0 0;}
.qq{padding:15px 0 0 8px;}
.qq img{vertical-align:top;}
.qq dt{margin:10px 0 0 -5px;}
#xiaotu{cursor:pointer;width:22x;height:105px;display:block;margin-left:93px;background:url(images/suo.gif) no-repeat left bottom;}
#kefu{width:120px;height:450px;background:url(images/qq_bg.gif) no-repeat left top;}
</style>
<div class="floatqq">
	<div id="xiaotu"></div>
    <div id="kefu" style="display:block;">
    	<dl class="qq">
            <dd><a href="http://www.dijiuzhanzhang.com/"><img src="images/qq_logo.gif" alt="17素材網"></a></dd>
            <dd><a href="http://www.dijiuzhanzhang.com/"><img src="images/qq_online_1.gif"></a></dd>
            <dd><a href="http://www.dijiuzhanzhang.com/"><img src="images/qq_online_2.gif"></a></dd>
            <dd><img src="images/qq_1f.gif"></dd>
            <dd><img src="images/qq_2f.gif"></dd>
            <dd><img src="images/qq_3f.gif"></dd>
            <dd><img src="images/qq_4f.gif"></dd>
            <dd><img src="images/qq_5f.gif"></dd>
            <dt><a href="http://weibo.com/jsfoot"><img src="images/qq_t.gif"></a></dt>
		</dl>
    </div>
</div>
</body>
</html>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 浮動 懸浮 懸浮層 懸浮框 浮動層 浮動框 浮動插件 懸浮插件 收縮展開 展開收縮 收縮 展開 浮動提示框 在線客服 浮動菜單 浮動導航 收縮菜單 收縮導航 qq在線客服 qq客服 在線客服插件
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

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

老夫子电子