云渊结课小作品

最新推荐文章于 2024-07-06 17:55:28 发布

Don?t care me

最新推荐文章于 2024-07-06 17:55:28 发布

阅读量121

点赞数

分类专栏：笔记文章标签： html5 css

本文链接：https://blog.csdn.net/qq_45984813/article/details/108759893

版权

笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

前言

算是最后自己学了这有段时间的交代吧，直接冲冲冲！

banner 轮播图

插件swiper

首先swiper是专门做轮播图，所以我们先从官网中下载swiper.css文件下来并引用。

接着是官方的套式，可以根据需要自行更改。

HTML代码：
<div class="swiper-container">
			    <div class="swiper-wrapper">
			     <div class="swiper-slide"></div>
			        <div class="swiper-slide"></div>
					<div class="swiper-slide"></div>
					<div class="swiper-slide"></div>
					<div class="swiper-slide"></div>
					<div class="swiper-slide"></div>
					<div class="swiper-slide"></div>
					<div class="swiper-slide"></div>
					<div class="swiper-slide"></div>
					<div class="swiper-slide"></div>
					<div class="swiper-slide"></div>
					<div class="swiper-slide"></div>
					<div class="swiper-slide"></div>
					<div class="swiper-slide"></div>
					<div class="swiper-slide"></div>
					<div class="swiper-slide"></div>
					<div class="swiper-slide"></div>
				</div>
			    <!-- Add Pagination -->
			    <div class="swiper-pagination"></div>
			    <div class="swiper-button-next"></div>
			    <div class="swiper-button-prev"></div>
			</div>
			<div class="banner-nav-bg"></div>
JS代码：
<script type="text/javascript">
		/*轮播图部分*/
		var swiper = new Swiper('.swiper-container', {
		       pagination: '.swiper-pagination',
		      paginationClickable: true,
		       loop: true,
		       autoplay: 3000,
		
		        
		        speed: 1000,
		        prevButton: '.swiper-button-prev',
		        nextButton: '.swiper-button-next',
		        effect: 'fade',//  effect: 'flip',effect: 'coverflow',slide', 'fade',cube
		        grabCursor: true,
		        cube: {
		            shadow: false,
		            slideShadows: false,
		            shadowOffset: 20,
		            shadowScale: 0.94
		        }
		    });
		</script>

最后套用的我们JS代码进行图片的背景引入进行轮播，由于图片较多，则可用循环去完成。

<script type="text/jscript">
			var arr1 = document.querySelectorAll(".box-page");
			for(var i=0;i<arr1.length;i++){
				var divs= document.createElement("div");
				divs.style.cssText = "width: 154px;height:220px;margin-right:10px;float:left ;background-image:url(img/"+i+".jpg);";
				arr1[i].appendChild(divs);
			}
		</script>

在这里插入图片描述

剧场介绍

采用ul的标签进行设计，内嵌了一个小标题和主要内容，主要内容为插图和文字介绍。

HTML代码：
<li>
					<h3>名侦探柯南：计时引爆摩天楼</h3>
					<div class="subcon1">
						<div class="box-page"></div>
					    <div class="subtext">
					        <p>
								新一收到了来自世界知名建筑家——森谷教授于其宅邸举行的晚会的请帖。柯南、小兰和小五郎应邀出席。此即为事件的开端。此后发生了作为特殊火药的塑胶炸弹大量失窃的案件。那个自称凶手的男子打来预告电话，与柯南展开博弈。犯人再次向那里打电话。随后，凶手连续发来炸弹预告。城市陷入了恐慌。
							</p>
					   </div>
					</div>
				</li>
			
JS代码与上述一致，图片较于多，所以采用统一设置。

CSS代码：
大标题：#content h2{
	text-align: center;
	text-shadow:2px 2px #FF0000;
	font-size: 60px;
}
小标题：#content ul li h3{
	width: 354px;
	font-size: 26px;
	border: 2px solid #00925F;
	text-align: center;
	background-color: #66CCFF;
	padding: 10px 0;
}
文字的间距：
#content ul li .subtext p{
	letter-spacing: 1.2px;
}

大标题的设计为：字体设置为幻彩，居中且字体极大。
小标题的设计为：绿色边框、字体较大、标题离内边框有一定距离、蓝色背景。
整体内容水平居中，一行四个，浮动类型为向左。

精彩花絮

引用了一个小视频，采取最新的HTML5的方式进行引入。

HTML代码：
<div>
				<video id="myVideo" width="">
					<source src="video/1.mp4" controls="controls">
						浏览器不支持HTMl5：video
					</source>
				</video>
				<p><button onclick="playPause()">播放/暂停</button></p>
</div>
JS代码：
<script>
				var v=document.getElementById("myVideo");
				function playPause()
				{
					if(v.paused)
						v.play();
					else
						v.pause();
				}
</script>

