js实现 菜单层和内容层 共同显示 效果
来源：互联网 发布：网络侦查技术有哪些 编辑：程序博客网 时间：2024/04/30 01:57
当鼠标放到菜单层某个节点时， 它代表的内容显示，其他内容层隐藏
鼠标放到09/13上时
鼠标放到09/14上时(此时无数据）
<!--#include file="conn.asp"-->连接数据库
<!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=utf-8" />
<title> </title >
<link href="css/body.css" rel ="stylesheet" type ="text/css" />
<script type="text/javascript" src ="js/jquery.min.js"></ script>
<script language="javascript">
function scrollDoor() {
}
scrollDoor.prototype = {
sd: function(menus, divs, openClass, closeClass) {
var _this = this ;
if (menus.length != divs.length) {
alert( "菜单层数量和内容层数量不一样 !");
return false ;
}
for (var i = 0; i < menus.length; i++) {
_this.$(menus[i]).value = i;
_this.$(menus[i]).onmouseover = function() {
for (var j = 0; j < menus.length; j++) {
_this.$(menus[j]).className = closeClass;
_this.$(divs[j]).style.display = "none";
}
_this.$(menus[ this.value]).className = openClass;
_this.$(divs[ this.value]).style.display = "block";
}
}
},
$: function(oid) {
if (typeof (oid) == "string")
return document.getElementById(oid);
return oid;
}
}
window.onload = function() {
var SDmodel = new scrollDoor();
SDmodel.sd([ "FCtime01", "FCtime02" , "FCtime03", "FCtime04", "FCtime05" , "FCtime06", "FCtime07" ], ["FCpanel01", "FCpanel02", "FCpanel03" , "FCpanel04", "FCpanel05", "FCpanel06" , "FCpanel07" ], "card01", "card02");
}
</script>
</head>
<body>
<div class="FinCalendar">
<h2 style="position : relative; ">
<a href="FinCalendar.aspx" target ="_blank">财经日历</a > < span><!--<a href="javascript:window.top.location.reload();"> 刷新</a>--></ span><span
style="position : absolute; right: 0 ;"><a href="FinCalendar.aspx" target ="_blank">更多>> </a></ span>
</h2>
<ul class="FCToolBar">
<li class="FCT00"> </li>< li class ="FCT01">时间</ li><li class="FCT02">指标名称 </li>< li
class="FCT03">重要性 </li>< li class ="FCT04">前值</ li><li class="FCT05">预测值 </li>< li class ="FCT06">
公布值</li ></ul>
<ul class="FCtime">
<%
dim td
td= date()
%>
<li id="FCtime01" class="card01"><% =FormatDate(td-weekday(td)+1+1,6) %> Mon</li>< li id ="FCtime02" class ="card02"><%=FormatDate(td-weekday(td)+1+2,6) %>
Tue </li>< li id ="FCtime03" class="card02"><% =FormatDate(td-weekday(td)+1+3,6) %> Wen </li>< li id ="FCtime04" class ="card02">
<%=FormatDate(td-weekday(td)+1+4,6) %> Thu</li ><li id="FCtime05" class="card02"><% =FormatDate(td-weekday(td)+1+5,6) %> Fri </li>< li id ="FCtime06" class ="card02">
<%=FormatDate(td-weekday(td)+1+6,6) %> Sat</li ><li id="FCtime07" class="card02"><% =FormatDate(td-weekday(td)+1,6) %> Sun </li>
</ul>
<div id="FCpanel01" class="FCPanel" style="overflow-y : auto; overflow-x: hidden ;
height: 210px ;">
<%
set rs=server.createobject("adodb.recordset" )
sql= "select * from TableInfo where convert(varchar(12),PUBLISHTIME,112)=convert(varchar(12),'"&FormatDate(td-weekday(td)+1+1,14)&"',112)"
rs.open sql,comm,1,1
do while not rs.eof
if(rs("zyx" )="高 ") then
img= "images/icon_high.gif"
elseif(rs("zyx" )="中 ") then
img= "images/icon_mid.gif"
else
img= "images/icon_low.gif"
end if
%>
<ul>
<li class="FCT01"><% =rs("time" ) %> </li>< li class ="FCT02"><%=rs( "country") %><%=chkIsNull(rs( "ITEM")) %><%=rs( "TableData") %></li >
<li class="FCT03">
<img src="<% =img %>" /></li>
<li class="FCT04"><% =chkIsNull(rs("LAST" )) %> </li>
<li class="FCT05"><% =chkIsNull(rs("PRE" )) %> </li>
<li class="FCT06"><% =chkIsNull(setImg(rs("Now ))) %> </li>
</ul>
<%
rs.movenext
loop
rs.close
set rs=nothing
%>
</div>
<div id="FCpanel02" class="FCPanel hidden" style ="overflow-y: auto; overflow-x : hidden;
height: 210px ;">
同FCpanel01只不过查询时间不同
</div>
<div id="FCpanel03" class="FCPanel hidden" style ="overflow-y: auto; overflow-x : hidden;
height: 210px ;">
同FCpanel01只不过查询时间不同
</div>
<div id="FCpanel04" class="FCPanel hidden" style ="overflow-y: auto; overflow-x : hidden;
height: 210px ;">
同FCpanel01只不过查询时间不同
</div>
<div id="FCpanel05" class="FCPanel hidden" style ="overflow-y: auto; overflow-x : hidden;
height: 210px ;">
同FCpanel01只不过查询时间不同
</div>
<div id="FCpanel06" class="FCPanel hidden" style ="overflow-y: auto; overflow-x : hidden;
height: 210px ;">
同FCpanel01只不过查询时间不同
</div>
<div id="FCpanel07" class="FCPanel hidden" style ="overflow-y: auto; overflow-x : hidden;
height: 210px ;">
<%
set rs=server.createobject("adodb.recordset" )
sql= "select * from TableInfo whereconvert(varchar(12),PUBLISHTIME,112)=convert(varchar(12),'"&FormatDate(td-weekday(td)+1+0,14)&"',112)"
rs.open sql,comm,1,1
do while not rs.eof
if(rs("zyx" )="高 ") then
img= "images/icon_high.gif"
elseif(rs("zyx" )="中 ") then
img= "images/icon_mid.gif"
else
img= "images/icon_low.gif"
end if
if rs.recordCount=0 then
tips= "今日无重要数据公布"
else
tips= ""
end if
%>
<ul>
<li class="FCT01"><% =rs("country" ) %> </li>< li class ="FCT02"><%=chkIsNull(rs( "ITEM")) %><%=rs( "TableData") %></li >
<li class="FCT03">
<img src="<% =img %>" /></li>
<li class="FCT04"><% =chkIsNull(rs("LAST" )) %> </li>
<li class="FCT05"><% =chkIsNull(rs("PRE" )) %> </li>
<li class="FCT06"><% =chkIsNull(setImg(rs("Now ))) %> </li>
</ul>
<div style="text-align : center; color: Red">
<%=tips %></div >
<%
rs.movenext
loop
rs.close
set rs=nothing
comm.close
set comm=nothing
%>
</div>
<%
function chkIsNull(str)
if trim(str)="" or isnull(trim(str)) then
chkIsNull= "---"
else
chkIsNull=str
end if
end function
function setImg(i)
if i="" or isnull(i) then
setImg= "待公布"
else
setImg =i
end if
end function
%>
<div class="clear">
</div>
</div>
</body>
</html>
- js实现 菜单层和内容层 共同显示 效果
- CSS实现onMouseOver、onMouseOut效果和层套菜单
- Js实现主页面中显示/隐藏层的效果
- js 实现拖动层效果
- 点击显示和隐藏层(js效果,IE FF均可)
- javascript实现层div的显示和隐藏效果
- JS DIV层显示图片效果
- 显示隐藏层实现的下拉菜单
- bootstrap中实现滑动显示层效果。
- JS 实现图层模式覆盖效果
- js实现遮盖层划出效果-------Day77
- html+js/jquery实现弹出层效果
- js鼠标拖动层/层的移动和浮动效果
- js弹出层效果
- js---弹出层效果
- iOS开发之实现半透明蒙层背景效果[用于下拉菜单页和分享页]
- 使用层显示实现下拉菜单的显示。
- JS实现弹出可移动的层，窗口，提示框（可自定弹出层的标题和内容）
- github使用学习
- MINA2.0用户手册中文版--第三章 第一节 IoService接口简介
- oracle绑定变量
- SVN服务器的搭建流程
- Linux 服务器的一些错误总结
- js实现 菜单层和内容层 共同显示 效果
- Eclipse使用小技巧
- QString介绍
- java乱码处理集中营
- IOS 使用开发者账号实现真机调试！
- MINA2.0用户手册中文版--第四章 MINA中的Session
- 精选37条强大的常用linux shell命令组合
- (SQL)修改表结构[字段类型]示例代码
- PostgreSQL SQL的性能调试方法3--查看执行计划
