您的位置：首页 > Web前端 > JavaScript

div Js隐藏显示

2008-03-15 14:18 399 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style>

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: #D9EBC7;

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: #D9EBC7;

font-weight: bold;

color: #666;

padding: 0 0.5em;

margin: 0;

}

.poptip .close {

background: #D9EBC7;

float: right;

}

.poptip ul {

margin: 0.5em 1em;

padding: 0;

list-style: none;

}

.poptip li {

background:#D9EBC7;

padding-left: 1;

height: 1;

overflow: hidden;

}

.poptip .readmore {

margin: 0 0.5em;

border-top: 1px solid #DAE1F1;

text-align: right;

background:#D9EBC7;

padding-right: 1em;

}

.hnli{

width:255px;

}

</style>

</head>

<body>

<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(index)

{

var strAry=new Array();

strAry[1]='<%=showStr01 %>';

strAry[2]="2dddddddssssssssssssssd";

var tip = parent.document.getElementById("tipDiv");

tip.style.display="inline";

tip.innerHTML = "<div class='poptip'><div class='innertip'><ul><li>"+strAry[index]+"</li><li><a onclick='tagnone()' class='close' title='关闭'>关闭</a></li></ul></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部分

<img src="file:///E|/工作项目/大东区绿化/相关文件/需求/大东区绿化/古树.jpg" width="1004" height="1489" border="0" usemap="#Map" />

<map name="Map" id="Map">

<area shape="rect" coords="40,74,299,199" href="#" onmouseover="conentall('ssssssssss');" onmouseout="tagnone()" />

</map>



<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"></div>



</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航