根据滚动条位置来逐渐加载内容js特效-网页编程网

当前位置：主页 >> 网页特效 >> 正文

根据滚动条位置来逐渐加载内容js特效

阅读：4482 输入：2016-12-27 08:11:45

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>根据滚动条位置来逐渐加载内容js特效</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        h1{
            text-align:center;
            height:100px;
        }
        body{
            background-color:RGB(232,231,226);
        }
        .all{
            margin:0 auto;
            width:1000px;
        }
        .number{
            float:left;
            width:225px;
        }
        .content{
            margin:5px;
            background-color:white;
        }
        img{
            margin:5px;
        }
        .loading{
            width:100%;
            height:60px;
            background-color:red;
         position: absolute;
         text-align:center;
         padding-top:10px;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            function getOs(){
               var OsObject = "";
               if(navigator.userAgent.indexOf("MSIE")>0) {
                    return "MSIE";
               }
               if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
                    return "Firefox";
               }
               if(isSafari=navigator.userAgent.indexOf("Safari")>0) {
                    return "Safari";
               }
               if(isCamino=navigator.userAgent.indexOf("Camino")>0){
                    return "Camino";
               }
               if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){
                    return "Gecko";
               }
            }
            //数据源
            var imgArray=[];//img数组 也就是数据来源
            var textArray=[];//img底下的文字和img对应
            //初始参数
            var reset=0;//某些滚动条会触发三次scroll事件 用这个解决
            var begin=0;//初始加载不执行某些东西
            var surplusHeight=800;//差值
            var imgWidth="206px";//img的宽度
            var imgHeight=0;//img的高度
            var textHeight=0;//文字高度
            var defaultDivAll=document.getElementById("all");//大div
            var defaultH1All=document.getElementById("h1");//标题对象
            var div1=document.getElementById("one");
            var div2=document.getElementById("two");
            var div3=document.getElementById("three");
            var div4=document.getElementById("four");
            var im=document.getElementById("im");
            var tex=document.getElementById("tex");
            textArray[0]="效果1号";
            textArray[1]="效果2号";
            textArray[2]="效果3号";
            textArray[3]="效果4号";
            textArray[4]="效果5号";
            textArray[5]="效果6号";
            textArray[6]="效果7号";
            textArray[7]="效果8号";
            textArray[8]="效果9号";
            textArray[9]="效果10号";
            textArray[10]="效果11号";
            textArray[11]="效果12号";
            textArray[12]="效果13号";
            textArray[13]="效果14号";
            textArray[14]="效果15号";
            textArray[15]="效果16号";
            imgArray[0]="1.jpg";
            imgArray[1]="2.jpg";
            imgArray[2]="3.jpg";
            imgArray[3]="4.jpg";
            imgArray[4]="5.jpg";
            imgArray[5]="6.jpg";
            imgArray[6]="7.jpg";
            imgArray[7]="8.jpg";
            imgArray[8]="9.jpg";
            imgArray[9]="10.jpg";
            imgArray[10]="11.jpg";
            imgArray[11]="12.jpg";
            imgArray[12]="13.jpg";
            imgArray[13]="14.jpg";
            imgArray[14]="15.jpg";
            imgArray[15]="16.jpg";
            //初始化
            doSomeThing();
            //主会场
            window.onscroll=fun_scroll;
            //滚动方法
            function fun_scroll(){
                if(reset==0){
                    var topAll=(getOs()=="Firefox")?document.documentElement.scrollHeight:document.body.scrollHeight;//body的高度
                    var top_top=document.body.scrollTop||document.documentElement.scrollTop;//卷上去的高度
                    var result=topAll-top_top;
                    if(result<surplusHeight){
                        setTimeout(doSomeThing,1000);
                        reset=1;
                    }
                }else{
                    setTimeout(function(){reset=0;},1000);
                }
            }
             //做一些事情
            function doSomeThing(){
                var length=4;
                var numArray=[0,0,0,0];
                for(var i=0;i<length;i++){
                    div1.appendChild(addDiv());
                    numArray[0]+=imgHeight+10+textHeight;
                    div2.appendChild(addDiv());
                    numArray[1]+=imgHeight+10+textHeight;
                    div3.appendChild(addDiv());
                    numArray[2]+=imgHeight+10+textHeight;
                    div4.appendChild(addDiv());
                    numArray[3]+=imgHeight+10+textHeight;
                }
                //排序得到数组最小值
                numArray.sort();
                //首次加载不执行
                if(begin>0)
                    defaultDivAll.style.height=defaultDivAll.offsetHeight+numArray[0]+"px";
                var hh=(getOs()=="Firefox")?document.documentElement.scrollHeight:document.body.scrollHeight;
                document.getElementById("loading").style.top=hh+"px";
                begin=1;
            }
            //包含img的div
            function addDiv(){
                //数组下标的随机值
                var ran=Math.round(Math.random()*(imgArray.length-1));
                //title层
                var small_div=document.createElement("div");
                small_div.innerHTML=textArray[ran];
                //内部img
                var img=document.createElement("img");
                img.alt="";
                img.src=imgArray[ran];
                img.style.width=imgWidth;
                //img高度
                im.style.display="block";
                im.src=imgArray[ran];
                imgHeight=im.height;
                im.style.display="none";
                //text高度
                tex.style.display="block";
                tex.innerHTML=textArray[ran];
                textHeight=tex.offsetHeight;
                tex.style.display="none";
                //包含img的层
                var div=document.createElement("div");
                div.className="content";
                div.appendChild(img);
                div.appendChild(small_div);
                return div;
            }
        }
    </script>
</head>
<body>
    <img id="im"  alt="" src=""/>
    <div id="tex"></div>
    <h1 id="h1">拖动滚动条试试（随机读取图片，乱顺显示，图片允许重复，永无加载结束）</h1>
    <div id="all"  class="all">
        <div id="one" class="number">
        </div>
        <div id="two" class="number">
        </div>
        <div  id="three"  class="number">
        </div>
         <div id="four" class="number">
        </div>
    </div>
    <div id="loading" class="loading">
        加载中...
    </div>
</body>
</html>

相关阅读: 纯js三组文字定时向上滚动特效代码; js实现当滚动条滚动到页面底部自动加载增加内容，ajax加载数据; JS判断页面是否出现滚动条