专栏首页Youngxj给网页添加一个QQ客服悬浮框

给网页添加一个QQ客服悬浮框

扒一个QQ客服悬浮框的代码,需要修改的地方都注释了,自己在用的时候再给他添加一个悬浮的css即可,已经设置好定时出现和滚动标题

<style type="text/css">
	* { padding:0; margin:0; font-family:Microsoft YaHei,Simsun;}
	.main {display:none;width:327px;height:172px; background-repeat:no-repeat;}
	.bg { background-image:url(http://s-api.yunvm.com/young/bg.png)}
	.btn { position:absolute; display:block;}
	.launchBtn { top:145px; left:173px; width:69px; height:22px;}
	.laterBtn { top:145px; left:248px; width:69px; height:22px;}
	.closeBtn { top:0;left: 283px;; width:39px; height:26px;}
	.title { position:absolute; top:1px; left:17px; height:30px; line-height:30px; font-size:16px; color:#000;}
	.content { position:absolute; top:45px; left:114px; width:203px; height:85px;}
	.content .msg { font-size:12px; color:#000; line-height:25px;}
</style>
<div class="main bg" id="qqlos" width="327px;">
	<a id="launchBtn" class="launchBtn btn" href="javascript:qqtalk();"></a><a id="laterBtn" class="laterBtn btn" href="javascript:hide();"></a><a id="closeBtn" class="closeBtn btn" href="javascript:hide();"></a>
	<p id="title" class="title">
		在线咨询
	</p>
	<div class="content">
		<p id="msg" class="msg">您好,请问有什么可以帮到您?请接受聊天邀请。</p>
	</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
	$(function(){
		/*定时显示这个客服框1秒=1000*/
		setTimeout('show()',10000);
	});
	function qqtalk(){
		/*自行替换1170535111为自己的QQ*/
		window.open("http://wpa.qq.com/msgrd?v=3&uin=1170535111&site=qq&menu=yes");
	}
	function hide(){
		document.getElementById('qqlos').style.display='none';
	}
	function show(){
		document.getElementById('qqlos').style.display='block';
		/*滚动标题*/
		var s="【你有一条新消息】".split("");
		function func(){
			s.push(s[0]);
			s.shift();
			document.title = s.join("");
		}
		/*滚动速度*/
		setInterval(func,1000);
	}
</script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • emlog侧边栏添加百度一下

    Youngxj
  • 给网站添加好看的底部功能按钮

    Youngxj
  • emlog每日一键打卡(踩/赞三合一)插件1.2

    Youngxj
  • 使用jatoolsPrinter实现套打

    最近在工作中遇到了套打的需求,前前后后,花了不少时间,现在总结一下套打的实现方式。

    week
  • JavaScript 在vue页面下实现鼠标拖拽div改变其大小,适用于鹰眼地图,街景地图等。

    首先看效果,如图,鼠标悬浮在地图的右上角小框中时,提示“拖动调整大小”,可以给小框加个好看的图标。点击可以进行拖拽。

    acoolgiser
  • 滚动条下拉时 table 的thead 固定在网页固定在顶部不动

    week
  • 微信H5 页面 ul li

    week
  • 第9天:CSS精灵图

    “CSS精灵”,英语css sprite,所以也叫做“CSS雪碧”技术。是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背...

    半指温柔乐
  • CSS3圆角 border-radius

    HTML5学堂:圆角是用一段与角的两边相切的圆弧替换原来的直角。在原有网页当中,如果需要实现圆角效果,可以使用背景图的实现,但是这样会造成背景图大小和数量的增加...

    HTML5学堂
  • 博客园主题修改中用到的css属性

    样式覆盖 id选择器大于class选择器。 对于原主题中想要覆盖的id选择器,使用!import覆盖。 对于原主题中想要取消的css属性,使用inherit. ...

    Ryan-Miao

扫码关注云+社区

领取腾讯云代金券