读书人

鼠标放到一个文字上浮动显示详细信息

发布时间: 2012-03-21 13:33:15 作者: rapoo

鼠标放到一个文字上,浮动显示详细信息
用JS,谁有代码啊?

[解决办法]
设置span或者div等HTML元素的title属性就行了,不需要用js
[解决办法]
<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,phone,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> 预定电话: "+phone+ " <li> 地址: </li>          "+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( "Pastime_Name ")%> ', ' <%# Eval( "Pastime_Phone ")%> ', ' <%# Eval( "Pastime_Inc ")%> '); "> <%# Eval( "Pastime_Name ")%> </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-->
[解决办法]
如果是用asp:Label这服务器控件来显示文字的话,直接设置它的Tooltip就行了。
[解决办法]
请参考:http://www.xproer.com/bbs/revert.aspx?fid=6&tid=597

读书人网 >asp.net

热点推荐