首页 > 代码库 > 随机翻转

随机翻转

2024-07-05 15:38:04   227人阅读

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.css" />
</head>
<style>
    .card_agent,.card_driver {
    border-radius: 5px;
    width: 28%;
    height: 43%;
    background: yellow;
    text-align: center;
    padding: 10px 5px;
    color: black;
    display: inline-block;
    margin: 5px 3px 10px;
}

.card_animation {
    animation: myfirst 5s;
    -moz-animation: myfirst 5s; /* Firefox */
    -webkit-animation: myfirst 5s; /* Safari and Chrome */
    -o-animation: myfirst 5s; /* Opera */
}

@keyframes myfirst { 
0% {transform: rotatey(0deg);}
100%{transform:rotatey(360deg);}
}

@-moz-keyframes myfirst /* Firefox */ { 
0% {-moz-transform: rotatey(0deg);}
100%{-moz-transform:rotatey(360deg);}
}

@-webkit-keyframes myfirst /* Safari and Chrome */ { 
0% {-webkit-transform: rotatey(0deg); /* Opera, Chrome, and Safari */}
100%{-webkit-transform:rotatey(360deg); /* Opera, Chrome, and Safari */}
}

@-o-keyframes myfirst /* Opera */ 
{ 
0% {-o-transform: rotatey(0deg);}
100%{-o-transform:rotatey(360deg);}
}
</style>
<body>
<div class="row">
    <div class="col-xs-12"
            style="background-color: #1b1b1b; height: 268px; margin-top: -1px; color: #FFF">
            <div class="row" style="height: 100%">
                <div class="col-xs-6" style="height: 100%; padding: 0px;">
                    <h4>全国货代平均满意度</h4>
                    <p class="text-center">
                        4.52<span class="glyphicon glyphicon-arrow-up"></span>12.3%
                    </p>
                    <div style="border-right: 1px solid #FFF; height: 70%;">
                        <div class="card_agent">
                            <span class="glyphicon glyphicon-user"></span><br> <span
                                class="ninth-font">王财发</span><br> <span>4.52</span>
                        </div>
                        <div class="card_agent">
                            <span class="glyphicon glyphicon-user"></span><br> <span
                                class="ninth-font">王财发</span><br> <span>4.52</span>
                        </div>
                        <div class="card_agent">
                            <span class="glyphicon glyphicon-user"></span><br> <span
                                class="ninth-font">王财发</span><br> <span>4.52</span>
                        </div>
                        <div class="card_agent">
                            <span class="glyphicon glyphicon-user"></span><br> <span
                                class="ninth-font">王财发</span><br> <span>4.52</span>
                        </div>
                        <div class="card_agent">
                            <span class="glyphicon glyphicon-user"></span><br> <span
                                class="ninth-font">王财发</span><br> <span>4.52</span>
                        </div>
                        <div class="card_agent">
                            <span class="glyphicon glyphicon-user"></span><br> <span
                                class="ninth-font">王财发</span><br> <span>4.52</span>
                        </div>
                    </div>
                </div>
                </div></div></div>
                <script
        src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script>
    var cards_agent = $(‘.card_agent‘);
    var agent_cards;
    var a_this;
    var agentsArr = [ {
        name : "王财发",
        value : "4.29"
    }, {
        name : "肖老大",
        value : "4.88"
    }, {
        name : "肖老三",
        value : "4.38"
    }, {
        name : "立雄",
        value : "4.80"
    }, {
        name : "方军",
        value : "3.98"
    }, {
        name : "刘炜",
        value : "4.33"
    }, {
        name : "魏晨",
        value : "4.29"
    } ];
    var nameArr = [];
    cards_agent.each(function(i) {
        $(this).find(‘.ninth-font‘).html(agentsArr[i].name);
        $(this).find(‘span:last‘).html(agentsArr[i].value);
    });
    

    function replaceInfo(_this, cards) {

        var agent = agentsArr[Math.round(Math.random()
                * (agentsArr.length - 1))];
        cards.find(‘.ninth-font‘).each(function(i) {
            nameArr[i] = $(this).html();
        });

        var flg = false;
        if ($.inArray(agent.name, nameArr) > -1) {
            //判断用户是否已经显示
            flg = false;
        }
        ;

        while (!flg) {
            agent = agentsArr[Math.round(Math.random()
                    * (agentsArr.length - 1))];

            if ($.inArray(agent.name, nameArr) > -1) {
                flg = false;
            } else {
                flg = true;
                _this.find(‘.ninth-font‘).html(agent.name);
                _this.find(‘span:last‘).html(agent.value);
            }
            ;
        }

    }
    var r1;
    function ninth_cards(cards) {
        
        var tmp = Math.round(Math.random() * (cards.length - 1));
        while (r1 == tmp) {
            //保证不让同一张牌连续翻转2次
            tmp = Math.round(Math.random() * (cards.length - 1));

        }

        cards.each(function(i) {
            if ($(this).hasClass(‘card_animation‘)) {
                $(this).removeClass(‘card_animation‘);
            }

            if (tmp == i) {
                $(this).addClass(‘card_animation‘);
                a_this = $(this);
                agent_cards = cards
                setTimeout(‘replaceInfo(a_this,agent_cards)‘, 2500);
                r1 = tmp;
            }
        });

    }
    setInterval(ninth_cards, 5000, cards_agent);
    </script>
</body>

</html>

 


联系
我们