孟郎诗词网1.0版本前端部分总结

概述

经过大概13天的努力，孟郎诗词网在大年初一顺利开放，今天也已经开放有一段时间了，在建立网站的过程中还是遇到了很多问题的，在此总结一下，以便以后对网站进行重制的时候能够有所借鉴，提高开发效率。

导航部分

整体效果：

整体难度不是很大，为了适应不同尺寸电脑，我对导航文字之间的文字用js进行了定量处理：

//头部布局var topLink = document.getElementById("top_link");var topW = 0;topW = topLink.offsetWidth;var topLinkArr = topLink.children;var topLinkW = topLinkArr[1].offsetWidth;for(var topI=0 ; topI<topLinkArr.length ; topI++){topLinkArr[topI].style.marginLeft = (topW - 7*topLinkW)/7 + "px";}

但是对于手机是完全不兼容的，由于文字大小等问题，用手机访问会出现文字挤到一起的现象，这个问题暂时还没有解决，但是是有解决方案的，就是通过媒体查询，将导航变成竖直排列的方式，用一个菜单键实现。

吸顶部分

吸顶的是两个灯笼，原理就是通过定位来实现：

 <script>var fix = document.getElementById("newyear");var overHeight = top.offsetHeight;window.onscroll = function () {var current = scroll().top;if(current >= 220){fix.style.position = "fixed";//改变定位属性fix.style.left = "0";fix.style.top = "-130px";}else{fix.style.position = "relative";fix.style.left = "";fix.style.top = "";}}</script>

问题倒是没有什么，十分简单。

轮播图部分

轮播图是最难的一部分，同时也是最核心的一部分，代码量也是十分大的，出现的问题主要有一下几个：

1.轮播混乱问题

我是使用jquery的动画模块来实现动画的，由于没有学的太细，就出现了一个问题，当离开页面一段时间，再次回到页面，会出现轮播图混乱的现象，而且代码运行没有问题，原因就是，在你离开页面之后，代码依旧执行，但是动画会暂停执行，当你再次回到页面时，之前未执行的动画会执行，就会出现轮播混乱的现象。

解决方案：在animate前加stop（true，true）

 $('#roll-content').children('.picSelect').stop(true,true).animate({left:'1920px'},1000);

2.火狐浏览器兼容问题

中间那个播放键的实现是通过window.open()实现的，播放键我之前加了a标签，但是通过监听点击来操作window.open，本以为a标签不会产生任何影响，但是在火狐浏览器会发生a标签干扰的问题，直接把a标签删除掉就可以了，为了出现小手，可通过css实现：

.roll .player{height: 227px;position: absolute;z-index: 99;left: 50%;margin-left: -138.5px;top:50%;margin-top: -138.5px;opacity: 0;transition-property: opacity;transition: all 1s;cursor: pointer;/*小手*/
}

3.轮播图完整js代码

<script>//获取事件var toLeft = document.getElementById('to_left');var toRight = document.getElementById('to_right');var roll = document.getElementById('roll');var rollContent = document.getElementById('roll-content');var circle = document.getElementById("circle");var c = circle.children;var player = document.getElementById("player");var pic = rollContent.children;var iNow = 0;pic[iNow].className = 'picSelect';//箭头消失$("#to_left").fadeOut();$("#to_right").fadeOut();//让滚动内容归位for(var i=1;i<pic.length;i++){pic[i].style.left = "1920px";pic[i].style.marginLeft = '0';}//监听点击//1.向左toLeft.onclick = function () {/*1.当前可视区域的图片快速右移;2.上一张图片快速出现在可视区域的左边3.让这张图片做动画进入*/c[iNow].className = '';//更改圆点$('#roll-content').children('.picSelect').stop(true,true).animate({left:'1920px'},1000);pic[iNow].className = '';iNow--;//判断if(iNow<0) iNow=pic.length-1;c[iNow].className = "current";//更改圆点pic[iNow].style.left = '-1920px';pic[iNow].className = 'picSelect';$('#roll-content').children('.picSelect').stop(true,true).animate({left:'0'},1000);}//2.向右toRight.onclick = function () {/*1.当前可视区域的图片快速右移;2.上一张图片快速出现在可视区域的左边3.让这张图片做动画进入*/atuoPlay();};var timer_L = null;//自动轮播clearInterval(timer_L);timer_L = setInterval(atuoPlay,5000);//鼠标进入roll.onmouseover = function () {clearInterval(timer_L);$("#to_left").fadeIn();$("#to_right").fadeIn();};//内容rollContent.onmouseover = function(){$("#roll-content").fadeTo("fast",0.5);$("#player").fadeTo("fast",0.8);};//播放player.onmouseover = function(){$("#roll-content").fadeTo("fast",0.5);$("#player").fadeTo("fast",0.8);};//鼠标离开roll.onmouseout = function () {clearInterval(timer_L);timer_L = setInterval(atuoPlay,3000);$("#to_left").fadeOut();$("#to_right").fadeOut();};rollContent.onmouseout =function () {$("#roll-content").fadeTo("fast",1);$("#player").fadeTo("fast",0);};//自动播放函数function atuoPlay() {var temp = iNow;c[iNow].className = '';//更改圆点//console.log(iNow);$('#roll-content').children('.picSelect').stop(true,true).animate({left:'-1920px'},1000);pic[iNow].className = '';iNow++;//判断if(iNow >= pic.length) iNow=0;c[iNow].className = "current";//更改圆点pic[iNow].style.left = '1920px';pic[iNow].className = 'picSelect';$('#roll-content').children('.picSelect').animate({left:'0'},1000);}var lastOne = 0;//圆点更改轮播图for(var i=0; i<c.length ; i++){(function (index) {c[index].onclick = function () {// 清除c[lastOne].className = "";// 设置this.className = "current";// 赋值lastOne = index;if(index > iNow){var temp = iNow;c[iNow].className = '';//更改圆点//console.log(iNow);$('#roll-content').children('.picSelect').animate({left:'-1920px'},1000);pic[iNow].className = '';iNow  = index;c[iNow].className = "current";//更改圆点pic[iNow].style.left = '1920px';pic[iNow].className = 'picSelect';$('#roll-content').children('.picSelect').animate({left:'0'},1000);}if(index < iNow){var temp = iNow;c[iNow].className = '';//更改圆点$('#roll-content').children('.picSelect').animate({left:'1920px'},1000);pic[iNow].className = '';iNow = index;c[iNow].className = "current";//更改圆点pic[iNow].style.left = '-1920px';pic[iNow].className = 'picSelect';$('#roll-content').children('.picSelect').animate({left:'0'},1000);}}})(i);}//跳转var rollClick = document.getElementById("player");rollClick.onclick = function () {if(iNow === 0 || iNow === 3)window.open("https://www.bilibili.com/video/av42498758");else if(iNow === 1)window.open("https://www.bilibili.com/video/av42005339");else if(iNow === 2)window.open("https://www.bilibili.com/video/av42005554")};</script>

4.轮播图尺寸调整代码

 //轮播图尺寸控制var roll = document.getElementById("roll");var rollContent = document.getElementById("roll-content");var rollH = rollContent.children[0].offsetHeight;roll.style.height = rollH + "px";

中间布局

1.祥云位置调整

由于尺寸问题，我将祥云的位置设置为动态调整：

//祥云布局var leftCould = document.getElementsByClassName("left_could");console.log(leftCould);var rightCould = document.getElementsByClassName("right_could");var titleHot = document.getElementById("content_title");var leftCW = leftCould[0].offsetWidth;console.log(leftCW);var rightCW = rightCould[0].offsetWidth;console.log(rightCW);var titleW = titleHot.offsetWidth;console.log(titleW);for(var couldI=0; couldI<leftCould.length;couldI++)leftCould[couldI].style.marginLeft = -(leftCW/2 + titleW) +"px";for(couldI=0; couldI<leftCould.length;couldI++)rightCould[couldI].style.marginRight = -(rightCW/2 + titleW) +"px";

原理就是通过标题文字占的宽度来调整位置，之前用的是h标签，但是h标签是占一整行的，所以改成了p标签。

2.热门推荐部分布局

在这里出现的问题就是js代码执行与浏览器渲染的先后问题，由于对这个了解的不是很深，导致出现布局混乱的问题，先看一下布局调整的代码：

 //布局热门推荐var hot = document.getElementById("hot_content");var hotChildren = hot.children;var hotChildrenHeight = hotChildren[0].offsetHeight;hot.style.height = 2*hotChildrenHeight + 30 + "px";//alert("执行");for(var hoti= 0; hoti<hotChildren.length; hoti++){if(hoti<3)hotChildren[hoti].style.left = hoti*34 + "%";else{console.log(hotChildrenHeight);hotChildren[hoti].style.top = hotChildrenHeight + 15 +"px";hotChildren[hoti].style.left = (hoti-3)*34 + "%";}}

这个是通过获取hotChildren的高度来实现动态调整他们的位置，之前这段代码没有写在window.onload里面，导致获取的高度有问题，因为在执行这段代码的时候css还没有来得及渲染，所以就乱了，所以，调整布局的代码，一般要放在window.onload里面。

返回顶部

完整代码：

<script>var goto = document.getElementById("goto");var call = document.getElementById("call");var like = document.getElementById("like");var gotoTop = document.getElementById("goto_top");var weChat = document.getElementById("weChat");var meng = document.getElementById("meng");$("#goto").fadeOut("fast");//显示，隐藏$(window).scroll(function(){var scrollTopGoto = scroll().top;if(scrollTopGoto > 0){$("#goto").fadeIn("fast");}else{$("#goto").fadeOut("fast");}});//返回顶部gotoTop.onclick = function () {var endGoto = 0;var beginGoto = scroll().top;var timerScroll = null;clearInterval(timerScroll);timerScroll = setInterval(function () {beginGoto = parseInt(beginGoto);if(beginGoto === endGoto)clearInterval(timerScroll);beginGoto =  beginGoto - (beginGoto-endGoto)*0.09;window.scrollTo(0,beginGoto);},20);};gotoTop.onmouseover = function () {gotoTop.style.background = "#C8C8C8";gotoTop.innerHTML = "返回顶部";gotoTop.style.cursor = "pointer";};gotoTop.onmouseout = function () {gotoTop.style.background = "azure";gotoTop.innerHTML = "<img src=\"images/pic/返回顶部.png\">";};//联系我们call.onmouseover = function () {call.style.background = "#C8C8C8";call.innerHTML = "联系我们";call.style.cursor = "pointer";meng.style.display = "block";};call.onmouseout = function () {call.style.background = "azure";call.innerHTML = "<img src=\"images/pic/客服.png\">";meng.style.display = "none";};//关注我们like.onmouseover = function () {like.style.background = "#C8C8C8";like.innerHTML = "关注我们";like.style.cursor = "pointer";weChat.style.display = "block";};like.onmouseout = function () {like.style.background = "azure";like.innerHTML = "<img src=\"images/pic/扫一扫.png\">";weChat.style.display = "none";};</script>

加载页面

css代码（注意特殊居中方式）：

/*加载样式*/
.loading{position: fixed;z-index: 2147483647;width: 100%;background: #f0a1a8;background-image: url("../images/pic/texture.png");top: 0;left: 0;
}
.loading .loading-left{position: absolute;left: 8%;bottom: 2%;height: 80%;
}
.loading .loading-right{position: absolute;right: 8%;bottom: 2%;height: 80%;
}
.loading .loading-img{width: 30%;position: absolute;left: 0;right: 0;top:0;bottom: 0;margin: auto auto;animation-name: spin;animation-timing-function: linear;animation-duration: 2s;animation-iteration-count: infinite;
}
@keyframes spin {from{transform: rotateZ(0deg);}to{transform: rotateZ(-360deg);}
}
.loading .loading-font{width: 15%;position: absolute;/*居中*/left: 0;right: 0;top:0;bottom: 0;margin: auto auto;/*transform: translateY(-50%);*/
}
.loading .left-flower{position: absolute;left: 0;top: 0;
}
.loading .right-flower{position: absolute;right: 0;top: 0;
}

图片处理

由于我的服务器是1M带宽的，访问速度也就100多K，所以图片必须经过压缩，不然加载速度能慢到你怀疑人生，ps提供了这样的功能，如果不是透明图片，那么一定要用jpg格式的图片，透明图片统一同png-24，png-8往往会掉色，为了降低图片大小，降低分辨率（图片尺寸）是很重要的一个手段，说实话自己ps技术确实是菜，毕竟不是设计师，技术上要差很多，13天里面有超过一半的时间都花在了这个上面，还是要继续努力的。

代码维护

减少重复代码！减少重复代码！减少重复代码！重要的事情说三遍，能封装就封装，不然后期维护能让你把泪哭干！