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. HDOJ 2053 Switch Game

    Problem Description There are many lamps in a line. All of them are off at first. A series of operat ...

  2. GeoPandas官方中文文档--译著

    译自GeoPandas 0.1.0 文档(原版译著,有错误欢迎交流,转载请注明) GeoPandas是一个开源项目,它的目的是使得在Python下更方便的处理地理空间数据.GeoPandas扩展了pa ...

  3. HOWTO:保存nohup日志

    默认情况下,nohup的日志将保存在一个名为nohup.out的文件中.随着时间的推移,nohup.out文件会变得越来越大,直到某一天程序莫名的崩溃.这种情况是可以预防的,有很多策略都可以解决这个问 ...

  4. Sublime Text 学习资料

    Sublime Text 全程指南 Sublime Text 3 官方下载: http://www.sublimetext.com/3

  5. Eclipse 在线汉化

    1. 打开Eclipse  , 进入菜单中 Help-->Install new Software.. 2. 到Eclipse 官网找到语言包地址,http://www.eclipse.org/ ...

  6. Ring - HDU 2296（自动机+dp）

    题目大意:斯蒂文想送给他女盆友一个戒指,并且他想在戒指上刻一些字,他非常了解他女盆友喜欢什么单词,比如"love""forvevr"....并且他还把女盆友喜欢 ...

  7. wireshark的使用

    1. 过滤 比如输入www.baidu.com 使用域名过滤条件为 跟踪的过程是: 105和106是dns查询,108和115是dns回应,为什么会有两条,我也不是和清楚 展开106 可以它使用的是U ...

  8. java 复用类的三种方式区别 组合，继承，代理的区别

    1. 组合 : 只需在新类中产生现有类的对象 .(is - a 有一个) 新类是由现有类的对象组成. (引用初始化与作用域?) 2. 继承 : 按照现有类的类型来创造新类. (has - a 有一个) ...

  9. js dom操作获取节点的一些方法

    在复习javascript基础的时候,整理了一下js中获取节点的一些常用的方法,见代码: //js获取下一个兄弟节点 function getNextSibling(eleObj){ var next ...

  10. Lucene 4.10.2开发示例

    这里面用的是比较新的Lucene4.10.2 做的一个实例.(lucene的索引不能太大,要不然效率会很低.大于1G的时候就必须考虑分布索引的问题) 先介绍一下Lucene的几个参数意义: Index ...