显示如上的层,用于提示一些需要的基本信息,模仿迅雷中的一个应用.代码如下(这里使用了一个图片xl.png,自己弄一个吧):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<title></title>
<script language="javascript">
function onmouseoverhandler()
{
var x = window.event.x;//获得鼠标X轴坐标
var y = window.event.y;//获得鼠标Y轴坐标
var div = document.getElementById("Layer1"); //获得文档中id值为'Layer1'的对象
div.style.display="block"; //设置层显示样式为区块,显示层
div.style.top = y; //设置层的顶端坐标
div.style.left = x;//设置层的左端坐标
var tm= document.getElementById("lb_Time"); //获得文档中id值为'lb_Time'的对象
var tmp = new Date(); //获得客户端当前时间
tm.innerHTML="当前时间: "+tmp.getFullYear()+"-"+(tmp.getMonth()+1)+"-"+tmp.getDate(); //设置对象'lb_Time'的内嵌HTML代码,此处使用innerText也可.
}
function onmouseleavehander()
{
var div = document.getElementById("Layer1"); //获得文档中id值为'Layer1'的对象
div.style.display="none"; //设置层显示样式为'none'-不显示,隐藏层
}
function hiddenDiv(obj)
{
var div = document.getElementById("showInfo");
div.style.filter="alpha(opacity=50)";
div.style.backgroundColor="#FFF9BC";
if(obj.value=="隐藏层")
{
div.style.display="none";
obj.value="显示层";
}else
{
div.style.display="block";
obj.value="隐藏层";
}
}
</script>
</head>
<body>
<br>
<center>
<input type=button value="显示提示信息" onmouseover="onmouseoverhandler();" onmouseleave="onmouseleavehander();"/>
<input type=button value="隐藏层" onclick="hiddenDiv(this);"/>
</center>
<div id="Layer1" style="display:none;filter:Alpha(Opacity=90);opacity:0.90;position:absolute;width:145px;height:78px;
z-index:1;background-color:#ffffff;border: solid 1px #9DCEE8 ">
<div di="LayOne" style="filter:Alpha(Opacity=50);opacity:0.50;height:20px;padding-top:4px;text-align:right;border-width : 0px;">
<label id="lb_Time" style="font-size:12px"></label>
</div>
<div di="LayTwo" style="height:20px;border-width : 0px;">
<b><label id="lb_Two" style="font-size:12px">LayerTwo </label></b>
</div>
<div di="LayThree" style="filter:Alpha(Opacity=50);opacity:0.50;height:20px;border-width : 0px;">
<font style="font-size:12px"><label id="lb_Three">LayerThree</label> <img src="xl.png"
style="width:26px; height:12px; position:relative;"/>
</font>
</div>
<div id="LayUser" style="background-color:#1b69b9;height:20px;text-align:right;border-width : 0px;">
<label style="color:#ffffff;font-size:12px;t">用户名称 </label>
</div>
</div>
<br/>
<div id="showInfo">
<li>层中样式使用的参数的简单说明:</li>
<li>display:none; 隐藏层</li>
<li>filter:Alpha(Opacity=90);opacity:0.90; 层的透明度为90%[使用其中一个即可]</li>
<li>position:absolute; 层的位置:绝对 这个设置不会对影响层外面的数据的位置,relative 相对就会影响了</li>
<li>border: solid 1px #9DCEE8 层的边框的样式大小和颜色,这个顺序是固定的</li>
<li>background-color:#1b69b9; 层的背景色</li>
<li>层中的层的透明度的设置是一定会有影响的</li>
</div>
</body>
</html>
<html>
<head>
<title></title>
<script language="javascript">
function onmouseoverhandler()
{
var x = window.event.x;//获得鼠标X轴坐标
var y = window.event.y;//获得鼠标Y轴坐标
var div = document.getElementById("Layer1"); //获得文档中id值为'Layer1'的对象
div.style.display="block"; //设置层显示样式为区块,显示层
div.style.top = y; //设置层的顶端坐标
div.style.left = x;//设置层的左端坐标
var tm= document.getElementById("lb_Time"); //获得文档中id值为'lb_Time'的对象
var tmp = new Date(); //获得客户端当前时间
tm.innerHTML="当前时间: "+tmp.getFullYear()+"-"+(tmp.getMonth()+1)+"-"+tmp.getDate(); //设置对象'lb_Time'的内嵌HTML代码,此处使用innerText也可.
}
function onmouseleavehander()
{
var div = document.getElementById("Layer1"); //获得文档中id值为'Layer1'的对象
div.style.display="none"; //设置层显示样式为'none'-不显示,隐藏层
}
function hiddenDiv(obj)
{
var div = document.getElementById("showInfo");
div.style.filter="alpha(opacity=50)";
div.style.backgroundColor="#FFF9BC";
if(obj.value=="隐藏层")
{
div.style.display="none";
obj.value="显示层";
}else
{
div.style.display="block";
obj.value="隐藏层";
}
}
</script>
</head>
<body>
<br>
<center>
<input type=button value="显示提示信息" onmouseover="onmouseoverhandler();" onmouseleave="onmouseleavehander();"/>
<input type=button value="隐藏层" onclick="hiddenDiv(this);"/>
</center>
<div id="Layer1" style="display:none;filter:Alpha(Opacity=90);opacity:0.90;position:absolute;width:145px;height:78px;
z-index:1;background-color:#ffffff;border: solid 1px #9DCEE8 ">
<div di="LayOne" style="filter:Alpha(Opacity=50);opacity:0.50;height:20px;padding-top:4px;text-align:right;border-width : 0px;">
<label id="lb_Time" style="font-size:12px"></label>
</div>
<div di="LayTwo" style="height:20px;border-width : 0px;">
<b><label id="lb_Two" style="font-size:12px">LayerTwo </label></b>
</div>
<div di="LayThree" style="filter:Alpha(Opacity=50);opacity:0.50;height:20px;border-width : 0px;">
<font style="font-size:12px"><label id="lb_Three">LayerThree</label> <img src="xl.png"
style="width:26px; height:12px; position:relative;"/>
</font>
</div>
<div id="LayUser" style="background-color:#1b69b9;height:20px;text-align:right;border-width : 0px;">
<label style="color:#ffffff;font-size:12px;t">用户名称 </label>
</div>
</div>
<br/>
<div id="showInfo">
<li>层中样式使用的参数的简单说明:</li>
<li>display:none; 隐藏层</li>
<li>filter:Alpha(Opacity=90);opacity:0.90; 层的透明度为90%[使用其中一个即可]</li>
<li>position:absolute; 层的位置:绝对 这个设置不会对影响层外面的数据的位置,relative 相对就会影响了</li>
<li>border: solid 1px #9DCEE8 层的边框的样式大小和颜色,这个顺序是固定的</li>
<li>background-color:#1b69b9; 层的背景色</li>
<li>层中的层的透明度的设置是一定会有影响的</li>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
