＜jQuery-常用方法2＞

好先生·

于 2020-12-08 23:50:13 发布

阅读量85

点赞数

CC 4.0 BY-SA版权

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

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

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

37 篇文章

订阅专栏

jQuery基础

10 篇文章

订阅专栏

本文介绍如何使用jQuery实现HTML页面中的元素实现下拉、上滑和切换效果，通过CSS和JavaScript结合，演示了如何控制绝对定位元素根据操作动态调整位置。

在这里插入图片描述

<!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>