js悬浮QQ在线客服代码(支持拖动)



122 487 163



特效描述:js悬浮 QQ在线客服 支持拖动,js浮动层特效制作悬浮在线客服代码,放置在线QQ等聊天按钮的在线客服浮动层代码,支持拖动效果,可随意在页面上拖动位置,随着浏览器滚动始终保持在悬浮在页面上的js代码。

代码结构

1. 引入JS

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

2. HTML代码

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
/* KeFuDiv */
.KeFuDiv{position:absolute;height:160px;width:118px;}
.KeFuList{background:url(images/mid001.gif);}
.KeFuTitle{background:url(images/list_001.gif);margin-left:9px;font-size:12px;width:101px;height:20px;line-height:20px;text-align:center;}
.KeFuItem{text-align:center;margin-top:8px;font-size:12px;}
</style>
<div style="height:1000px;"></div>
<div id="KeFuDiv" class="KeFuDiv">
	<div>
		<img src="images/up_001.gif" height="55" border="0" usemap="#Map" style="cursor:move;" onmousedown="MoveDiv(KeFuDiv,event);" title="拖动" />
		<map name="Map" id="Map">
			<area shape="circle" coords="105,10,8" href="javascript:" onclick="KeFuDiv.style.display='none';" title="关闭"/>
		</map>
	</div>
	<div class="KeFuList">
		<div class="KeFuTitle">会员客服</div>
		<div class="KeFuItem">
			<a target="_blank" href="tencent://message/?uin=17905772&Site=&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:17905772:3" alt="有事点这里"></a>
		</div>
		<div class="KeFuItem">
			<a target="_blank" href="tencent://message/?uin=17905772&Site=&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:17905772:2" alt="有事点这里"></a>
		</div>
	</div>
	<div><img src="images/bot_001.gif" border="0"></div>
</div><!--KeFuDiv end-->
<script type="text/javascript">
//初始位置
gID("KeFuDiv").style.top = (document.documentElement.clientHeight - gID("KeFuDiv").offsetHeight)/2 +"px";
gID("KeFuDiv").style.left = document.documentElement.clientWidth - gID("KeFuDiv").offsetWidth +"px";
//开始滚动
ScrollDiv('KeFuDiv');
</script>



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


热门标签: 拖动 拖拽 拖动插件 拖拽插件 浮动 悬浮 悬浮层 悬浮框 浮动层 浮动框 浮动插件 悬浮插件 浮动提示框 在线客服 浮动菜单 浮动导航 qq在线客服 qq客服 在线客服插件 弹出层拖动

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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