主要内容也就是设计了一个视频的开关按钮，JS的这些函数功能还是很值得我们去学习的。主要需要扩展的就是多多熟练HTML5的这些很方便的代码。

可爱瞬间

表现形式为：当鼠标滑到图片附近时，图片开始一个接一个的出现在视野之中。

Bootstrap 插件

首先介绍一下这个插件，专门用来做网页上的各种框架，包括JS、CSS、HTML等等。例如网页的导航条，之前的JQuery着重介绍。

引入方式：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		
		<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
		<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
		
		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
		
HTML代码：
<div class="cute-page">
				<ul class="cute1">
					<div class="a1 fade"><img src="img/哀酱1.jpg" alt="..." class="img-circle "></div>
					<div class="a2 fade"><img src="img/哀酱2.jpg" alt="..." class="img-circle "></div>
					<div class="a3 fade"><img src="img/傲娇.jpg" alt="..." class="img-circle "></div>
					<div class="a4 fade"><img src="img/哈哈.jpg" alt="..." class="img-circle "></div>
					
				</ul>
				<ul class="cute2">
					<div class="a8 fade"><img src="img/苦艾酒1.jpg" alt="..." class="img-circle"></div>
					<div class="a7 fade"><img src="img/苦艾酒2.jpg" alt="..." class="img-circle"></div>
					<div class="a6 fade"><img src="img/唯美.jpg" alt="..." class="img-circle"></div>
					<div class="a5 fade"><img src="img/芜湖.jpg" alt="..." class="img-circle"></div>
					
				</ul>	
					<ul class="cute3">
						<div class="a11 fade"><img src="img/相爱.jpg" alt="..." class="img-circle"></div>
						<div class="a12 fade"><img src="img/小样.jpg" alt="..." class="img-circle"></div>
						<div class="a9 fade"><img src="img/黑影.jpg" alt="..." class="img-circle"></div>
						<div class="a10 fade"><img src="img/害羞.jpg" alt="..." class="img-circle"></div>
				</ul>								
</div>
采用的Bootstrap主要是设计图片为圆形图片。即class="img-circle"，这些都是已经设计好的，直接引用即可。

JS代码：
$(window).scroll(function(){
	var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
	//console.log(scrollT);
	var backTop1 = $(".cute1").offset().top - $(window).height()/2;
	var backTop2 = $(".cute2").offset().top - $(window).height()/3;
	var backTop3 = $(".cute3").offset().top - $(window).height()/6;
	//console.log(backTop);
	if(scrollT > backTop1){
		$(".a1").addClass("animated bounceInRight show").removeClass("fade");
		$(".a2").addClass("animated bounceInDown show").removeClass("fade");
		$(".a3").addClass("animated bounceInLeft show").removeClass("fade");
		$(".a4").addClass("animated bounceInUp show").removeClass("fade");
	}
	if(scrollT > backTop2){
		$(".a5").addClass("animated bounceInRight show").removeClass("fade");
		$(".a6").addClass("animated bounceInDown show").removeClass("fade");
		$(".a7").addClass("animated bounceInLeft show").removeClass("fade");
		$(".a8").addClass("animated bounceInUp show").removeClass("fade");
	}
	if(scrollT > backTop3){
		$(".a9").addClass("animated bounceInRight show").removeClass("fade");
		$(".a10").addClass("animated bounceInDown show").removeClass("fade");
		$(".a11").addClass("animated bounceInLeft show").removeClass("fade");
		$(".a12").addClass("animated bounceInUp show").removeClass("fade");
	}
});
CSS代码：
.fade{
	opacity: 0;
}

JS代码实现的功能是鼠标进入图片时图片浮现。采用的JQ语言去实现。
HTML中首先是分成三组图片，一组一组的显现出来，于是有了a1到12。
CSS设计了fade选择器，对图片进行显现的隐藏。等到鼠标滑到时对图片显现并浮现出来。
JS代码设计变量scrollT找到当前鼠标距离窗口的位置，再接着设计变量backTop1找到第一组图片距离顶端的位置并对其折半，避免电脑对鼠标所处位置太过敏锐，还没到图片位置就已经显现的状况。
紧接着当窗口位置到设置的backTop1变量附近时，对第一组图片添加样式：addClass(“animated bounceInRight show”)，意思为从右边飞出来；同时移除样式：removeClass(“fade”);对图片进行显现。此处使用的效果仍是Bootstrap中插件的效果，直接引用即可。

感悟

这次做的还是比较简单吧，算是把这段时间学的东西都用上了，怕之后忘，所以，加油吧！学了前端这么久，感觉真的麻烦的就是JS语言的各种各样的东西，有时候摸不着头脑。HTML和CSS让我感觉比较亲切，因为很多框架可以在插件中进行引用，难得仅在于你要通过学习去认识那些各种各样的属性，知道怎么用的，能用在哪里。