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

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>

 

 

项目所需,时间比较紧,没有做太多优化,也可能存在错误,谨此记录,以后学习中慢慢修改!

 

 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值