增加前端页面控制逻辑(创新实训日志八)

1.光标相对于当前顶部位置的确定

当前，我们模型计算出光标的x和y都是分别占body元素的宽度和高度的比例，但当时的环境是body元素的宽度和高度都是固定的与屏幕大小相等的，在实际环境中却包含了页面的上下移动，因此必须要重新修改计算公式，来计算出真正的光标的x和y。

原来的代码：

cursor.left = prediction[0] * ($('body').width() - $('#target').outerWidth());
cursor.top = prediction[1] * ($('body').height() - $('#target').outerWidth());

对应公式：

x坐标=宽度比例*(body宽度-光标大小)

y坐标=高度比例*(body高度-光标大小)

修改之后的公式：

x坐标=宽度比例*(body宽度-光标大小)

y坐标=高度比例*(屏幕高度-光标大小)+滑动距离

所以需要获取到屏幕高度和滑动距离。

通过相关资料的查询，使用JQuery获取滑动距离只需要一行代码就可以实现：

$(window).scrollTop()

而屏幕高度也只需要一行代码就可以获取,这里使用的是可视区域的高度：

$(window).height()

因此可以修改成如下代码即可：

cursor.left = prediction[0] * ($('body').width() - $('#target').outerWidth());
cursor.top = prediction[1] * ($(window).height() - $('#target').outerWidth()) + $(window).scrollTop();

但是有一点需要注意，那就是获取当前光标指向的元素时，需要减去滑动距离，因为元素的横纵坐标是相对于可视界面的左上角来表达的：

var ele = document.elementFromPoint(cursor.left,cursor.top - $(window).scrollTop());    //获取元素

效果如图：

2.JQuery控制页面滚动

控制页面滚动的方法其实方法很简单，设置一下body的srcollTop值就可以了，之前用了animate方法，结果巨抖。。。

$(selector).scrollTop(offset)

scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。

scroll top offset 指的是滚动条相对于其顶部的偏移。

有了API的用法之后，就可以编写具体逻辑了，目前的逻辑是：

如果当前的坐标位于可视区域的上20%的区域内，则进行向上滚动，如果位于下20%的区域内，就向下滚动。

根据这个逻辑可以写出以下代码：

if(cursor.top > $(window).height()*0.80 + $(window).scrollTop()){	//向下滚动
        console.log("down");
        var temp=$('html,body').scrollTop()
        $('html,body').scrollTop(temp+30)
        if(curElement != null){ //如果有元素在计时
                curElement.style.background = oriColor; //恢复原来的颜色
                curElement = null;  //清空当前元素
                clearInterval(openClock);   //清除历史计时器
             }
        return ;
    }
    if(cursor.top < $(window).height()*0.20 + $(window).scrollTop()){	//向上滚动
        console.log('up')
        var temp=$('html,body').scrollTop()
        $('html,body').scrollTop(temp-30)
        if(curElement != null){ //如果有元素在计时
                curElement.style.background = oriColor; //恢复原来的颜色
                curElement = null;  //清空当前元素
                clearInterval(openClock);   //清除历史计时器
             }
        return ;
    }

动态效果图片不好看出来，但效果大概就是当眼睛看向下方的时候页面会向下滚动，当看向上方的时候则向上滚动。

3.到达页面底部时加载更多文章标题

首先需要完成一个向后台请求下一页文章数据的方法：

/**
 * 得到下一页文章列表
 * @param lastId
 */
function getNextPage(lastId){
    //alert(lastId)
    $.post('http://localhost:8082/article/list',{'lastId':lastId},putArt);
}

这里putArt是具体的页面填充逻辑，具体逻辑根据自己页面的情况完成即可，但是这里我保存了一个全局变量curLastId，用来记录当前最后一篇文章的id，这样便于向后台获取该id之后的一页(目前是18条)文章标题列表，当没有更多文章的时候，我将这个值设置为-1，让前端知道即使到达了页面的底部也不要再请求更多数据了。

接下来需要判断是否到达了页面底部，具体的逻辑写在了向下滚动页面的逻辑内部：

//已经滚动到上面的页面高度
var scrollTop = $(this).scrollTop();
//页面高度
var scrollHeight = $(document).height();
//浏览器窗口高度
var windowHeight = $(this).height();
//此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
if (scrollTop + windowHeight == scrollHeight) {
	if(window.curLastId == -1){
    	;   //没有更多文章，什么都不需要做
    }else{
    	getNextPage(window.curLastId); //获取下一页的数据
    }
}