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

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 οnclick='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" οnmοuseοut="tagnone();" οnmοuseοver="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-->

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值