Jquery ☞ 滑动效果演示（面板的收和放）

来源：互联网发布：嵌入式网络视频服务器编辑：程序博客网时间：2024/06/05 08:48

demo.html

<html><head><script  src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script type="text/javascript">//页面一加载的时候就执行下面的方法var statu= 1;$(document).ready(function(){   //给id="board"的div容器添加click事件   $("#board").click(function(){   if (statu==1)   {    //展开id="panel"的div容器,显示内容，一次性            $("#panel1").slideDown();    //收回id="pane2"的div容器,折叠内容，一次性    $("#panel2").slideUp("slow");            statu=2;   }   else   {      //展开id="pane2"的div容器,显示内容，一次性    $("#panel2").slideDown();    //收回id="panel"的div容器,折叠内容，一次性    $("#panel1").slideUp("slow");            statu=1;   }   //或者不用全局变量做标记，直接使用jQuery slideToggle() 方法   //其可以在 slideDown() 与 slideUp() 方法之间进行切换。   //如果元素向下滑动，则 slideToggle() 可向上滑动它们。   //如果元素向上滑动，则 slideToggle() 可向下滑动它们。           //$("#panel2").slideToggle();      });}); //end ready function startTime()   {   var today=new Date();//定义日期对象   var yyyy = today.getFullYear(); //通过日期对象的getFullYear()方法返回年    var MM = today.getMonth()+1;//通过日期对象的getMonth()方法返回年    var dd = today.getDate();//通过日期对象的getDate()方法返回年     var hh=today.getHours();//通过日期对象的getHours方法返回小时   var mm=today.getMinutes();//通过日期对象的getMinutes方法返回分钟   var ss=today.getSeconds();//通过日期对象的getSeconds方法返回秒   // 如果分钟或小时的值小于10，则在其值前加0，比如如果时间是下午3点20分9秒的话，则显示15：20：09   MM=checkTime(MM);dd=checkTime(dd);mm=checkTime(mm);   ss=checkTime(ss);    var day; //用于保存星期（getDay()方法得到星期编号）if(today.getDay()==0)   day   =   "星期日 " if(today.getDay()==1)   day   =   "星期一 " if(today.getDay()==2)   day   =   "星期二 " if(today.getDay()==3)   day   =   "星期三 " if(today.getDay()==4)   day   =   "星期四 " if(today.getDay()==5)   day   =   "星期五 " if(today.getDay()==6)   day   =   "星期六 " document.getElementById('NowTime').innerHTML=yyyy+"-"+MM +"-"+ dd +" " + hh+":"+mm+":"+ss+"   " + day;   setTimeout('startTime()',1000);//每一秒中重新加载startTime()方法 }    function checkTime(i)   {   if (i<10){i="0" + i;}     return i;} </script><style type="text/css"> #panel1,#board{padding:5px;text-align:center;background-color:#e5eecc;border:solid 1px #c3c3c3;}#panel2{padding:5px;text-align:center;background-color:#E6CAFF;border:solid 1px #c3c3c3;}#panel1{padding:50px;display:none;}#panel2{padding:50px;}</style></head><body onload="startTime()">   <div id="board">JQuery效果 --- 滑动</div>   <div id="panel1">欢迎来到Appleyk的CSDN博客</div>   <div id="panel2" >当前时间：<span id="NowTime"></span></div></body><html>

注意的地方：

（1）type="text/javascript"：如果浏览器支持html5,这个type元素不用写

（2）JQuery的src引用百度的CDN（内容分发网络）https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js

效果1：（最原始）

最开始display的是"时间展示"这个div容器