JQuery滑动

最新推荐文章于 2025-09-04 18:55:33 发布

weixin_30612769

最新推荐文章于 2025-09-04 18:55:33 发布

阅读量47

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Song-Timfa/p/6295733.html

在JavaScript的流行框架JQuery之中，有一个滑动类型的效果，这个效果是经常用到的，比如在360浏览器或者火狐浏览器之中，关于换肤或者天气的更改地址时候都需要用到这个滑动效果。

在这里有三种情况，第一种是点击后显示出来一个页面，但是缩不回去，第二个是可以缩回去，但是点击不能打开，我们用的经常都是第三种，就是点击按钮的时候可以打开，不需要的时候点击又可以缩回去。

第一种情况slideDown：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#open").click(function(){
    $("#page").slideDown(2000);
  });
});
</script>

<style type="text/css"> 
#page,#open
{
	padding:5px;
	text-align:center;
	background-color:#e5eecc;
	border:solid 1px green;
}
#page
{
	height:100px;
	display:none;
	line-height:100px;
	opacity:0.7;
}
</style>
</head>
<body>
 
<div id="open">点我打开</div>
<div id="page">欢迎打开页面</div>

</body>
</html>

第二种情况slideUp:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#open").click(function(){
    $("#page").slideUp("2000");
  });
});
</script>
 
<style type="text/css"> 
#page,#open
{
	padding:5px;
	text-align:center;
	background-color:#e5eecc;
	border:solid 1px green;
}
#page
{
	height:100px;
	line-height:100px;
	opacity:0.7;
}
</style>
</head>
<body>
 
<div id="open">点我收回页面</div>
<div id="page">如果你点击了我就要回去了!</div>

</body>
</html>

第三种情况slideToggle:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#open").click(function(){
    $("#page").slideToggle("2000");
  });
});
</script>
 
<style type="text/css"> 
#page,#open
{
	padding:5px;
	text-align:center;
	background-color:#e5eecc;
	border:solid 1px green;
}
#page
{
	height:100px;
	line-height:100px;
	display:none;
}
</style>
</head>
<body>
 
<div id="open">点击，显示/隐藏</div>
<div id="page">Hello world!</div>

</body>
</html>

转载于:https://www.cnblogs.com/Song-Timfa/p/6295733.html