1. body {
  2.     background-color: #F2F2F2;
  3.     text-align: center;
  4. }
  5. .container {
  6.     position: relative;
  7.     width: 500px;
  8.     height: 500px;
  9.     margin: 0 auto;
  10. }
  11.  
  12. .pic {
  13.     position: absolute;
  14.     width: 100px;
  15.     height: 100px;
  16.     border-radius: 50px;
  17.     overflow: hidden;
  18.     transition: width ease 2s, height ease 2s, border-radius ease 2s, left ease 2s, top ease 2s;
  19. }
  20.  
  21. .pic.active {
  22.     -webkit-box-shadow: 0 0 10px rgba(57, 203, 242, 1);
  23.     box-shadow: 0 0 10px rgba(57, 203, 242, 1);
  24. }
  25.  
  26. .pic.show {
  27.     width: 200px;
  28.     height: 200px;
  29.     border-radius: 100px;
  30.     z-index:;
  31. }
  32.  
  33. /*.pic.show {
  34.     -moz-animation: show 2s ease;
  35.     -webkit-animation: show 2s;
  36.     -o-animation: show 2s;
  37.     animation: show 2s;
  38. }*/
  39.  
  40. .pic img{
  41.     width: 100px;
  42.     height: 100px;
  43.     transition: width ease 2s, height ease 2s;
  44. }
  45.  
  46. .pic.show img {
  47.     width: 200px;
  48.     height: 200px;
  49. }
  50.  
  51. .start {
  52.     position: absolute;
  53.     left: 225px;
  54.     top: 225px;
  55.     width: 50px;
  56.     height: 50px;
  57.     line-height: 50px;
  58.     text-align: center;
  59.     background-color: #5cb85c;
  60.     border-radius: 25px;
  61.     cursor: pointer;
  62. }
  63.  
  64. .shade {
  65.     position: absolute;
  66.     top:;
  67.     left:;
  68.     opacity: .6;
  69.     width: 1500px;
  70.     height: 1500px;
  71.     background: #000;
  72.     z-index:;
  73. }
  1. $(function() {
  2.     initDial();
  3.     initEvent();
  4. })
  5.  
  6. var radius = 200,
  7.     imgWidth = 100,
  8.     imgHeight = 100;
  9.  
  10. /**
  11. * 初始化转盘
  12. */
  13. function initDial() {
  14.     var $container = $('#container'),
  15.         origin = {};
  16.  
  17.     for (var i = 0; i < 8; i++) {
  18.         var $pic, radian, x, y;
  19.         $pic = $('<div class="pic"><img src="data:images/image' + i + '.jpg" alt=""/></div>');
  20.         radian = 2 * Math.PI / 360 * 45 * i;
  21.         x = 250 + Math.cos(radian) * radius - imgWidth / 2;
  22.         y = 250 + Math.sin(radian) * radius - imgHeight / 2;
  23.  
  24.         $pic.css('left', x);
  25.         $pic.css('top', y);
  26.         //$pic.addClass('active');
  27.         $container.append($pic);
  28.     }
  29.  
  30.     var $startBtn = $('<div class="start">开始</div>');
  31.     $container.append($startBtn);
  32. }
  33.  
  34. /**
  35. *初始化事件
  36. */
  37. function initEvent() {
  38.     var $start = $('.start');
  39.     $start.on('click', function() {
  40.         nextPic(Math.random() * 50);
  41.     })
  42. }
  43.  
  44. /**
  45. *time: 调用nextPic的间隔时间，每个调用加上一点时间
  46. */
  47. function nextPic(time) {
  48.     var $activePic,//当前转到的图片
  49.             picIndex;//activePic index
  50.  
  51.     //处理时间
  52.     time = time + 5 * time / 30;
  53.  
  54.     $activePic = $('.pic.active');
  55.     if ($activePic.length === 0) {
  56.         picIndex = Math.round(Math.random() * 7);
  57.         $activePic = $($('.pic').get(picIndex));
  58.     } else {
  59.         picIndex = $activePic.data('picIndex');
  60.         picIndex = picIndex >= 7 ?0:picIndex+1;
  61.         $activePic = $($('.pic').get(picIndex));
  62.     }
  63.     $('.pic').removeClass('active');
  64.     $activePic.addClass('active');
  65.     $activePic.data('picIndex', picIndex);
  66.  
  67.     if (time > 800) {
  68.         show();
  69.     } else {
  70.         window.setTimeout(function() {
  71.             nextPic(time);
  72.         }, time);
  73.     }
  74. }
  75.  
  76. /**
  77. *显示选中的图片
  78. */
  79. function show() {
  80.     var $activePic = $('.pic.active');
  81.     if ($activePic.length === 0) {
  82.         return;
  83.     }
  84.     $activePic.addClass('show');
  85.     $activePic.css('left', '150px');
  86.     $activePic.css('top', '150px');
  87.     $('body').append('<div class="shade"></div>')
  88. }
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3.     <head>
  4.         <meta charset="utf-8"/>
  5.         <title>实现一个转盘大抽奖</title>
  6.         <link rel="stylesheet" type="text/css" href="css/style.css">
  7.         <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
  8.         <script type="text/javascript" src="js/script.js"></script>
  9.     </head>
  10.     <body>
  11.         <p>2015年了，还是单身吗？为程序员派送福利来了，随机抽取女友，现抽现带走！</p>
  12.         <div class="container" id="container">
  13.         </div>
  14.     </body>
  15. </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. 搜索(三分)：HDU 3400 Line belt

    Line belt Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  2. 【模拟】Codeforces 710A King Moves

    题目链接: http://codeforces.com/problemset/problem/710/A 题目大意: 国际象棋标准8X8棋盘,国王能往周围8个方向走.输入国王的位置,输出当前国王能往几 ...

  3. cf703C Chris and Road

    C. Chris and Road time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...

  4. cf702A Maximum Increase

    A. Maximum Increase time limit per test 1 second memory limit per test 256 megabytes input standard ...

  5. hdu 4608 I-number 大整数

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4608 #include <cstdio> #include <cmath> # ...

  6. <一>初探js特效魅力之全选不选反选04

    初探js特效魅力04 我们在进入到公司里面工作的时候,做一个同一个项目,经常是大家分工合作,当我们写css时,一般不写在行间,因为这样会被误操作,也就是被乱删了都不知道,这样的后果是很难检查的 ,因为 ...

  7. redis学习心得之一【安装redis初体验】

    在linux下安装redis 说起这个比mysql的安装过程简单多乐,它不需要configure,只需要解压之后make就可以,无需make install ~$ wget http://redis. ...

  8. memkeys 安装时遇到的问题及解决办法

    某天由于某需要,安装tumblr的开源工具memkeys .但还是一如既往地不是一帆风顺. 在./configure 时出现如下错误信息: configure.in:14: error: possib ...

  9. Thrift初用小结

    thrift --gen  csharp  search.thrift thrift --gen java search.thrift Thrift是facebook的一个技术核心框架,07年四月开放 ...

  10. Strust2 <c:forEach> 循环控制标签

    <c:forEach>为循环控制标签 语法:迭代一集合对象中的所有成员 <c:forEach [var="varName"] items="collec ...