13071077710
您的当前位置: 首页 > 前端开发 > html/css > 网站上添加QQ在线聊天

网站上添加QQ在线聊天

时间: 2017-1-18

根据用户需求网站上添加QQ在线聊天功能,废话不多说,直接演示操作,记录之…

html

<div class="cs-div cs-bar" style="top: 778px; right: 0px;">
 <span id="cs-close">X</span>
 <div class="cs-inner" style="display: none;">
 <a href="http://wpa.qq.com/msgrd?v=3&amp;uin=290006968&amp;site=qq&amp;menu=yes" target="_blank">
 <img title="点击这里给我发消息" src="http://wpa.qq.com/pa?p=2:290006968:51" alt="点击这里给我发消息" border="0"></a>
 <a href="http://wpa.qq.com/msgrd?v=3&amp;uin=290006968&amp;site=qq&amp;menu=yes" target="_blank">
 <img title="点击这里给我发消息" src="http://wpa.qq.com/pa?p=2:290006968:51" alt="点击这里给我发消息" border="0"></a>
 <a href="http://wpa.qq.com/msgrd?v=3&amp;uin=290006968&amp;site=qq&amp;menu=yes" target="_blank">
 <img title="点击这里给我发消息" src="http://wpa.qq.com/pa?p=2:290006968:51" alt="点击这里给我发消息" border="0"></a>
 </div>
 <div class="cs-btm"></div>
</div>

css

.cs-div {
 width:140px;
 height:auto;
 text-align:center;
 position:absolute;
 z-index:99999;
 overflow:hidden
 }
 .cs-div #cs-close {
 float:right;
 width:32px;
 height:35px;
 text-indent:-9999px;
 display:block;
 cursor:pointer;
 position:absolute;
 top:0;
 right:0
 }
 .cs-bar {
 padding:0;
 width:32px;
 height:116px
 }
 .cs-bar #cs-close {
 width:32px;
 height:116px;
 background:url(images/cs.gif) no-repeat -106px 0;
 top:0;
 right:0
 }
 .cs-inner {
 padding:60px 5px 0 10px;
 background:url(images/cs.gif) no-repeat 0 -120px;
 display:none
 }
 .cs-inner img {
 margin-bottom:10px
 }
 .cs-btm {
 width:100%;
 height:15px;
 background:url(images/cs.gif) no-repeat 0 bottom
 }

下载所需图片

js

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
 <script type="text/javascript">
 //OnlineService
 $(function(){
 jQuery(function(){jQuery(".cs-div").css({"top":200+jQuery(window).scrollTop(),"right":"0"});jQuery(window).scroll(function(){var offsetTop=200+jQuery(window).scrollTop()+"px";jQuery(".cs-div").animate({top:offsetTop,"right":"0"},{duration:500,queue:false})});jQuery(window).resize(function(){var offsetTop=200+jQuery(window).scrollTop()+"px";jQuery(".cs-div").animate({top:offsetTop,"right":"0"},{duration:500,queue:false})});jQuery("#cs-close").click(function(){jQuery(".cs-inner").toggle();jQuery(".cs-div").toggleClass("cs-bar");});});
 });
</script>

Copyright © 2013-2019 子歇    版权所有   网站地图