autoRun(),文字变幻

下载频道

HTML

<div id="container">
               <div id="container1" class="con">
                <p class="random1"><a href="#" target="_blank">first</a></p>
                <p class="random2"><a href="#" target="_blank">first</a></p>
                <p class="random3"><a href="#" target="_blank">first</a></p>
                <p class="random4"><a href="#" target="_blank">first</a></p>
                <p class="random5"><a href="#" target="_blank">first</a></p>
                <p class="random6"><a href="#" target="_blank">first</a></p>
                <p class="random7"><a href="#" target="_blank">first</a></p>
                <p class="random8"><a href="#" target="_blank">first</a></p>
                <p class="random9"><a href="#" target="_blank">first</a></p>
                <p class="random10"><a href="#" target="_blank">first</a></p>
                <p class="random11"><a href="#" target="_blank">first</a></p>
                <p class="random12"><a href="#" target="_blank">first</a></p>
                <p class="random13"><a href="#" target="_blank">first</a></p>
                <p class="random14"><a href="#" target="_blank">first</a></p>
                <p class="random15"><a href="#" target="_blank">first</a></p>
                <p class="random16"><a href="#"  target="_blank">first</a></p>
                
            </div>
            <div id="container2" class="con">
                <p class="random21"><a href="#" target="_blank">second</a></p>
                <p class="random22"><a href="#" target="_blank">second</a></p>
                <p class="random23"><a href="#" target="_blank">second</a></p>
                <p class="random24"><a href="#" target="_blank">second</a></p>
                <p class="random25"><a href="#" target="_blank">second</a></p>
                <p class="random26"><a href="#" target="_blank">second</a></p>
                <p class="random27"><a href="#" target="_blank">second</a></p>
                <p class="random28"><a href="#"...

CSS

#container{margin:0 auto;position:relative;width:728px;height:190px; }
            #container1,#container3,#container3{margin:0 auto;width:728px;height:190px;position:absolute;top:0;left:0; }
            #container1 p{ float:left;display:block }
            #container1{width:728px;height:190px;}
            #container2{width:728px;height:190px;}
            #container3{width:728px;height:190px;}
            .con:hover{cursor:pointer}
            .con p{position:absolute;}

                .random1{left:25px;top:15px;color:#444;font-size:20px;}
                .random2{left:35px;top:90px;color:#aaa;font-size:18px;}
                .random3{left:70px;top:135px;color:#999;font-size:18px;}

                .random4{left:125px;top:10px;color:#ff0000;font-size:16px;}
                .random5{left:135px;top:100px;color:#00ff00;font-size:22px;}
                .random6{left:195px;top:120px;color:#0000ff;font-size:25px;}

                .random7{left:305px;top:15px;color:#00f0f0;font-size:21px;}
                .random8{left:315px;top:95px;color:yellow;font-size:22px;}
                .random9{left:325px;top:145px;color:pink;font-size:26px;}

                .random10{left:495px;top:20px;color:green;font-size:25px;}
                .random11{left:435px;top:85px;color:#ff0000;font-size:18px;}
                .random12{left:485px;top:125px;color:#00ff00;font-size:19px;}

                .random13{left:650px;top:25px;color:#0000ff;font-size:29px;}
                .random14{left:575px;top:85px;color:gray;font-size:27px;}
                .random15{left:610px;top:130px;color:blue;font-size:25px;}
                .random16{left:185px;top:50px;color:#bbb;font-size:26px;}

                .random1 a{color:#444;}
                .random2 a{color:#aaa;}
                .random3 a{color:#999;}
                .random4 a{color:#ff0000;;}
                .random5 a{color:#00ff00;}
                .random6 a{color:#0000ff;}
                .random7 a{color:#00f0f0;}
               ...

JavaScript

(function() {
    $("#container2,#container3").hide();
}())

function autoRun() {
    var con = $("#container"),
        childLen = con.children().length,
        // 3
        index = 0,
        outIndex;


    function run(index) {

        if (index != 2) {
            con.children().eq(index).children("p").animate({
                "fontSize": 0
            }, 200, function() {
                con.children().eq(index).hide();
            });
            for (var i = 0; i < con.children().eq(index + 1).children().length; i++) {
                var randomSize = Math.floor(Math.random() * 20) + 15,
                    randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
                if (index == 0) {
                    con.children().eq(index + 1).find("a").eq(i).addClass("random2" + (i + 1)).css({
                        "color": randomColor
                    }).animate({
                        "fontSize": randomSize + "px"
                    }, 400, function() {
                        $(this).animate({
                            "opacity": 1
                        }, 400)
                    });
                } else if (index == 1) {
                    con.children().eq(index + 1).find("a").eq(i).addClass("random3" + (i + 1)).css({
                        "color": randomColor
                    }).animate({
                        "fontSize": randomSize + "px"
                    }, 400, function() {
                        $(this).animate({
                            "opacity": 1
                        }, 400)
                    });
                }
            }
            con.children().eq(index + 1).show().animate({
                "opacity": 1
            }, 1000);
        } else if (index == 2) {
            con.children().eq(2).children("p").animate({
                "fontSize": 0
            }, 200, function() {
                con.children().eq(2).hide();
            });
            for (var i = 0; i <...