js-div详细内容跟随鼠标显示

来源:互联网 发布:犀牛5.0mac版授权码 编辑:程序博客网 时间:2024/05/17 22:14

CSS:


div.poptip {
position: absolute;
border-bottom: 2px solid #CCC;
border-right: 2px solid #CCC;
padding: 0;
text-align: left;
width: 300px;
opacity: 0.9;
}
div.innertip {
background: #FFF;
border: 1px solid #BBB;
line-height: 1.8em;
}
.poptip > .innertip {
margin-bottom: -1px;
}

div.poptip a {
font-weight: normal;
text-decoration: none;
}
div.poptip p.title {
background: #EEE url(DreamImage/dotline_h.gif) repeat-x bottom;
font-weight: bold;
color: #666;
padding: 0 0.5em;
margin: 0;
}
.poptip .close {
background: url(DreamImage/icon_del.gif) no-repeat center;
float: right;
display: block;
width: 1.5em;
text-indent: -9999px;
overflow: hidden;
}
.poptip ul {
margin: 0.5em 1em;
padding: 0;
list-style: none;
}
.poptip li {
background: url(DreamImage/icon_link.gif) no-repeat 0 5px;
padding-left: 1em;
height: 1.8em;
overflow: hidden;
}
.poptip .readmore {
margin: 0 0.5em;
border-top: 1px solid #DAE1F1;
text-align: right;
background: url(DreamImage/icon_list.gif) no-repeat right;
padding-right: 1em;
}
.hnli{
width:255px;
} *

脚本

<script language="javascript" type="text/javascript">
    function tagnone()
    {
     document.getElementById("tipdiv").style.display="none";
    }
    var offX = 2;
    var offY = 0;
    var width = 0;
    var height = 0;
    var scrollX = 0;
    var scrollY = 0;
    var x = 0;
    var y = 0;
    function conentall(name,conent)
    {
        var tip = parent.document.getElementById("tipDiv");
        tip.style.display="inline";
        tip.innerHTML = "<div class='poptip'><div class='innertip'><p class='title'><a onclick='tagnone()' class='close' style='cursor:hand' title='关闭'>关闭</a>名称:"+name+"</p><ul><li>内容&amp; lt;/li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+conent+"</ul></p></div></div>";
       
        if (window.innerWidth) width = window.innerWidth - 18;
     else if (document.documentElement && document.documentElement.clientWidth)
      width = document.documentElement.clientWidth;
     else if (document.body && document.body.clientWidth)
      width = document.body.clientWidth;
   
     if (window.innerHeight) height = window.innerHeight - 18;
     else if (document.documentElement && document.documentElement.clientHeight)
      height = document.documentElement.clientHeight;
     else if (document.body && document.body.clientHeight)
      height = document.body.clientHeight;

     if (typeof window.pageXOffset == "number") scrollX = window.pageXOffset;
     else if (document.documentElement && document.documentElement.scrollLeft)
      scrollX = document.documentElement.scrollLeft;
     else if (document.body && document.body.scrollLeft)
      scrollX = document.body.scrollLeft;
     else if (window.scrollX) scrollX = window.scrollX;
       
     if (typeof window.pageYOffset == "number") scrollY = window.pageYOffset;
     else if (document.documentElement && document.documentElement.scrollTop)
      scrollY = document.documentElement.scrollTop;
     else if (document.body && document.body.scrollTop)
      scrollY = document.body.scrollTop;
     else if (window.scrollY) scrollY = window.scrollY;
   
     x=event.pageX?event.pageX:event.clientX+scrollX;
     y=event.pageY?event.pageY:event.clientY+scrollY;
    
        if(x+tip.offsetWidth+offX>width+scrollX){
   x=x-tip.offsetWidth-offX;
   if(x<0)x=0;
     }else x=x+offX;
     if(y+tip.offsetHeight+offY>height+scrollY){
      y=y-tip.offsetHeight-offY;
      if(y<scrollY)y=height+scrollY-tip.offsetHeight;
     }else y=y+offY;
     tip.style.left=x+"px";
     tip.style.top=y+"px";
     //tip.style.display = '';
    }
   
</script>



html部分
<a class="liebiao" style="cursor:hand" onmouseout="tagnone();" onmouseover="conentall('<%# Eval("Shopping_Name")%>','<%# Eval("Shopping_Conent")%>');"><%# ChangPowerStr(DataBinder.Eval(Container, "DataItem.Shopping_Conent").ToString())%></a>
<!--弹出详细内容div-->
<div id="tipDiv" style="BORDER-RIGHT:#333366 1px solid; BORDER-TOP:#333366 1px solid; DISPLAY:none; Z-INDEX:1; BORDER-LEFT:#333366 1px solid; BORDER-BOTTOM:#333366 1px solid; POSITION:absolute; BACKGROUND-COLOR:#ffffcc">alt描述</div>
<!--弹出详细内容div-->

原创粉丝点击