码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2014-08-21 16:51:04      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   for   ar   2014   

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%的位置处,其实人不同,关注的位置也会不同,可以修改.

[例]字体改变,文章位置不变,布布扣,bubuko.com

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

标签:style   blog   http   color   io   for   ar   2014   

原文地址:http://www.cnblogs.com/ccforeverd/p/3927357.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!