2384381190

13590589238

JQuery写的一个弹出提示层与定位的小代码

2012-8-25 浏览 5138

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>

上一篇: js弹出层代码
下一篇: asp编写

联系我们

CONTACT US

咨询热线: 地址:广东佛山龙江保涌工业区A101-A103 版权所有:花蝶谷工作室 备案号:粤ICP备2021090779号-2 QQ:2384381190 service@huadiegu.net
您是第 位访问者