group_shop2
/
vote_demo.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>票选：你印象最深刻的罗氏制药中国瞬间</title>
    <link rel="stylesheet" type="text/css" href="vote_js/jqcloud/jqcloud.css"/>
    <style>
        html, body {
            height: 100%;
            margin: 0;
        }

        div.jqcloud {
            width: 100%;
            height: 100%;
            font-size: 16px !important;
        }

        div.jqcloud span {
            padding-top: 20px !important;
            text-align: center !important;
        }
    </style>
    <script type="text/javascript" src="vote_js/jquery.js"></script>
    <script type="text/javascript" src="vote_js/jqcloud/jqcloud-1.0.4.js"></script>
</head>

<body>
<div style="padding-left:10px;position: absolute">
    <h3>票选：你印象最深刻的罗氏制药中国瞬间</h3>
</div>

<div id="jq_cloud" class="jqcloud" style="opacity:0"></div>
</body>
<script type="text/javascript">
    var word_list = [
        {
            text: "1994 进入中国 Established in China",
            weight: 8.5,
            html: {}

        },
        {
            text: "2007 率先在华建立完整医药价值产业链 Build a Complete Pharmaceutical Value Chain",
            weight: 4.1,
            html: {}


        },
        {
            text: "2011 本地生产希罗达出口欧洲和美国 China-made Xeloda Exported to Europe and U.S.",
            weight: 5.123,
            html: {}

        },
        {
            text: "2015 罗氏创新中心上海启动 Announce to build Roche Innovation Centre Shanghai",
            weight: 4.5,
            html: {}

        },
        {
            text: "Today 五款靶向药纳入国家医保目录 Five Targeted Drugs listed in NRDL",
            weight: 3,
            html: {}

        },
    ];
    $(function () {

        function random_symbol() {
            var x = 100;
            var y = 0;
            var rand = parseInt(Math.random() * (x - y + 1) + y);
            if (rand > 50) {
                return '';
            } else {
                return '-';
            }
        }

        function random_persent() {
            var x = 100;
            var y = 0;
            var rand = parseInt(Math.random() * (x - y + 1) + y);
            return random_symbol() + rand + '%';
        }

        function move() {
            $('html #jq_cloud_word_0').animate({left: random_persent(), top: random_persent(), opacity: 0}, 5000);
            $('html #jq_cloud_word_1').animate({left: random_persent(), top: random_persent(), opacity: 0}, 5000);
            $('html #jq_cloud_word_2').animate({left: random_persent(), top: random_persent(), opacity: 0}, 5000);
            $('html #jq_cloud_word_3').animate({left: random_persent(), top: random_persent(), opacity: 0}, 5000);
            $('html #jq_cloud_word_4').animate({left: random_persent(), top: random_persent(), opacity: 0}, 5000);
        }

        function run() {
            $("#jq_cloud").jQCloud(word_list, {removeOverflowing: false});

            //处理span居中
            var time_0 = setTimeout(function () {
                var span = $('#jq_cloud').find('span');
                box_width = $('#jq_cloud').width();
                span.each(function () {
                    $(this).css('left', ((box_width / 2) - ($(this).width() / 2)));
                });
            }, 100);

            //渐进
            var time_1 = setTimeout(function () {
                $('#jq_cloud').animate({opacity: 1}, 2000);
            }, 100);

            //滑动消失
            var time_2 = setTimeout(function () {
                move();
            }, 5000);

            //删除对象重新加载
            var time_3 = setTimeout(function () {
                $('#jq_cloud').empty();
                $('#jq_cloud').css('opacity', 0);
                run();
            }, 10000);
        }

        run();

    });


</script>

</html>