jQuery实现带返回顶部右侧悬浮客服



43 168 57



特效描述:jQuery实现 带返回顶部 右侧悬浮客服,jQuery实现带返回顶部右侧悬浮客服

代码结构

1. 引入JS

<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/phone/PNG.js" type="text/javascript"></script>

2. HTML代码

<div style="height:1200px;">
	<div style="width:960px;margin:10px auto; clear:both; text-align:center;  ">
	</div>
	<br />
	<br />
	<br />
	<br />
	往下拉看下右侧的效果 </div>
<!--右侧图标-->
<style>
li{ list-style:none}
#rightButton{ position:fixed; _position:absolute; top:208px; right:0; z-index:999999; display:block;}
#right_ul{ position:relative;}
#right_qq{  background:url(images/7_03.png) no-repeat; width:68px; height:74px; }
#right_tel{ background:url(images/7_05.png) no-repeat; width:68px; height:77px; }
#right_tip{  background:url(images/flag_right.png) no-repeat; width:252px; height:91px; position:absolute; right:70px; top:-10px; display:none; z-index:999999; }
.flagShow_p1{ float:left; margin-left:15px; _margin-left:5px; font-size:18px; line-height:91px;}
.flagShow_p2{ float:left; margin-left:10px; _margin-left:5px; font-size:18px;  color:#FA7C00;}
.flagShow_p2 a{ display:block; margin: 20px 0 5px 12px; line-height:0;}
.flagShow_p2 span{ margin: 0 0 0 14px; }
.flag_qq{ display:none;}
#backToTop{ position:fixed; _position:absolute; bottom:50px; right:0; z-index:999999; display:none; }
a.backToTop_a{  background:url(images/7_08.png) no-repeat; width:68px; height:79px; display:block; }
a.backToTop_a:active{  background:url(images/7_11.png) no-repeat; }
.line91{ line-height:91px; }
</style>
<div id="rightButton">
	<ul id="right_ul">
		<li id="right_qq" class="right_ico" show="qq" hide="tel"></li>
		<li id="right_tel" class="right_ico" show="tel" hide="qq"></li>
		<li id="right_tip" class="png">
		<p class="flagShow_p1 flag_tel">咨询电话</p>
		<p class="flagShow_p2 flag_tel line91">400-800-8000</p>
		<p class="flagShow_p1 flag_qq">咨询QQ</p>
		<p class="flagShow_p2 flag_qq">
		<a href="http://www.51qianduan.com//msgrd?v=3&uin=80000000&site=qq&menu=yes" target="_blank">
		<img border="0" src="images/qiyeQQ.png"></a> <span>80000000</span> </p>
		</li>
	</ul>
</div>
<div id="backToTop">
	<a href="javascript:;" onfocus="this.blur();" class="backToTop_a png"></a>
</div>
<div style="text-align:center;clear:both">
</div>
<script type="text/javascript">
$(document).ready(function(e) {
	$("#rightButton").css("right", "0px");
    var button_toggle = true;
	$(".right_ico").live("mouseover", function(){
		var tip_top;
		var show= $(this).attr('show');
		var hide= $(this).attr('hide');
		tip_top = show == 'tel' ?  65 :  -10;
		button_toggle = false;
		$("#right_tip").css("top" , tip_top).show().find(".flag_"+show).show();
		$(".flag_"+hide).hide();
	}).live("mouseout", function(){
		button_toggle = true;
		hideRightTip();
	});
	$("#right_tip").live("mouseover", function(){
		button_toggle = false;
		$(this).show();
	}).live("mouseout", function(){
		button_toggle = true;
		hideRightTip();
	});
	function hideRightTip(){
		setTimeout(function(){		
			if( button_toggle ) $("#right_tip").hide();
		}, 500);
	}
	$("#backToTop").live("click", function(){
		var _this = $(this);
		$('html,body').animate({ scrollTop: 0 }, 500 ,function(){
			_this.hide();
		});
	});
	$(window).scroll(function(){
		var htmlTop = $(document).scrollTop();
		if( htmlTop > 0){
			$("#backToTop").show();	
		}else{
			$("#backToTop").hide();
		}
	});
});
</script>



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


热门标签: 浮动 悬浮 悬浮层 悬浮框 浮动层 浮动框 浮动插件 悬浮插件 滑动星星打分 浮动提示框 切换按钮 在线客服 表单 表单美化 表单插件 表单美化插件 其他 浮动菜单 浮动导航 qq在线客服 qq客服 在线客服插件 按钮控制 鼠标滑过 鼠标悬停 跟随鼠标移动

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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