[jQuery编程挑战]002：实现一个转盘大抽奖

浏览数：33 / 时间：2015年06月09日

body {
    background-color: #F2F2F2;
    text-align: center;
}
.container {
    position: relative;
    width: 500px;
    height: 500px;
    margin: 0 auto;
}

.pic {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50px;
    overflow: hidden;
    transition: width ease 2s, height ease 2s, border-radius ease 2s, left ease 2s, top ease 2s;
}

.pic.active {
    -webkit-box-shadow: 0 0 10px rgba(57, 203, 242, 1);
    box-shadow: 0 0 10px rgba(57, 203, 242, 1);
}

.pic.show {
    width: 200px;
    height: 200px;
    border-radius: 100px;
    z-index: 2;
}

/*.pic.show {
    -moz-animation: show 2s ease;
    -webkit-animation: show 2s;
    -o-animation: show 2s;
    animation: show 2s;
}*/

.pic img{
    width: 100px;
    height: 100px;
    transition: width ease 2s, height ease 2s;
}

.pic.show img {
    width: 200px;
    height: 200px;
}

.start {
    position: absolute;
    left: 225px;
    top: 225px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #5cb85c;
    border-radius: 25px;
    cursor: pointer;
}

.shade {
    position: absolute;
    top: 0;
    left: 0;
    opacity: .6;
    width: 1500px;
    height: 1500px;
    background: #000;
    z-index: 1;
}

$(function() {
    initDial();
    initEvent();
})

var radius = 200,
    imgWidth = 100,
    imgHeight = 100;

/**
* 初始化转盘
*/
function initDial() {
    var $container = $(‘#container‘),
        origin = {};

    for (var i = 0; i < 8; i++) {
        var $pic, radian, x, y;
        $pic = $(‘<div class="pic"><img src="images/image‘ + i + ‘.jpg" /></div>‘);
        radian = 2 * Math.PI / 360 * 45 * i;
        x = 250 + Math.cos(radian) * radius - imgWidth / 2;
        y = 250 + Math.sin(radian) * radius - imgHeight / 2;

        $pic.css(‘left‘, x);
        $pic.css(‘top‘, y);
        //$pic.addClass(‘active‘);
        $container.append($pic);
    }

    var $startBtn = $(‘<div class="start">开始</div>‘);
    $container.append($startBtn);
}

/**
*初始化事件
*/
function initEvent() {
    var $start = $(‘.start‘);
    $start.on(‘click‘, function() {
        nextPic(Math.random() * 50);
    })
}

/**
*time: 调用nextPic的间隔时间，每个调用加上一点时间
*/
function nextPic(time) {
    var $activePic,//当前转到的图片
            picIndex;//activePic index

    //处理时间
    time = time + 5 * time / 30;

    $activePic = $(‘.pic.active‘);
    if ($activePic.length === 0) {
        picIndex = Math.round(Math.random() * 7);
        $activePic = $($(‘.pic‘).get(picIndex));
    } else {
        picIndex = $activePic.data(‘picIndex‘);
        picIndex = picIndex >= 7 ?0:picIndex+1;
        $activePic = $($(‘.pic‘).get(picIndex));
    }
    $(‘.pic‘).removeClass(‘active‘);
    $activePic.addClass(‘active‘);
    $activePic.data(‘picIndex‘, picIndex);

    if (time > 800) {
        show();
    } else {
        window.setTimeout(function() {
            nextPic(time);
        }, time);
    }
}

/**
*显示选中的图片
*/
function show() {
    var $activePic = $(‘.pic.active‘);
    if ($activePic.length === 0) {
        return;
    }
    $activePic.addClass(‘show‘);
    $activePic.css(‘left‘, ‘150px‘);
    $activePic.css(‘top‘, ‘150px‘);
    $(‘body‘).append(‘<div class="shade"></div>‘)
}

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8"/>
        <title>实现一个转盘大抽奖</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
        <p>2015年了，还是单身吗？为程序员派送福利来了，随机抽取女友，现抽现带走！</p>
        <div class="container" id="container">
        </div>
    </body>
</html>