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

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:;

}

/*.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:;

    left:;

    opacity: .6;

    width: 1500px;

    height: 1500px;

    background: #000;

    z-index:;

}

$(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="data:images/image' + i + '.jpg" alt=""/></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>

巴特西

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

最新文章

热门文章