常用的代码片段

1、随滚动条滚动

var oDiv = document.getElementById("box");
        oDiv.style.top = (document.documentElement.clientHeight - oDiv.offsetHeight)/2 + "px";
        var timer = null;
        window.onscroll = function(){
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            var t = scrollTop + (document.documentElement.clientHeight - oDiv.offsetHeight)/2;
            t = parseInt(t);
            moveTo(t);
        }

        function moveTo(iTarget){
            clearInterval(timer);
            timer = setInterval(function (){
                var iSpeed = (iTarget-oDiv.offsetTop)/4;
                iSpeed = iSpeed>0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                if(iTarget == oDiv.offsetTop){
                    clearInterval(timer);
                }else{
                    oDiv.style.top = oDiv.offsetTop + iSpeed + 'px';
                }
            },30)
        }

2、滚动加载

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SCROLL</title>
<script src="test/js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">  
        $(document).ready(function(){  
            var range = 50;             //距下边界长度/单位px  
            var elemt = 500;           //插入元素高度/单位px  
            var maxnum = 20;            //设置加载最多次数  
            var num = 1;  
            var totalheight = 0;   
            var main = $("#content");                     //主体元素  
            $(window).scroll(function(){  
                
                var srollPos = $(window).scrollTop();    //滚动条距顶部距离(页面超出窗口的高度)  
                  
                //console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop());  
                //console.log("页面的文档高度 ："+$(document).height());  
                //console.log('浏览器的高度：'+$(window).height());  
                  
                totalheight = parseFloat($(window).height()) + parseFloat(srollPos);  
                if(($(document).height()-range) <= totalheight  && num != maxnum) {  
                    main.append("<div style='border:1px solid tomato;margin-top:20px;color:#ac"+(num%20)+(num%20)+";height:"+elemt+"' >hello world"+srollPos+"---"+num+"</div>");  
                    num++;  
                }  
            });  
        });  
</script>    
</head>

<body>
<div id="content" style="height:960px">  
            <div id="follow">this is a scroll test;<br/>页面拉动加载</div>  
            <div style='border:1px solid red ;margin-top:20px;color:green;height:800' >hello world test DIV</div>    
        </div>  
</body>
</html>

posted on 2016-02-23 15:51 小武爷阅读(262) 评论(0) 编辑收藏举报