＜jQuery-常用方法2＞

最新推荐文章于 2024-07-04 12:16:35 发布

好先生·

最新推荐文章于 2024-07-04 12:16:35 发布

阅读量56

点赞数

分类专栏： JavaScipt基础 jQuery基础文章标签： javascript jquery

本文链接：https://blog.csdn.net/weixin_45540964/article/details/110913380

版权

JavaScipt基础同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

jQuery基础

10 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		.container {
			border: 1px solid #000;
			position: relative;
			height: 500px;
			width: 500px;
		}
		.box {
			width: 500px;
			height: 500px;
			background: pink;
			position: absolute;
			/*实现下滑
			 用定位实现相对于底边进行高度改变*/

			/*bottom: 0;*/
		}
	</style>
</head>
<body>
	<h1>下拉和上滑</h1>
	<button>下拉</button>
	<button>上滑</button>
	<button>切换</button>
	<hr>
	<div class="container">
		<div class="box"></div>
	</div>
	<script src="./jquery-1.12.3/jquery-1.12.3.min.js"></script>
	<script type="text/javascript">
		var btns = $('button');
		var box = $('.box');
		//绑定下拉
		btns.eq(0).click(function() {
			box.slideDown(500);
		});
		//绑定上滑
		btns.eq(1).click(function() {
			box.slideUp();
		});
		//切换
		btns.eq(2).click(function() {
			box.slideToggle(500);
		});
	</script>
</body>
</html>