jquery toggle()方法制作右侧浮动的qq在线客服代码



136 543 182



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

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