概述
经过大概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天里面有超过一半的时间都花在了这个上面,还是要继续努力的。
代码维护
减少重复代码!减少重复代码!减少重复代码!重要的事情说三遍,能封装就封装,不然后期维护能让你把泪哭干!