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

其他 2019-03-04 02:56:20 阅读次数: 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天里面有超过一半的时间都花在了这个上面，还是要继续努力的。

代码维护

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

猜你喜欢

转载自blog.csdn.net/mengxianglong123/article/details/87935353
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022