自己写的美女瀑布流分享一下 [复制链接]

obananao　楼主

CoderlCoffee

银牌会员 

帖子: 716
体力: 1343
威望: 3
居住地: 陕西省西安市

发表于 2011-12-15 17:01:12 |显示全部楼层

本帖最后由 obananao 于 2012-4-21 08:32 编辑

大家勿喷啊借用新浪的美女嘿嘿睁大你的眼睛

<!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; //某些滚动条会触发三次scroll事件 用这个解决
                var surplusHeight = 800; //差值
                var imgWidth = "206px"; //img的宽度
                var imgHeight = 0; //img的高度
                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 = []; //img数组 也就是数据来源
                var textArray = []; //img底下的文字和img对应
                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() {
                    //body的高度
                    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; //body的高度
                        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);
                }

//声明一个包含img和title的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的层
                    var div = document.createElement("div");
                    div.className = "content";
                    div.appendChild(img);
                    div.appendChild(small_div);
                    return div;
                }

//通过id得到对象
                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.xesee.com/upload/200803131036175436.gif" />
            </div>
            <div id="toTop"><span>△回顶部</span></div>
        </body>
    </html>

提示：您可以先修改部分代码再运行

男人如房，女人如车。

		自动登录	找回密码
密码			注册

自己写的美女瀑布流分享一下 [复制链接]

浏览过的帖子

浏览过的版块