[转]美女瀑布流完整代码

2012-5-8 10:7:45 | tags | views

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en">    <head>        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">        <title>瀑布流以及回顶部的效果</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{                position: absolute;                 width:100%;                height:40px;                display:none;                text-align:center;                background-color:RGB(189,203,207);            }            #toTop            {                position:fixed;                 _position:fixed;                font-size:12px;                color:Blue;                width:15px;                text-align:center;                right:300px;                bottom:100px;                cursor:pointer;                background-color:RGB(243,247,251);                display:none;            }        </style>        <script type="text/javascript">            window.onload = function (){                                var reset = 0;                var surplusHeight = 800;                 var imgWidth = "206px";                 var imgHeight = 0;                 var textHeight = 0;                 var showTopButtonHeight = 500;               var bigDivCount = 4;              var div1 = $("one");              var div2 = $("two");               var div3 = $("three");                var div4 = $("four");                 var loading = $("loading");                var toTop = $("toTop");                                var browser = getBrowser();                                var imgArray = [];                 var textArray = [];                 textArray[0] = "小花美女";                textArray[1] = "小花美女小花美女";                textArray[2] = "小花美女小花美女小花美女";                textArray[3] = "小花美女小花美女小花美女小花美女";                textArray[4] = "小花美女   小花美女";                textArray[5] = "小花美女小花小花美女";                textArray[6] = "小花美女";                textArray[7] = "小花美女小花美女";                textArray[8] = "小花美女小花美女小花美女";                textArray[9] = "小花美女小花美女小花美女小花美女小花美女";                textArray[10] = "小花美女小花美女小花美女小花美女小花美女";                textArray[11] = "小花美女小花美女小花美女小花美女小花美女小花美女";                textArray[12] = "小花美女小花美女小花美女小花美女小花美女小花美女小花美女";                textArray[13] = "小花美女小花美女小花美女小花美女小花美女小花美女小花美女小花美女";                textArray[14] = "小花美女小花美女小花美女小花美女小花美女小花美女小花美女小花美女";                textArray[15] = "小花美女小花美女小花美女小花美女小花美女小花美女小花美女小花美女";                imgArray[0] = "http://ww4.sinaimg.cn/mw205/960bda11tw1dnw504ga3vj.jpg";                imgArray[1] = "http://ww1.sinaimg.cn/mw205/771f735ctw1dnw5gv6dmcj.jpg";                imgArray[2] = "http://ww3.sinaimg.cn/mw205/5d5e9605gw1dnw4o6uk3gj.jpg";                imgArray[3] = "http://ww1.sinaimg.cn/mw205/6d9cb0b8jw1dnw5m0y5yrj.jpg";                imgArray[4] = "http://ww2.sinaimg.cn/mw205/62dae985gw1dnzc4mwvm5j.jpg";                imgArray[5] = "http://ww2.sinaimg.cn/mw205/8d95fb4cgw1dnzec2c6cdj.jpg";                imgArray[6] = "http://ww4.sinaimg.cn/mw205/872bccc8jw1dnzch2aqtkj.jpg";                imgArray[7] = "http://ww4.sinaimg.cn/mw205/5b104465tw1dnzdlozp6tj.jpg";                imgArray[8] = "http://ww4.sinaimg.cn/mw205/6de170f6jw1dnzl7jbzidj.jpg";                imgArray[9] = "http://ww2.sinaimg.cn/mw205/6a93dbfbgw1dnzeiu1draj.jpg";                imgArray[10] = "http://ww3.sinaimg.cn/mw205/6ea59a74jw1dnzm0wbf7vj.jpg";                imgArray[11] = "http://ww2.sinaimg.cn/mw205/48bf076ejw1dnzexjhl6dj.jpg";                imgArray[12] = "http://ww4.sinaimg.cn/mw205/6da7993fjw1dnvsnesrutj.jpg";                imgArray[13] = "http://ww2.sinaimg.cn/mw205/75914d3fgw1dnzlgn33njj.jpg";                imgArray[14] = "http://ww1.sinaimg.cn/mw205/6a8dea72gw1dnzlwnfju0j.jpg";                imgArray[15] = "http://ww1.sinaimg.cn/mw205/696387aagw1dnzqd829yyj.jpg";                                loadImg();                                window.onscroll = fun_scroll;                                function fun_scroll() {                                        var topAll = (browser == "Firefox") ? document.documentElement.scrollHeight : document.body.scrollHeight;                                        var top_top = document.body.scrollTop || document.documentElement.scrollTop;                                        if (top_top > showTopButtonHeight)                        toTop.style.display = "block";                    else                        toTop.style.display = "none";                                        if (reset == 0) {                        var topAll = (browser == "Firefox") ? document.documentElement.scrollHeight : document.body.scrollHeight;                        var top_top = document.body.scrollTop || document.documentElement.scrollTop;                      var result = topAll - top_top;                        if (result < surplusHeight) {                            setTimeout(loadImg, 1000);                            reset = 1;                        }                    } else {                        setTimeout(function () { reset = 0; }, 1000);                    }                }                             function loadImg() {                    loading.style.display = "none";                    for (var i = 0; i < bigDivCount; i++) {                        div1.appendChild(addDiv());                        div2.appendChild(addDiv());                        div3.appendChild(addDiv());                        div4.appendChild(addDiv());                    }                    setTimeout(function () {                        var hh = (browser == "Firefox") ? document.documentElement.scrollHeight : document.body.scrollHeight;                        loading.style.top = hh + "px";                        loading.style.display = "block";                    }, 1000);                }                                 function addDiv() {                                       var ran = Math.round(Math.random() * (imgArray.length - 1));                                        var small_div = document.createElement("div");                    small_div.innerHTML = textArray[ran];                                        var img = document.createElement("img");                    img.alt = "";                    img.src = imgArray[ran];                    img.style.width = imgWidth;                                         var div = document.createElement("div");                    div.className = "content";                    div.appendChild(img);                    div.appendChild(small_div);                    return div;                }                                function $(id) {                    return document.getElementById(id);                }                                function getBrowser() {                    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";                    }                }                                 toTop.onclick = function () {                    var count = 500;                     var speed = 200;                     var timer = setInterval(function () {                        var top_top = document.body.scrollTop || document.documentElement.scrollTop;                        var tt = top_top - count;                        tt = (tt < 300) ? 0 : tt;                        if (top_top > 0)                            window.scrollTo(tt, tt);                        else                            clearInterval(timer);                    }, speed)                };             }            </script>        </head>        <body>            <h1 id="h1">I like TRY</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">                <img src="http://www.mightsoft.cn/upload/201205081237444867.gif" />            </div>            <div id="toTop"><span>△回顶部</span></div>        </body>    </html>

上一篇：在IIS6 配置使用php5.4的fastcgi模式
下一篇：在线运行HTML/JS代码

发表评论:

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

华威手机数码