12306余票查询(五)——网页模板制作

虽然各位大佬把查询信息打印在终端是很酷,但是个人觉得制作成网页,可以添加更多的样式和更多的操作.但是会增加一个网页与pyhton的交互问题,本节只讲网页制作

简单到简陋的网页布局,只是为了更好的展示余票信息,
都是照着12306的写的,非常简单实用

这里还需要实现标题置顶后悬浮的效果
思路就是监听页面滚动,当滚动位置大于标题的top值时,改变标题的布局为fixed
即

position: fixed;
top: 0px;
left: 50%;
margin-top: 0px;
margin-left: -500px;

当滚动位置大于标题的top值时,再改回来,非常简单的一个小功能
用的jquery实现

 // 设置悬浮效果
        var info_head_top = $("#info_head").offset().top;
        $(document).scroll(function(){
            var scrtop = $(this).scrollTop()
            if(scrtop>info_head_top){
                $("#info_head").removeClass("not_float").addClass("float");
                $("#back").show();
            }
            else{
                $("#info_head").removeClass("float").addClass("not_float");
                $("#back").hide();
            }
        });

为什么这里会有个back会参与到这个动作当中呢,因为设置标题positon:fixed
会让元素悬浮,不占位置,那后面的余票内容会出现跳上去的现象,所以,给标题加个影子,当标题元素浮起时,影子show(),标题落下时,影子hide().解决了余票内容跳动的情况

<div class="标题不悬浮时应用的类名" style="display:none" id="back"></div>          # 影子元素

这节都是前端知识,暂时不贴代码,有需要代码的小伙伴在评论区跟我说下