新的着陆页,以及无限滚动的一种实现方式

新的着陆页

自之前那个 Typecho 博客爆炸之后,我转战 Hexo 启动了这个博客。由于域名解析的问题,博客域名迁到了 blog.imalan.cn,主域名 imalan.cn 空了出来。本来是直接做了一个 301 跳转,但是觉得有些可惜,而且我腾讯云的主机也没有到期,所以就干脆做一个着陆页放在上面吧。网址是:一只熊猫 - 不急,慢慢来,电脑端的效果见文章首图,更多的页面如下:

landing2

3landing-

我自己不是做前端的,所以不是很懂网页设计。以前也自己写一些简单的静态页面,但是总是执着于背景图、浮动元素之类花哨的东西,技术也达不到,做出来的页面也许自己喜欢,但其实一点也不大气。这次干脆就用最简单的黑白和最简单的布局来做一个静态页面。

在电脑端,一页就是一屏。除了第一页是自己的导航信息之外其他页面都是从一言获取的数据,可以无限滚动,到底了自动加载新的内容。

我个人还是很喜欢这个页面的,特别是在大屏电脑端的效果。页面因为非常简单,没有什么技术上的问题,不过为了实现无限滚动我还是动了一番脑筋。我的目标是页面到底了就加载新的数据,并且每一页都有一个向下的箭头按钮点击就可以滚动到下一页。那么只要先在页面初次载入时加载足够的元素(超过一屏),然后在滚动事件里检测是否到底,到底了用 Ajax 请求新的数据添加 DOM。每个新的 DOM 都要有自己的 id,方便跳转。那么把 HTML 结构和 JS 放在这里吧,页面引用了 JQuery 库,平滑滚动使用了 scrollTo.js 插件。

HTML

<!DOCTYPE html>
<html>
<head>
    <script src="……/jquery.min.js"></script>
    <script src="……/jquery.scrollTo.min.js"></script>
    <script src="js.js"></script>
</head>
<body>
    <header>
        ……
    </header>
    <footer>
        ……
    </footer>
</body>
</html>

为了简单起见,省去了部分内容。

JS

var nHitokoto=0; // 当前页面上的子块数量
function loadHitokoto(index){ // 在 footer 前插入新的 DOM,id 为 hitokoto_index
    var html=`<div id="hitokoto_`+String(index)+`">
    ……
    <p onclick="jumpToHitokoto(`+String(index+1)+`)">下一页</p>
    </div>`;
    $("footer").before(html);
    nHitokoto = nHitokoto + 1;
    $.ajax({
        type: 'Get',
        cache: false,
        url: 'https://v1.hitokoto.cn/?encode=json&c=a&'+String(Math.random()),
        success: function(data) {
            ……
        }
    });
}
function jumpToHitokoto(index){ // 跳转到某个id,如果不存在就先创建新的子块再跳转
    if($("#hitokoto_"+String(index)).length){
        $.scrollTo("#hitokoto_"+String(index),200);
    }
    else{
        loadHitokoto(index);
        $.scrollTo("#hitokoto_"+String(index),200);
    }
}
$(document).ready(function(){ // 页面初次加载时创建足够多的子块(超过一屏)
    for (let index = 0; index < 4; index++) 
        loadHitokoto(index);
})
$(window).scroll(function(){ // 检测是否滚动到底,到底了就加载新的数据
    var h=$("footer").offset().top;
    var c = $(document).scrollTop();
    var wh = $(window).height();  
    if (Math.ceil(wh+c)>=h){
        loadHitokoto(nHitokoto);
    }
})

其中有技术含量的只有判断页面是否到底这个函数。由于我的 footer 总是在最底部,只要判断 footer 是否出现在屏幕上就好。放张示意图就一目了然了:

illu_scroll_to_bottom_1


一句题外话:发现了一个不错的灯箱插件:Colorbox

更新

现在我已经禁止了所有的滚动事件,只能通过点击按钮来上下翻页。

因为实际上这个页面是以页为单位的,设置成无限滚动倒是显得不合理了。而且我很喜欢一整个页面全黑背景或者全白的感觉,很舒服。涉及到禁止滚动事件,在桌面端只需要设置 overflow: hidden 就好,但是移动端,特别是 Safari 我找了好几个办法,最终发现在 body 标签上加上 ontouchmove="event.preventDefault()" 就好。

Tags:none
上一篇
打赏
下一篇

添加新评论

已有 20 条评论

 mikusa 2 个月前 • |

我想…

 熊猫小A 2 个月前 • |
@mikusa

不要想 就是干 #(鼓掌)

 熊猫小A 2 个月前 • |
@mikusa

我上面那一条回复被 Gmail 判成垃圾邮件,给我退回来了 #(吐血倒地)

 柠檬酸 2 个月前 • |

好久没来逛拉,新版的引导页点了半天才发现是一言。
哈哈哈,很有创意哦!

 熊猫小A 2 个月前 • |
@柠檬酸

稀客~
引导页现在看起来有一点 naive 哈哈

 野兔 2 个月前 • |

羡慕大佬,能做出这么漂亮的页面。

 熊猫小A 2 个月前 • |
@野兔

大佬又在商业吹捧#(鼓掌) ,我就默默看你 Unity 玩得风生水起#(高兴)

 star 2 个月前 • |

主题非常好看,好喜欢着陆页的台词。提一个小建议,稍微有一点慢,嘿嘿

 熊猫小A 2 个月前 • |
@star

是网页加载速度吗?可能是服务器带宽太小了……

 沉默是金 2 个月前 • |

你的这个hexo搭建的blog比我的漂亮多了,我的就比较简单的。前端只会一些基础,没心思搞。以后深入学习以后了再自己修改主题吧

 熊猫小A 2 个月前 • |
@沉默是金

哈哈谢谢夸奖,你那边自己造轮子我真的佩服~
我也不懂前端,都是依葫芦画瓢的