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. UDP 收/发 广播包

    网络通信基础 如果网络中两个主机上的应用程序要相互通信,其一要知道彼此的IP,其二要知道程序可监听的端口.因为同一主机上的程序使用网络是通过端口号来区分的. UDP Socket的使用过程: 1. 初 ...

  2. Subsets —— LeetCode

    Given a set of distinct integers, nums, return all possible subsets. Note: Elements in a subset must ...

  3. Uncle Sam 山姆大叔

    山姆大叔被用来代指“美国”或“美国政府”,主要在美国.英国,尤其是在新闻界中使用较多.“山姆大叔”是美国的绰号,它同自由女神一样,为世人所熟知. 形象 美国的报纸杂志.文学作品和漫画中,经常可以看到“ ...

  4. Windows Shell Extension 系列文章

    Windows Shell Extension 系列文章 http://www.codeproject.com/Articles/512956/NET-Shell-Extensions-Shell-C ...

  5. cannot be deleted directly via the port API: has device owner network:floatingip

  6. Selenium终极自动化测试环境搭建（二）Selenium+Eclipse+Python

    Selenium终极自动化测试环境搭建(二)Selenium+Eclipse+Python 前面举例了Selenium+Eclipse+Junit+TestNG自动化测试环境的搭建,在前一篇的基础上, ...

  7. MySQL Replication, 主从和双主配置

    MySQL Replication, 主从和双主配置 MySQL的Replication是一种多个MySQL的数据库做主从同步的方案,特点是异步,广泛用在各种对MySQL有更高性能,更高可靠性要求的场 ...

  8. “too many open files" ----增大打开的文件数

     http://www.cnblogs.com/ibook360/archive/2012/05/11/2495405.html [root@localhost ~]# ab -n -c http:/ ...

  9. static对象的高级用法

    1. 函数里static对象是local的,其他如全局对象,类里的static对象都是非local的,会在程序初始化中提前创建 2. 非local的对象的创建无法确定先后次序,但能保证在main函数前 ...

  10. MVC模式实现登录以及增删改查之登录(一)

    我在这里用的不是maven项目,用的一般的web项目,所以需要用到的架包需要自己去下载添加,在项目中,一定注意环境的配置,我用的是jre1.7 1  新建项目 2  建立好MVC的管理包,导入对应的架 ...