js浮动层制作在线客服float浮动层固定在浏览器左侧



121 481 161



特效描述:js浮动层制作 在线客服 float浮动层 固定在浏览器左侧,js浮动层制作一个在线客服特效,div 定位层固定在页面左侧float浮动层,随浏览器滚动div 定位层滑动显示。内含js代码下载

代码结构

1. 引入CSS

<link href="index1.css" rel="stylesheet" />

2. HTML代码

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font-size:12px;font-family:Arial, Helvetica, sans-serif,"宋体";}
/* online */
.QQbox{left:3px;position:absolute;top:145px;width:170px;z-index:999999;}
.QQbox .press{border:medium none;cursor:pointer;height:136px;left:0;position:absolute;width:26px;}
.QQbox .Qlist{left:0;width:170px;}
.QQbox .Qlist .b{float:left;font-size:1px;height:6px;width:170px;}
.QQbox .Qlist .infobox{background:#BDC5CB;color:#000000;font-weight:800;line-height:14px;padding:5px;text-align:center;}
.QQbox .Qlist .t,.QQbox .Qlist .b,#divMenu{background:url(images/online.png) no-repeat;}
.QQbox .Qlist .t{background-position:-26px top;height:34px;}
.QQbox .Qlist .b{background-position:-26px -68px;height:9px;overflow:hidden;}
.QQbox .Qlist .con{border:1px solid #ccc;border-top:none;border-bottom:none;padding:10px 0;width:168px;background:#fff;}
.QQbox .Qlist .con ul li{padding:5px 5px 0 15px;}
#divMenu{background-position:0 0;width:26px;height:136px;cursor:pointer;}
</style>
<div style="height:1000px;"></div>
<div class="QQbox" id="divQQbox" style="width:26px;">
	<div class="Qlist" id="divOnline" onmouseout="hideMsgBox(event);" style="display:none;">
		<div class="t"></div>
		<div class="infobox">我们营业的时间<br />9:00-23:00</div>
		<div class="con">
			<ul>
				<li><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=541374203&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:541374203:41" alt="点击这里给我发消息" title="点击这里给我发消息"></a></li>
				<li>客服热线:1234567890</li>
			</ul>
		</div>
		<div class="b"></div>
	</div>
	<div id="divMenu" onmouseover="OnlineOver();"></div>
</div><!--QQbox end-->
<script type="text/javascript">
/*document.write("<div class='QQbox' id='divQQbox' style='width:26px;' >");
document.write("<div class='Qlist' id='divOnline' onmouseout='hideMsgBox(event);' style='display : none;'>");
document.write("<div class='t'></div>");
document.write("<div class='infobox'>我们营业的时间<br>9:00-23:00</div>");
document.write("<div class='con'>");
document.write("<ul>");
document.write('<li><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=541374203&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:541374203:41" alt="点击这里给我发消息" title="点击这里给我发消息"></a></li>');
document.write('<li>客服热线:15901826010</li>');
document.write("</ul>");
document.write("</div>");
document.write("<div class='b'></div>");
document.write("</div>");
document.write("<div id='divMenu' onmouseover='OnlineOver();'></div>");
document.write("</div>");*/
var tips;
var theTop = 145/*这是默认高度,越大越往下*/;
var old = theTop;
function initFloatTips() {
	tips = document.getElementById('divQQbox');
	moveTips();
};
function moveTips() {
	var tt = 50;
	if (window.innerHeight) {
		pos = window.pageYOffset
	}
	else if (document.documentElement && document.documentElement.scrollTop) {
		pos = document.documentElement.scrollTop
	}
	else if (document.body) {
		pos = document.body.scrollTop;
	}
	pos = pos - tips.offsetTop + theTop;
	pos = tips.offsetTop + pos / 10;
	if (pos < theTop) pos = theTop;
	if (pos != old) {
		tips.style.top = pos + "px";
		tt = 10;
		//alert(tips.style.top);
	}
	old = pos;
	setTimeout(moveTips, tt);
}
initFloatTips();
function OnlineOver() {
	document.getElementById("divMenu").style.display = "none";
	document.getElementById("divOnline").style.display = "block";
	document.getElementById("divQQbox").style.width = "145px";
}
function OnlineOut() {
	document.getElementById("divMenu").style.display = "block";
	document.getElementById("divOnline").style.display = "none";
}
if (typeof (HTMLElement) != "undefined")    //给firefox定义contains()方法,ie下不起作用
{
	HTMLElement.prototype.contains = function(obj) {
		while (obj != null && typeof (obj.tagName) != "undefind") { //通过循环对比来判断是不是obj的父元素
			if (obj == this) return true;
			obj = obj.parentNode;
		}
		return false;
	};
}
function hideMsgBox(theEvent) { //theEvent用来传入事件,Firefox的方式
	if (theEvent) {
		var browser = navigator.userAgent; //取得浏览器属性
		if (browser.indexOf("Firefox") > 0) { //如果是Firefox
			if (document.getElementById('divOnline').contains(theEvent.relatedTarget)) { //如果是子元素
				return; //结束函式
			}
		}
		if (browser.indexOf("MSIE") > 0) { //如果是IE
			if (document.getElementById('divOnline').contains(event.toElement)) { //如果是子元素
				return; //结束函式
			}
		}
	}
	/*要执行的操作*/
	document.getElementById("divMenu").style.display = "block";
	document.getElementById("divOnline").style.display = "none";
	document.getElementById("divQQbox").style.width = "26px";
}
</script>



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


热门标签: flash导航菜单 flash导航条 flash导航 flash菜单 flash下拉菜单 flash下拉导航菜单 h5动画导航 h5动画菜单 html5动画导航 html5动画菜单 收缩菜单 收缩导航 右键菜单 导航切换 菜单切换 浮动菜单 浮动导航 滑动导航菜单 滑动导航 滑动菜单 滚动导航菜单 滚动菜单 滚动导航 浮动 悬浮 悬浮层 悬浮框 浮动层 浮动框 浮动插件 悬浮插件 滑动星星打分 浮动提示框 在线客服 导航菜单 导航条 菜单栏 导航栏 分类导航 响应式导航条 响应式导航 其他 浮动菜单 浮动导航 qq在线客服 qq客服 在线客服插件 侧边菜单 侧边导航 鼠标滑过 鼠标悬停 跟随鼠标移动

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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