2018暑期答辩作品——Andy书屋

还是先来一个总结吧，在这个暑假学到的最重要的一点就是做一个作品之前一定要先有一个自己的清楚地构思，把每部分要做什么，做成什么样子想好，并画出一个草图。因为一个作品不是一会儿就可以完成的，而你的记忆力也一定不会那么好。前提工作做好了，后面就会做的很快，不至于每个部分磨磨蹭蹭很久还不知道做什么合适，或许这就是一个全局思想吧（哈哈，偷笑一下，不喜欢太正经了）。然后再去完善每个部分，当然，这里也有很重要的一点，就是布局一定要明了，包括css样式也要分块清除，这样在完善的时候也会省去很多麻烦。好了，来看一下我的丑丑的书屋吧（比较正经老套的书屋）。

一：主题思想

虽然我比较喜欢读书，但对做网站真没多大的创意，主要还是参考的当当网、有路网等一些二手网站。我选择的主题是绿色，是感觉像草原一样，辽阔宁静致远，但效果好像并不是这样，不过想法还是不错，所以也就没有更改。

二：要点介绍

我主要介绍5部分，分别是3D导航栏、隐藏菜单、热销榜（onmouseover事件）、标签页和轮播图、固定顶部及滚动监听。

• 1.3D旋转导航栏

3D导航栏看起来比较复杂，其实就只用了css动画来实现的，然后就是需要在html中添加翻转后的部分，我想或许可以利用这个方法做一个更加绚丽的旋转动画。下面就简单看一下代码吧。

<ul class="nav1_mid">
	<li style="padding-left: 0px;"><a href="#" class="pc action">首页
		<span class="line"><span class="front">首页</span><span class="back">首页</span></span>
	</a></li>
	<li><a href="#" class="pc">新书
		<span class="line"><span class="front">新书</span><span class="back">新书</span></span>
	</a></li>
	<li><a href="#" class="pc">旧书
		<span class="line"><span class="front">旧书</span><span class="back">旧书</span></span>
	</a></li>
	<li><a href="#" class="pc">电子书
		<span class="line"><span class="front">电子书</span><span class="back">电子书</span></span>
	</a></li>
	<li><a href="sale.html" class="pc">出售
		<span class="line"><span class="front">出售</span><span class="back">出售</span></span>
	</a></li>
</ul>

这里面的.line以及.front，.back就是翻转后的内容，需要包含在原本的.pc里面，实现更好的翻转效果。关于css的简单解释在代码里标有。 

.nav1_mid{
	display: block;
	width: 1200px;
	margin: 0 auto;
	background: #70ae73;
}
.nav1_mid>li{
	display: inline-block;
	box-sizing: border-box;
	border-right: 1px solid #94c0be;
}
.nav1_mid li a{
	display: block;
	color: #fff;
	overflow: visible;
	font-weight: 800;
	padding: 15px 30px;
	text-align: center;
}
/*以上设置的是关于导航栏普通的样式，还未涉及翻转*/
.pc{
	perspective: 200px;
	-moz-perspective: 200px;
	transition: all 0.1s linear;
	-moz-transition: all 0.1s linear;
	position: relative;
}
/*动画效果*/
.line{
	-moz-transition:all 0.3s ease;
	transition:all 0.3s ease;
	transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform: translateZ(-25px);
	-moz-transform: translateZ(-25px);
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
}
/*这里就开始设置翻转的效果了，运用的就是3D动画里的translate*/
.front{
	transform: rotateX(0deg) translateZ(25px);
	-moz-transform: rotateX(0deg) translateZ(25px);
}
.back{
	transform: rotateX(-90deg) translateZ(25px);
	-moz-transform: rotateX(-90deg) translateZ(25px);
	color: #FFE7c4;
}
.front, .back {
	display: block;
	width: 100%;height: 100%;
	position: absolute;
	top: 0;left: 0;
	background: #70ae73;
	padding: 15px 30px;
	color: #fff;
	box-sizing: border-box;	
}
.pc:hover .line,.pc:focus .line{
	transform: translateZ(-25px) rotateX(90deg);
	-moz-transform: translateZ(-25px) rotateX(90deg);
}
/*开始翻转了，注意，翻转的是.line，而不是.front和.back*/
.nav1_mid li .action .front,
.nav1_mid li a:hover .front,
.nav1_mid li a:hover .back{
	background-color: #44a556;
	background-size: 5px 5px;
	background-position: 0 0, 30px 30px;
	background-image: linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
}
/*这部分设置的是.front、.back、.active的效果，利用linear-gradient设置了一个蜂巢背景*/

