jquery配合css实现的悬浮提示效果
2012-05-30 10:19 353 0
a 标签的titile属性能得到提示的效果，但是效果非常不好，而且当鼠标移动到提示信息上面的时候，提示信息就隐藏了，这篇文章主要解决以下几个问题：
当鼠标移到一个a标签之上的时候，能以淡出的方式显示提示信息，
当我将鼠标移动到提示信息的区域之上，提示信息继续保留，知道鼠标离开提示信息区域
提示信息的显示位置是灵活的，能根据当前处罚事件的元素在页面的位置而智能的改变。比如当我鼠标移动到网页左上角的一个超链接上时，这个提示区域自动向下显示，以免隐藏在浏览器的边界之外。
这里的难点在于第二和第三条，第二条主要通过定时器来实现，第三条则需要比较精细的判断。还有一个难点是提示区域的界面，要能在适当的位置显示提示的箭头，这个需要配合第三点的要求实现。
先看js代码：
/**** 以下是悬浮提示效果的代码 ****/
$(document).ready(function() {
var element;
var v,t;
//初始化小名片
if( !element ){
element = $("<div/>")
.css({display:'none',position:'absolute','background-color':'white','z-index':1024})
.attr('id','space_card_content')
.appendTo(document.body).bind('mouseenter',function(){
clearTimeout( v );
}).bind('mouseleave',function(){
$(this).hide();
}).show();
}
var defaults = {
status: 'on',
//小名片模版
cardTpl:'<div class="card_layer"><div class="bg"><div class="effect">'+
'<table><tbody><tr><td>'+
'<div class="card_content">'+
'<div class="card_name clearfix">'+
'<div class="links clearfix" id="space_card_toolbar">专业简介</div>'+
'<dl class="name clearfix">'+
'<dd class="major_detail">'+
'<p>软件工程</p>'+
'<p>计算机科学与技术</p>'+
'<p>信息安全</p>'+
'<p>数值分析</p>'+
'</dd>'+
'</dl>'+
'</div>'+
'</div>'+
'</td></tr></tbody></table>'+
'<div id="space_card_arrow" class="arrow arrow_b"></div></div></div></div>'
}
$("a\[rel='face'\]").bind('mouseover',function(){
var width = $(this).width();
var height = $(this).height();
var position = $(this).offset();
position.width = width;
position.height = height;
t = setTimeout(function(){ //当需要ajax动态获取数据的时候，这个定时器才有用，不过本身还有延时的作用
clearTimeout( v );
$('#space_card_content').html(defaults\['cardTpl'\]);
//alert($('#space_card_content').html());
//小名片的位置.在顶端朝下.在右侧朝左.
var scrollTop = $(document).scrollTop();
var windowWidth = $(window).width();
//当前元素距离顶部的距离
var cardTop = position.top - scrollTop;
//当前元素距离右侧的距离
var cardRight = windowWidth - position.left;
//设置小名片位置 - 朝左
if(cardRight<400) {
element.css({top:position.top + 145, left:position.left - 320}).show();
$('#space_card_arrow').removeClass('arrow_b').addClass('arrow_r');
//设置小名片位置 - 朝下
} else if (cardTop<900){
element.css({top:position.top +157 + position.height, left:position.left+5}).show();
$('#space_card_arrow').removeClass('arrow_b').addClass('arrow_t');
//设置小名片位置 - 朝上
} else {
element.css({top:position.top-43, left:position.left}).show();
}
$('#space_card_content').fadeIn("fast");
}, 550);
}).bind('mouseout',function(event){
clearTimeout(t);
v = setTimeout(function(){
element.hide();
},700);
});
});
这里特别要注意setTimeout的用法，每个setTimeout都是不能少的。否则会出现功能上的欠缺。 要完整显示出效果来，还需要配上css样式，本来需要加载一张箭头的图片，这里就不放上来了，不过还是保留了这张图片的css样式。
<style type="text/css">
.card_layer .card_content {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #BBB;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
position: relative;
cursor: pointer;
width: 350px;
}
.card_layer {
border-radius: 4px 4px 4px 4px;
color: #666666;
left: -22px;
position: absolute;
top: -158px;
z-index: 9999;
}
.card_layer .bg {
border-radius: 4px 4px 4px 4px;
padding: 4px;
background-color: #F5F5F5;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.clearfix:after {
clear: both;
content: ".";
display: block;
font-size: 0;
line-height: 0;
margin: 0;
overflow: hidden;
padding: 0;
}
.card_name {
color: #5D5D5D;
}
.card_name .name {
padding: 4px 15px 10px;
}
.card_name .name dt,.card_name .name dd,.card_name .info dt,.card_name .info dd
{
display: inline;
float: left;
}
.card_name .userdata {
width: 200px;
}
ul,ol {
list-style: none outside none;
}
.card_name .userdata li {
float: left;
margin-right: 10px;
text-align: left;
}
.card_name .links {
background-color: #f8f8f8;
line-height: 25px;
padding: 3px 10px;
text-align: left;
}
.card_layer .arrow,.card_layer .arrow_hui {
background: url("https://img.paonet.com/upload-images-old/banner/layer_arrow.png")
no-repeat scroll 0 0 transparent;
display: block;
overflow: hidden;
position: absolute;
}
.card_layer .arrow_r,.card_layer .arrow_l {
background-position: -11px -24px;
height: 16px;
right: -5px;
top: 20px;
width: 11px;
}
.card_layer .arrow_l {
background-position: 0 -24px;
left: -5px;
right: auto;
}
.card_layer .arrow_t,.card_layer .arrow_b {
background-position: 0 -1px;
height: 11px;
left: 30px;
top: -5px;
width: 16px;
}
.card_layer .arrow_b {
background-position: 0 -11px;
bottom: -5px;
top: auto;
}
</style>
最后你还需要引入你的jquey包。本文的代码可以在这里下载 http://pan.baidu.com/netdisk/singlepublic?fid=287700_1447341484
