<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Menu.aspx.cs" Inherits="WebApplication1.Menu" %> <!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 runat="server"> <title></title> <script src="jq2.1/jquery-2.1.3.js" type="text/javascript"></script> <style type="text/css"> #menu{ width:150px; background-color:Yellow; font-family:黑体; margin:0px; padding:0px; border:solid 3px gray;} .bigMenu{ height:30px;list-style:none; border-bottom:solid 1px gray; line-height:30px; font-size:14px; color:Orange; background-color:Green;cursor:pointer;} .smallMenu{ list-style:none;} .smallMenu li{ list-style:none; height:25px; font-size:14px; line-height:25px; color:Blue; border-bottom: deshed 1 px orange; text-align:center;} .smallMenu ul{ margin:0px; padding:0px;} .over{ color:Red; font-weight:bold; background-color:Blue;} .seleted{ color:White; font-weight:bold; background-color:Purple;} </style> <script type="text/javascript"> $(function () { $(".smallMenu:not(:first)").hide(); //第一个子菜单之外的所有子菜单隐藏 $(".bigMenu").click(function () { if ($(this).next(".smallMenu").is(":hidden")) { $(".smallMenu").hide("fast"); //所有子菜单隐藏 $(this).next(".smallMenu").show("fast"); //当前大菜单下的子菜单显示 $(".seleted").removeClass("seleted"); $(this).addClass("seleted"); } }).mouseover(function () { $(this).addClass("over"); }).mouseout(function () { $(this).removeClass("over"); }); }); </script> </head> <body> <form id="form1" runat="server"> <div> <ul id="menu"> <li class="bigMenu">系统管理</li> <li class="smallMenu"> <ul> <li>系统设置</li> <li>用户管理</li> <li>角色管理</li> <li>个人信息</li> </ul> </li> <li class="bigMenu">收费管理</li> <li class="smallMenu"> <ul> <li>费用查询</li> <li>缴费</li> <li>账单打印</li> </ul> </li> <li class="bigMenu">房间管理</li> <li class="smallMenu"> <ul> <li>楼栋管理</li> <li>业主管理</li> <li>户型管理</li> <li>车位管理</li> </ul> </li> <li class="bigMenu">资产管理</li> <li class="smallMenu"> <ul> <li>公共设备</li> <li>办公用品</li> <li>储备物资</li> </ul> </li> </ul> </div> </form> </body> </html>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="QianHe.aspx.cs" Inherits="WebApplication1.QianHe" %> <!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 runat="server"> <title></title> <style type="text/css"> *{ margin:0px; padding:0px;} #list li{ float:left; width:160px; height:160px; overflow:hidden; margin-left:5px; border:solid 3px gray;} #list li img{ width:160px; height:160px; position:relative; left:0px; top:0px;} #list li div{ position:relative; right:0px; top:-20px; width:100%; height:20px; text-align:center; background-color:Silver; filter:alpha(opacity=50); opacity:0.5;} </style> <script src="jq2.1/jquery-2.1.3.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#list li div").hide(); //隐藏其他的div $("#list li").mouseover(function () {//鼠标放上 //让这个list里面的div显示 $("#list li div:animated").stop(true, true); $("#list li div").hide(); //图片变大 var v= $(this).find("img")[0]; //animate({260,left:-50,top:-50qw,height:260},500); var i = 160; var div=$(this).find("div")[0]; var si = setInterval(function () { v.style.width = i + "px"; v.style.heiht = i + "px"; v.style.top = (160 - i) / 2 + "px"; v.style.left = (160 - i) / 2 + "px"; div.style.top = (-20 + (160 - i))+ "px"; i += 4; if (i >= 260) { clearInterval(si); } }, 10); //div显示 $(this).find("div").show("fast", function () { $(this).css("filter", "alpha(opacity=50)") }); }); }); </script> </head> <body> <form id="form1" runat="server"> <div> <ul id="list"> <li> <img src="img/1.jpg"/> <div>有房高新 18岁 男</div> </li> <li> <img src="img/3.jpg"/> <div>有房高新 28岁 男</div> </li> <li> <img src="img/4.jpg"/> <div>活泼奔放 18岁 女</div> </li> <li> <img src="img/5.png"/> <div>美丽性感 17岁 女</div> </li> <li> <img src="img/6.jpg"/> <div>善良可爱 19岁 女</div> </li> </ul> </div> </form> </body> </html>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="QQ.aspx.cs" Inherits="WebApplication1.QQ" %> <!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 runat="server"> <title></title> <script src="jq2.1/jquery-2.1.3.js" type="text/javascript"></script> <style type="text/css"> *{ margin:0px; padding:0px;} #title li{ float:left; width:80px; height:40px; text-align:center; border:solid 1px red;} #news { clear:both; width:480px; height:480px; overflow:hidden; } #news div { width:480px; height:480px; } </style> <script type="text/javascript"> $(function () { $("#title li").each(function (i) {//遍历 $(this).mouseover(function () { //找到第i个div让他显示,其他隐藏 $("#news div").hide(); $("#news div:eq(" + i + ")").show("fast"); }); }); }); </script> </head> <body> <form id="form1" runat="server"> <div> <ul id="title"> <li>娱乐</li> <li>社会</li> <li>体育</li> <li>科技</li> <li>军事</li> </ul> <div id="news"> <div style=" background:Red;"> 1.王菲怀孕了!!!与豪哥无关!<br /> 2.求小糯米照片!<br /> </div> <div style=" background:Blue;"> 1.客机又坠落了<br /> 2.看武大樱花<br /> </div> <div style=" background:green;"> 无！ </div> <div style=" background:yellow;"> 1.Window预览版<br /> 2.三星的S6即将发布<br /> </div> <div style=" background:orange;"> 1.缅甸与中国开战<br /> </div> </div> </div> </form> </body> </html>