jquery楼层特效（点击加滚动）

最新推荐文章于 2024-02-14 09:08:49 发布

原创

最新推荐文章于 2024-02-14 09:08:49 发布 · 4.4k 阅读

收录于

本文介绍了使用jQuery创建楼层切换并伴随页面滚动的特效，包括两种不同的点击后效果，可以根据实际需求选择合适的方式进行实现。

html部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{padding: 0;margin: 0;}
			.banner{width: 600px;height: 650px;margin: 0 auto;text-align: center;line-height: 650px;
			font-size: 20px;}
			.banner_one{background: red;}
			.banner_two{background: green;}
			.banner_three{background: gray;}
			.banner_four{background: pink;}
			.banner_five{background: orchid;}
			.banner_six{background: orange;}
			.floor{position: fixed;top: 200px;left: 100px;}
			.floor li{width: 50px;height: 50px;border: 1px solid red;list-style: none;
			text-align: center;line-height: 50px;}
			a{text-decoration: none;color: black;display: block;}
			.footer{width:600px;height:300px;background:bisque;margin:0 auto;text-align:center;}
			.active{background: red;}		
		</style>
	</head>
	<body>
		
		<!--banner部分-->
		<div class="banner_one banner" id