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

最新推荐文章于 2020-08-14 12:05:08 发布

appleyk

最新推荐文章于 2020-08-14 12:05:08 发布

阅读量652

点赞数 1

分类专栏： jQuery 文章标签： JQuery的滑动效果 JQuery的slideDwon方法 JQuery的slideUp方法 slideToggle方法的使用

本文链接：https://blog.csdn.net/Appleyk/article/details/78349804

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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 οnlοad="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容器

效果2：（第一次点击）

"折叠" 时间展示，将"欢迎标语"放出来

效果3：（第二次点击）

"折叠" 欢迎标语，将"时间展示"放出来，由于是两个div，你会看到神奇的交替的滑动效果

（1）

（2）

appleyk

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery ☞ 滑动效果演示（面板的收和放）

demo.html//页面一加载的时候就执行下面的方法var statu= 1;$(document).ready(function(){ //给id="board"的div容器添加click事件 $("#board").click(function(){ if (statu==1) { //展开id="panel"的div容器,显示内容，一
复制链接

扫一扫