当前位置:编程学习 > JS >>

鼠标移动到图片上去然后显示一个层的js代码

Div弹出层-当鼠标移上去出现一个层,鼠标移开这个层消失的特效,大家可以直接拿去用

/*弹出div显示客户信息
  function createXhR()
   {
    var xhr;   
   
    try
    {
     xhr = new ActiveXObject("Msxml2.XMLhTTP");
    }
    catch(e)
    {
     try
     {
      xhr = new ActiveXObject("Microsoft.XMLhTTP");
     }
     catch(e)
     {
      xhr = false;
     }
    }   
    if(!xhr && typeof XMLhttpRequest != 'undefined') xhr = new XMLhttpRequest();
   
    return xhr;
   }
 
  function divyy(fw, name)
  {
 
    if(document.getElementById('div3')!=null)
         {
          var div21="div3";
          RemoveDiv(div21);
          }
         var div2= document.createElement("div");
         div2.id="div3";
         var clientxs=event.clientX;
         var clienty=event.clientY-100;

         var srtr="";


var srtr="";
 var xhr;
    xhr = createXhR();
    var url="../zzzyk.asp?id="+fw+"";
    xhr.open("post", url,false);
 
    xhr.onreadystatechange = function()
    {
     if(xhr.readyState == 4 && xhr.status == 200)
      srtr = xhr.responseText;
    }   
    xhr.send(null);
 
 
    var sr=srtr.split("|");
             var str="<div id='oDiv1' style='position:absolute;width:300px;height:auto;border:1px solid silver;background-color:#FFFFFF; top:"+clienty+"px;Left:"+clientxs+"px; '>";
  str +="<div id='move1' style='' onmousedown='Milan_StartMove(event,this.parentNode)' onmouseup='Milan_StopMove(event)'";
  str +="style='cursor:move;width:97%;height:25px;background-color:#ebf1ff; font-size:14px;padding-left:10px;padding-top:10px;font-size:14px;text-align:left' ><font color='red'>"+ name+"</font>-联系信息</div>";
  str +="<div style='width:98%; padding-left:15px; padding-top:10px; font-size:14px;line-height:20px;height:auto;'>";
  str +="<div style='width:100%;float:left;height:auto; padding-top:10px;padding-bottom:20px;'><div  style='height:25px; width:80px;float:left;text-align:right;font-size:14px;'>职位:</div><div style='float:left; width:200px;height:25px;text-align:left;'>"+sr[0]+"</div>";
  str +="<div  style='height:25px; width:80px;float:left;text-align:right;font-size:14px;'>联系电话:</div><div style='float:left; width:200px;height:25px;text-align:left; word-break: break-all;'>"+sr[1]+"</div>";
  str +="<div  style='height:25px; width:80px;float:left;text-align:right;font-size:14px;'>手机:</div><div style='float:left; width:200px;height:25px;text-align:left; word-break: break-all;'>"+sr[2]+"</div>";
  str +="<div  style='height:25px; width:80px;float:left;text-align:right;font-size:14px;'>业务传真:</div><div style='float:left; width:200px;height:25px;text-align:left;'>"+sr[3]+"</div>";
  str +="<div  style='height:25px; width:80px;float:left;text-align:right;font-size:14px;'>Email:</div><div style='float:left; width:200px;height:25px;text-align:left;'>"+sr[4]+"</div>";
  str +="<div  style='height:25px; width:80px;float:left;text-align:right;font-size:14px;'>QQ:</div><div style='float:left; width:200px;height:25px;text-align:left;'>"+sr[5]+"</div>";
  str +="<div  style='height:25px; width:80px;float:left;text-align:right;font-size:14px;'>MSN:</div><div style='float:left; width:200px;height:25px;text-align:left;'>"+sr[6]+"</div>";
  str +="</div></div></div>";
            div2.innerHTML=str;
            document.getElementById("divps").appendChild(div2);
  }
 
 
  function divClose()
  {
   if(document.getElementById('div3')!=null)
          {
            var div21="div3";
          RemoveDiv(div21);
          }
  }
 
  function RemoveDiv(obj)
        {
        var ob = document.getElementById(obj);  
         ob.parentNode.removeChild(ob);
        }

================================================

当鼠标移动上去显示一个层,在这个对象的旁边,并且可以给这个层添加值

<reference path="../script/jquery-1.3.2-vsdoc.js" />
/*
*简单的提示信息控件,这个控件是我写的最简单的一个控件,只供参考,有问题可以联系我,这个控件基于jquery框架的必须引入JQUERY框架

把我的代码复制到一个js文件里,然后引用就可以了
当鼠标移动上去显示一个层,在这个对象的旁边,并且可以给这个层添加值
*/
//参数介绍:divId是你要浮动显示层的ID,value你要给这个提示层里面放的值
$.fn.myHoverTip = function(divId, value) {
    var div = $("#" + divId); //要浮动在这个元素旁边的层
    div.css("position", "absolute");//让这个层可以绝对定位
    var self = $(this); //当前对象
    self.hover(function() {
        div.css("display", "block");
        var p = self.position(); //获取这个元素的left和top
        var x = p.left + self.width();//获取这个浮动层的left
        var docWidth = $(document).width();//获取网页的宽
        if (x > docWidth - div.width() - 20) {
            x = p.left - div.width();
        }
        div.css("left", x);
        div.css("top", p.top);
        div.html(value);
    },
    function() {
        div.css("display", "none");
    }
    );

    return this;
}

 

 

---------------script代码

    <script src="../script/jquery-1.3.2.js" type="text/javascript"></script>
    <script src="myHoverTip.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $("#tipDiv").myHoverTip("hoverDiv","12e23e32edasdsad");
        });
   
    </script>

 

---------------------HTML代码

 <div>
    <div style="float:left; width:200px; height:200px; background-color:Red;"></div>
        <div id="tipDiv" style=" width:100px; height:300px; float:left; background-color:Gray;">
        asdf
        asdfsadf
        </div>
        <div id="hoverDiv" style="display:none; width:130px; height:100px; background-color:Yellow; position:absolute;"></div>
    </div>

CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,