[例]字体改变,文章位置不变

2014-8-21 15:33:22

用手机看小说的时候发现它放大和缩小字体,当前看到哪一行,位置就还在这一行,不会像以前那样不知道被挤到哪里去了.

人性化的设计,模仿一下.

地址:http://1.ccforeverd.sinaapp.com/blog/example/example2014-8-21.html

    function setSize(){

        var lastTop=box.scrollTop;
        var lastHeight=box.scrollHeight;

        // console.log(lastTop,lastHeight,size); // 永远都是500

        var a=(boxHeight*see+lastTop)/lastHeight; // 比例

        box.style.fontSize=size+"px";

        var newTop=0;
        var newHeight=box.scrollHeight;

        newTop=a*newHeight - boxHeight*see;

        box.scrollTop=Math.round(newTop);
    };

我是根据滚动位置前后变化高度比例相同来计算的,如果内容里有多余的高度,就需要把它去掉.

里面的 var see=0.4; // 焦点位置(距上方40%) 是假设当前你所关注的位置,是距离页面顶部40%的位置处,其实人不同,关注的位置也会不同,可以修改.