Jquery结合css 实现小气泡效果~

sonyfe25cp

浏览: 204836 次
性别:
来自: 北京

最近访客更多访客>>

duanfei

ayufish

suxiaoyi

wdboss

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery

CSS jQuery Ajax XML HTML

效果就是个鼠标hover上去的时候，浮出一个气泡~上面有其他菜单~

气泡的div:

			<div class="myTip" id="tip" onclick="hideTip();" style="left:352px;top:203px;display:block">
					<div class="tip_top"></div>
					<div class="tip_mid" id="tipContent">
						<a href="http://www.baidu.com" target="_blank">语文</a> <a href="#">数学</a> <a href="#">物理</a> <a href="#">化学</a> <a href="http://www.baidu.com" target="_blank">语文</a> <a href="#">数学</a> <a href="#">物理</a> <a href="#">化学</a> <a href="http://www.baidu.com" target="_blank">语文</a> <a href="#">数学</a> <a href="#">物理</a> <a href="#">化学</a> 
					</div>
					<div class="tip_bottom"></div>
	</div>

两种实现方式：
1.用js控制气泡的坐标
思路：先把气泡的div部分写在body里面，然后隐藏起来；然后鼠标hover事件触发的时候，ajax去后台取数据，插入到气泡里面，取到hover的触发坐标，把气泡的坐标算出来，然后把气泡的display:block。这样，气泡就在指定位置出现了。
优点：少写很多代码，而且js上不用插入大篇幅的html代码
缺点：每次触发hover都要去计算坐标

气泡的css：

.myTip{width:339px; position:absolute;z-index:999;}
.tip_top{background-image:url(../images/tip/tip_top.gif);height:11px;font-size:0;}
.tip_mid{background-image:url(../images/tip/tip_mid.gif);padding:0 10px 0 10px;color:#666;font-size:14px}
.tip_mid a{color:#666; text-decoration:none;font-size:14px}
.tip_mid a:hover{ text-decoration:underline}
.tip_bottom{background-image:url(../images/tip/tip_bottom.gif);height:29px;font-size:0;}

jquery:

$().ready(function(){

	$('#audience > li').hover(function(){
		$("#tipContent").html("");
				var key=$(this).text();
				var $a=$(this);
				var left=getLeft(this)+10+"px";
				var top=getTop(this)-35+"px";
	//			alert(left);
				$.ajax({
				url:"audience.xml",
				success:function(xml){
					var list="";
							$(xml).find("class[value='"+key+"']").each(function(){
								
								$(this).find("item").each(function(){
									var value=$(this).find("value").text();
									var key=$(this).find("key").text();
									value="<a target=\"blank\" href=\"/discussMergeResults.jsp?type=V&au="+key+"\">"+value+"</a> &nbsp";
									list+=value;
									});
							});
						$('#tip').attr("style","left:"+left+";top:"+top+";display:block");
						$('#tipContent').html(list);
						}
			});
		},function(){});


function getTop(e){
   var offset=e.offsetTop;
   if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
   return offset;
}
//获取元素的横坐标
function getLeft(e){
   var offset=e.offsetLeft;
   if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
   return offset;
}
	
});

页面部分:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/floatMenuPxxw.js"></script>
<LINK href="css/pxxwStyle.css" type=text/css rel=stylesheet>

</head>
<body>
	<ul id="audience">
		<li>小学</li>&nbsp&nbsp	<li>初中</li>&nbsp&nbsp <li>高中</li>
	</ul>
	<p id="details">
	
	</p>
	    <div class="myTip" id="tip" onclick="hideTip();" style="display:none">
					<div class="tip_top"></div>
					<div class="tip_mid" id="tipContent">
					</div>
					<div class="tip_bottom"></div>
	</div>
	
</body>
</html>

2.用css相对坐标
思路：写一个在每个要hover的地方放一个span，这个主要是用来限制气泡div的相对坐标用，当事件触发的时候，ajax去后台取数据，插入气泡的数据区，然后把气泡的整段div代码插入到span里面去，由于气泡里面有跟span的相对位置限定，所以不需要取鼠标坐标了。
优点：不需要计算鼠标坐标，而且随便插到哪个span下都可以用
缺点：js上写很多html，整段的div都要写在js里面，麻烦...

气泡css代码:

.myTip{width:339px; position:absolute;z-index:999;right:-320px;top:-100px;}
.tip_top{background-image:url(../images/tip/tip_top.gif);height:11px;font-size:0;}
.tip_mid{background-image:url(../images/tip/tip_mid.gif);padding:0 10px 0 10px;color:#666;font-size:14px}
.tip_mid a{color:#666; text-decoration:none;font-size:14px}
.tip_mid a:hover{ text-decoration:underline}
.tip_bottom{background-image:url(../images/tip/tip_bottom.gif);height:29px;font-size:0;}

jquery：

$().ready(function(){

	$('#audience > li').hover(function(){
		$("#tipContent").html("");
				var key=$(this).text();
				var $a=$(this);
				var left=getLeft(this)+10+"px";
				var top=getTop(this)-35+"px";
	//			alert(left);
				$.ajax({
				url:"audience.xml",
				success:function(xml){
					var list="";
							$(xml).find("class[value='"+key+"']").each(function(){
								
								$(this).find("item").each(function(){
									var value=$(this).find("value").text();
									var key=$(this).find("key").text();
									value="<a target=\"blank\" href=\"/discussMergeResults.jsp?type=V&au="+key+"\">"+value+"</a> &nbsp";
									list+=value;
									});
	});
var html="那一堆气泡div的代码"+list;//太长了..不写了..
$(html).insertAfter('页面的那个a后面');//太长了...不写了
						}
			});
		},function(){});
});

页面代码：

<li>
                 <span style="position: relative">
                <a>机关企事业</a>
                
                <div class="myTip" id="tip" onclick="hideTip();" style="display:block">
					<div class="tip_top"></div>
					<div class="tip_mid" id="tipContent">
						<a href="http://www.baidu.com" target="_blank">语文</a> <a href="#">数学</a> <a href="#">物理</a> <a href="#">化学</a> <a href="http://www.baidu.com" target="_blank">语文</a> <a href="#">数学</a> <a href="#">物理</a> <a href="#">化学</a> <a href="http://www.baidu.com" target="_blank">语文</a> <a href="#">数学</a> <a href="#">物理</a> <a href="#">化学</a> 
					</div>
					<div class="tip_bottom"></div>
	</div>
	</span>
                </li>
//这个就是在li里面套了个span，然后把a放在span里面

总结：效果的实现方式有很多种...换个思路就行了..
第一种方案是我自己的.因为不会写css..所以只好计算坐标..
第二种方案是美工的建议..他懂css.帮我调整了气泡的css.增加了span.提供了第二种思路.thks

效果图如下：