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. 数据结构（线段树）：BZOJ 1103 [POI2007]大都市meg

    1103: [POI2007]大都市meg Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1791  Solved: 925[Submit][Stat ...

  2. Combinations ——LeetCode

    Given two integers n and k, return all possible combinations of k numbers out of 1 ... n. For exampl ...

  3. cf702D Road to Post Office

    D. Road to Post Office time limit per test 1 second memory limit per test 256 megabytes input standa ...

  4. ScrollView自动滑到底部

    // 自动滑动到底部 mScrollView.post(new Runnable() { @Override public void run() { mScrollView.fullScroll(Sc ...

  5. 《ACM国际大学生程序设计竞赛题解I》——6.10

    Pku 1143: Description Christine and Matt are playing an exciting game they just invented: the Number ...

  6. poj2299

    好吧,看到这个图片就知道是干什么的了,求逆序数- - 可以用线段树,貌似还可以用归并排序,这题应该是考的归并排序,毕竟是递归分治- - 基本上都忘了,再写一写试试吧. AC ///////////// ...

  7. Java中类的初始化

    类从被加载到虚拟机内存中开始,到卸载出内存为止,它的整个生命周期包括:加载.验证.准备.解析.初始化.使用和卸载七个阶段.其中验证.准备.解析3个部分统称为连接.类加载的过程包括了加载.验证.准备.解 ...

  8. [置顶] Android JNI必须掌握的五点

      1:JNI是什么? Java NativeInterface(JNI)是Java提供的一个很重要的特性.它使得用诸如C/C++等语言编写的代码可以与运行于Java虚拟机(JVM)中的 Java代码 ...

  9. QT 内存泄露 检测

      一:问题出现     最近几天在做一个QT程序,IPX的检测控制程序.需要全天候运行.自己做完了,然后就运行.使用  top|grep TP2  来动态检测程序的CPU,内存占用律.不幸的是,一晚 ...

  10. 实现自己的cp命令

    1 综述 在Unix和Linux系统里,cp是经常使用的一个命令,用于复制文件,用法如下: $cp src_file dest_file 以下就使用若干系统调用来实现自己的cp. 2 原理 open: ...