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

滚动条,浏览器窗口,相关

时间:2016-08-24 01:00:15      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:

http://blog.csdn.net/fswan/article/details/17238933

http://blog.csdn.net/lanse_my/article/details/12339411

http://www.cnblogs.com/wang726zq/archive/2012/05/10/2494256.html

技术分享


网上可以找到很多解释,都大差不差吧。

记录下几个小例子。

1.回到顶部


 

function backTop() {var btn = $("#id");//获取按钮对象
    var oTop = $(window).scrollTop();
    var a = document.body.scrollTop;
    var b = document.documentElement.scrollTop; //ie
    var timer = null;//定义timer
    var isTop = true;//控制变量

    window.onscroll = function() {//这里是滚动条触发后,进行的操作函数,这里的作用是,setinterval执行后,滚动条滚动,如果你用鼠标再次让这个事件触发,就会关闭定时器。也就是滚动条停止滚动

        if (!isTop) {
            clearInterval(timer)
        }
        isTop = false;
    }

    btn.click(function() {//点击按钮触发,思路就是,用setInterval函数,定义30毫秒进行一次更改滚动条位置的操作
        clearInterval(timer);
        timer = setInterval(function() {
            var a = $(window).scrollTop();//每30毫秒进行一次取值
            var speed = Math.floor(-a / 20);//设置每次执行函数的speed值,为当前滚动条距离顶部高度除20,因为向上移动,设置为负值加-号
            isTop = true;
            $(window).scrollTop(a + speed);
            if (a == 0) {//关闭定时函数
                clearInterval(timer);
            }
        }, 30)
    })
}

 

 

2.设置DIV的left属性随着,浏览器窗口大小进行改变

 

function rSize() {
    var c = $(document.body).width(),
        d = ((c - 1210) / 2) - 30;//取值,c为窗口宽度,d就是div对象根据窗口宽度改变,而改变的left值
    $("#div").animate({//操作当前页面的div的left值
        left: d
    }, 30)

    $(window).resize(function() {//当窗口大小改变时,触发的函数
        var a = $(document.body).width(),
            b = ((a - 1210) / 2) - 30;
        $("#div").animate({//窗口改变大小时的div的left值
            left: b
        }, 30)
    })

 

就先写这2个例子吧,其实主要的还是思路,首先你要取得页面窗口宽高值,滚动条的宽高位置的值。

然后根据窗口或者滚动条的触发函数,进行对象操作。

或者根据滚动条窗口的位置,进行if判断再执行一些操作。

 

滚动条,浏览器窗口,相关

标签:

原文地址:http://www.cnblogs.com/aixiao044/p/5801325.html

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