1、JS代码如下:
var ShowSpeed = 100;
$(function(){
$("img,a").each(function(){
var tip="";
var type ="";
$(this).hover(function(event){
//判断title是否有内容,如果有则提示title的内容
if($(this).attr("title")!="")
{
type = "title";
tip = $(this).attr("title");
$(this).attr("title","");
}
else
{
type="alt";
tip=$(this).attr("alt");
$(this).attr("alt","");
}
if(tip!=undefined && tip!="")
{
var offset = $(this).offset();
$("#_tooltip_").html(tip);
var showTop = GetShowTop(offset.top,$(this).height());
var showLeft = GetShowLeft(offset.left,$(this).width());
$("#_tooltip_").css({ top: showTop + "px", left: showLeft +"px"});
$("#_tooltip_").fadeIn(ShowSpeed);
}
}
,
function(){
if(tip!="")
{
if(type==""||type=="title")
$(this).attr("title",tip);
else
$(this).attr("alt",tip);
$("#_tooltip_").fadeOut(ShowSpeed);
}
});
});
});
//获取当前提示层的顶部
GetShowTop = function(top,picHeight){
//var divHeight = $("#_tooltip_").css("height");
var divHeight = $("#_tooltip_").height()
var viewHeight = document.body.clientHeight; //浏览器可视高度
var retValue=0;
if(divHeight+top+picHeight>viewHeight)
retValue = top-divHeight-picHeight;
else
retValue = top+picHeight;
return retValue;
}
//获取当前提示层的左边
GetShowLeft = function(left,picWidth){
var divWidth = $("#_tooltip_").width();
var viewWidth = document.body.clientWidth; //浏览器可视宽度
var retValue = 0;
if(divWidth+left>viewWidth)
retValue = left-divWidth+picWidth;
else
retValue = left;
return retValue;
}
2、DIV如下:
<div id="_tooltip_" style="position:absolute;border:2px solid #FDB429 ;background:#FDFCDE; display:none;z-index:1000;height:50px;padding-top:18px;padding-left:4px;padding-right:4px;">
</div>
项目所需,时间比较紧,没有做太多优化,也可能存在错误,谨此记录,以后学习中慢慢修改!