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：实现一个转盘大抽奖的更多相关文章

  1. [jQuery编程挑战]003 克隆一个页面元素及其相关事件

    挑战: a) 绑定一个点击方法到这个div,点击后此元素会淡出消失 b) 同时克隆一个新的div元素到页面,元素内容是前面div文字内容反向书写(即,sgatbg olleh),同样也具有上面的点击事 ...

  2. [jQuery编程挑战]006 生成一个倒计时效果

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

  3. js转盘大抽奖 自定义概率

    公司项目搞优惠活动,让做一个转盘抽奖的活动,转盘抽奖让他转起来 按照概率停止其实都麻烦,但是概率如果设置在前端就会很大的安全漏洞,所以无论为了安全性还是后期的维护问题都要把概率写到后台配置里然后读取配 ...

  4. [jQuery编程挑战]001：实现页面元素加速动画效果

    要求: 页面包含两个HTML元素:一个按钮,一个小方块 动画要求:点击按钮,小方块从页面坐标300,300,加速移动到0,0 相关知识点: jQuery动画方法animate easing参数的设置 ...

  5. 【WorkTile赞助】jQuery编程挑战#009：生成两个div元素互相追逐的动画

    HTML页面: <!-- HTML代码片段中请勿添加<body>标签 //--> <div id="container"> <div id ...

  6. [jQuery编程挑战]008 生成逗号分隔数字

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

  7. [jQuery编程挑战]007 切换数据表格的行列

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

  8. [jQuery编程挑战]005 使用最短的代码生成元素的闪烁效果

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

  9. [jQuery编程挑战]004 针对选择框词典式排序

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

随机推荐

  1. Android的一个自定义的动态添加Dialog类

    android里面会有自己内置的Dialog的提示框,也算是比较方便的了,但是为了省点时间,我们在项目里面添加了一个自己的Dialog类,这个类实现了能够动态的添加按钮和一些提示语句或者其他的显示效果 ...

  2. HDOJ(HDU) 2133 What day is it(认识下Java的Calendar类---日期类)

    Problem Description Today is Saturday, 17th Nov,2007. Now, if i tell you a date, can you tell me wha ...

  3. 对List

     class MyCompare implements Comparator//自定义比较方式 要实现Conparator的 compare 方法 {     public int compare(O ...

  4. eclipse运行内存不足解决办法

    选中所要执行的类,鼠标右键移动到Run As选项,接着选择Run Configurations...选项,在弹出的选项卡中选择Arguments,在VM arguments下面的输入框中输入-Xmx1 ...

  5. 20个高级Java面试题

    这是一个高级Java面试系列题中的第一部分.这一部分论述了可变参数,断言,垃圾回收,初始化器,令牌化,日期,日历等等Java核心问题. 程序员面试指南:https://www.youtube.com/ ...

  6. js提交前弹出提示框

    <form target="_blank" name="f1" method="post" action="sub2.php ...

  7. iOS开发之监测网络状态

    一.说明 在网络应用中,需要对用户设备的网络状态进行实时监控,有两个目的: (1)让用户了解自己的网络状态,防止一些误会(比如怪应用无能) (2)根据用户的网络状态进行智能处理,节省用户流量,提高用户 ...

  8. Android RelativeLayout 布局android:layout_centerHorizontal="true"注意

    特别注意,如果要是 android:layout_alignTop="@id/bind_decode_item_layout" android:layout_centerHoriz ...

  9. 数据结构 - 堆排序(heap sort) 具体解释 及 代码(C++)

    堆排序(heap sort) 具体解释 及 代码(C++) 本文地址: http://blog.csdn.net/caroline_wendy 堆排序包括两个步骤: 第一步: 是建立大顶堆(从大到小排 ...

  10. iOS应用内支付(内购)的个人开发过程及坑！

    本文会给大家详细介绍iOS内购,这是本人16年5月底的开发过程,希望对看完此篇文章的人有所帮助. 本文基于XcodeVersion 7.3 (7D175)版本,手机是iPhone 6,9.3系统. 部 ...