手风琴HTML+CSS+JS(jQuery)实现——WEB(二)

10.28-11.3 WEB(二)

上周作业复习WEB(一),整理资料
居中写三遍,JS原生轮播图背着能写出。
1、手风琴 这个是点了才动你可以写hover,hover之后滑动但是移出就还原,点击才像视频里这样,不还原,你可以用div背景色,或者自己找图这里面是有动画效果的,不是直接就变了。
2、css单位,px、em、rem、vmin、vmax
3、媒体查询
4、帧动画
5、3d盒子
6、还有个正方体,我找找这个有扩展,换图
7、百叶窗
8、再写一个JQ轮播图

手风琴实现——WEB(二)

先放一个效果图镇楼


老规矩按照注释1~9顺序标注进行代码书写:
1、给body加背景图
2、设置一个总的盒子来装手风琴
3、设置四个图片样式让他们横向排列,前三张宽度只留索引的宽度,第四张铺满盒子。
4、给图片上索引的地方中间加文字,让前三张文字成为竖排
5、给文字加盒子。实现所有文字成为竖排
6、开始设置动态效果鼠标停在索引上,对应图片宽度设置铺满,其他为索引宽度
7、把图片父级宽度放大到120%防止鼠标快速滑动,图片掉出手风琴盒子,同时把盒子设置为超出部分隐藏。

上代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
		<title>shoufenqing</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body{
				/* 1.背景图片添加 */
				background: url(images/4.jpg) center top repeat;	
				
			}
			
			#wrap{
				/* 2.设置盒子宽高居中 */
				width: 1090px;
				height: 500px;
				margin: 150px auto;
				border: 0px solid aliceblue;
				/* 9、超出部分设置隐藏 */
				overflow: hidden;
			}
			
			/* 9、设置li的父元素为120%这样每个li就不会因为快速滑动掉下来,因为li为float */
			#wrap ul{
				width: 120%;
			}
			#wrap ul li{
				/* 3、设置四个li的宽高样式 */
				list-style: none;
				/* 注意这里的宽度,手风琴嘛只留一点出来就好了 */
				width: 100px;
				height: 500px;
				/* 4、设置浮动,就变成一排了 */
				float: left;
			}
			
			/* 6、 */
			#wrap ul li .txt p{
				/*6.1 更改p的样式 */
				color: white;
				/* 注意这里的宽度正好就是手风琴的那一点,7.1文字排成一竖排就可以不用宽高了注释掉 换成padding ,只能管前三张所以引入7 */
				/* width: 100px; */
				/* height: 500px; */
				
				/* 7.1 padding左右的值可以在chrom开发者工具调试,看什么时候成一竖排 */
				padding: 10px 40px;
				/* 7.2之后的字体大小,字体,背景都可以移到txt中 */
			}
			
			/* 7、div class='txt'框好的p,把文字弄成一竖 */
			#wrap ul li .txt{
				
				/* 7.2 从6移过来设定的 */
				font-size: 14px;
				font-family: "microsoft yahei";
				/* 6.2的设定手风琴头部特定样式,最后一个值是透明度 */
				background: rgba(0,0,0,0.5);
				
				color: white;
				/* 7.3设定盒子宽高,这样第四张图的文字也出来啦 */
				width: 100px;
				height: 500px;
				/* 7.4 设置超出部分隐藏 */
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<ul>
				<!-- 6、在li中间加点文字p并改样式 -->
				<!-- 7、给p括个div,把文字弄成一竖 -->
				<li style="background-image: url(images/1.jpg);">
					<div class="txt">
						<p>T老曾III III III III在线奋斗史</p>
					</div>
					
				</li>
				<li style="background-image: url(images/2.jpg);">
					<div class="txt">
						<p>H老曾III III III III在线奋斗史</p>
					</div>
					
				</li>
				<li style="background-image: url(images/3.jpg);">
					<div class="txt">
						<p>R老曾III III III III在线奋斗史</p>
					</div>
					
				</li>
				<!-- 5、把最后一张图变为789px -->
				<li style="background-image: url(images/4.jpg); width: 789px;">
					<div class="txt">
						<p>EE老曾III III III III在线奋斗史</p>
					</div>
					
				</li>
			</ul>
		</div>
		<!-- 8、开始设置动态效果鼠标停在li上,图片宽度设置790px,其他100px -->
		<script type="text/javascript">
			$('#wrap ul li').hover(function(){
				$(this).stop().animate({
					width:"790px"
				},500).siblings().stop().animate({
					width:"100px"
				},500);
			});
		</script>
	</body>
</html>

附上:GitHub地址和图片:
手风琴HTML+CSS+JS(jQuery)实现——WEB(二)_第1张图片
欢迎评论区轰炸~

你可能感兴趣的:(web)