jquery实现手风琴效果

最新推荐文章于 2023-11-22 10:48:18 发布

是小王啊i

最新推荐文章于 2023-11-22 10:48:18 发布

阅读量189

点赞数

文章标签： html javascript js css

本文链接：https://blog.csdn.net/qq_45378970/article/details/108903153

版权

jquery 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

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

是小王啊i

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery实现手风琴效果

<!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; flo
复制链接

扫一扫

专栏目录