jquery实现手风琴效果

最新推荐文章于 2025-06-03 09:11:21 发布

是小王啊i

最新推荐文章于 2025-06-03 09:11:21 发布

阅读量227

点赞数

CC 4.0 BY-SA版权

文章标签： html javascript js css

本文链接：https://blog.youkuaiyun.com/qq_45378970/article/details/108903153

jquery 专栏收录该内容

14 篇文章

订阅专栏

这是一个使用HTML、CSS和jQuery实现的简单页面，包含五个li元素，每个元素宽度200px，高度500px，通过CSS设置无边距和内填充，并实现平滑过渡效果。li元素背景色随机生成，鼠标悬停时，当前元素宽度变为400px，其他元素宽度变为150px，展示了基本的前端交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			li{
				list-style: none;
				width: 200px;
				height: 500px;
				float: left;
				transition: all .3s;
			}
			#box{
				width: 1000px;
				height: 500px;
				border: 1px solid red;
				margin: 0 auto;
				overflow: hidden;
			}
		</style>
		<script src="jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<ul id="box">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<script type="text/javascript">
			$(function(){
				function color(){
					var r=Math.floor(Math.random()*256);
					var g=Math.floor(Math.random()*256);
					var b=Math.floor(Math.random()*256);
					var rgb='rgb('+r+','+g+','+b+')';
					return rgb;
				}
				$('#box li').each(function(index,e){
					$(this).css({
						'background':color,
					})
				})
				$('#box li').hover(function(){
					$(this).width(400);
					$(this).siblings().width(150)
				},function(){
					$(this).width(200);
				})
			})
		</script>
	</body>
</html>