• 2.隐藏菜单

这个也是用css来做的，他的麻烦之处在于定位问题以及一些小细节，这些做起来是很浪费时间的，但可以帮助你更好的理解定位。我附一张图来解释一下，代码比较简单不再附属了。

展开部分就是使用的:hover，它与左边小方框是在一个大盒子里的，这样当鼠标移上去的时候能够实现扩展部分能够出现，而对于扩展部分的位置，就是需要在大盒子里加上position:relative，扩展部分加上position:absolute，这样更好的控制位置的移动。我做的时候遇到比较麻烦的一点就是当扩展部分出现时小方框的右边边框是没有的，而这个边框又是整个“图书分类”的边框，对其单独设置边框又无法与其重合。后来就想到可以用选择器:before来实现，但一个致命的问题又来了，每个小框框的高度都是不一样的，你如何设置高度呢？对，是的，这时候你就要单独的给每个方框设置高度了，然后就可以用height:inherit来实现了，至于宽度和位置那就需要自己来调试了。

• 3.热销榜（onmouseover事件）

这个热销榜也是困惑了我好长时间，不知道是如何来控制鼠标事件的（鼠标移到不同部分时可以其内容会改变，而当鼠标移走时，该部分保持改变后的内容，:hover显然是实现不了的），然而当你理解了onmouseover和onmouseout事件之后，就会发现是如此之简单。

js代码，关于html和css代码就不再添加了。

var day1=document.getElementById("day1"),
        /*day1为整个大盒子的id*/
    oUl=day1.getElementsByTagName("ul")[0],
        /*每一个图书的是用ul，li来排列的*/
    oLis=oUl.getElementsByTagName("li"),
    oDivs=day1.getElementsByTagName("div"),
        /*div是带有图片的部分*/
    oSpn=day1.getElementsByTagName("p");
        /*p是没有图片的部分*/
for(var i=0,len=oLis.length;i<len;i++){
    oLis[i].index=i;
    oLis[i].onmouseover=function() {
        for(var n=0;n<len;n++){
            oSpn[n].className="";
            oDivs[n].className="hide";
        }
        this.className="on";
        oDivs[this.index].className="long";
            /*long是带有display:block的*/
        oSpn[this.index].className="hide"
            /*hide是带有display:none的*/;
    }
};

 

• 4.标签页/轮播图

标签页其实就是利用bootstrap来做的，bootstrap里定义的一些标签属性还是很好用的，不需要添加什么样式就可以简单地实现那些看起来很复杂的效果，就比如说标签页和轮播图（js的轮播图上一篇有介绍这里就不再细说了）。这里我附上一张图片说明一下，因为分页的设置根本就不需要添加css和js的。

标签页部分代码

轮播图部分代码 

• 5.固定顶部及滚动监听

这个也是让我想了很久甚至想要放弃的，因为若是从开始就在顶部固定还好，可是这个需要当页面滑到他的时候，他才固定在顶部，这就让我有点不知道怎么实现，后来查了很多，发现用$(window).scrollTop()是可以做的，就拿来用了。代码还是很容易理解的。所以我就只加图了哦。

滚动监听可以在菜鸟教程里了解更多，我就不再解释了。链接：http://www.runoob.com/bootstrap/bootstrap-scrollspy-plugin.html

三：暑期感想

暑假的时候可能太放松了，在家里没有做网页，也没有复习，很多东西都忘记了，而来了之后也是比较放松的，以至于做的很慢，加上没有什么好的想法就做的很粗。我觉得吧，要培养自己的兴趣，而不是把这个看成一个任务，有时候自己想到一个好的想法的时候就可以去做，随意做，可以加强自己的记忆力，也可以更好地掌握。可能会很难吧，但我想要运用到生活中，至少做一个自己想要做的内容，嘿嘿，还可以纪念一下呢！

再有就是时间要有一个规划，虽然可以不安排的那么紧张，但一定在一定的时间做好一定的事情，不然会一拖再拖，然后，一定要把自己要做的事情列出来，我再也不会相信你的七秒钟记忆了！