您的位置：首页 > 其它

Ubuntu 安装ssh 服务

2013-03-05 14:16 435 查看
效果就是个鼠标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>  ";
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>  	<li>初中</li>   <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>  ";
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

效果图如下：



查看原图效果比较好... http://dl.iteye.com/upload/attachment/224265/1345e0df-5c17-3470-922e-78880083c17a-thumb.jpg
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航