[jQuery编程挑战]002：实现一个转盘大抽奖
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：实现一个转盘大抽奖的更多相关文章
- [jQuery编程挑战]003 克隆一个页面元素及其相关事件
挑战: a) 绑定一个点击方法到这个div,点击后此元素会淡出消失 b) 同时克隆一个新的div元素到页面,元素内容是前面div文字内容反向书写(即,sgatbg olleh),同样也具有上面的点击事 ...
- [jQuery编程挑战]006 生成一个倒计时效果
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...
- js转盘大抽奖 自定义概率
公司项目搞优惠活动,让做一个转盘抽奖的活动,转盘抽奖让他转起来 按照概率停止其实都麻烦,但是概率如果设置在前端就会很大的安全漏洞,所以无论为了安全性还是后期的维护问题都要把概率写到后台配置里然后读取配 ...
- [jQuery编程挑战]001：实现页面元素加速动画效果
要求: 页面包含两个HTML元素:一个按钮,一个小方块 动画要求:点击按钮,小方块从页面坐标300,300,加速移动到0,0 相关知识点: jQuery动画方法animate easing参数的设置 ...
- 【WorkTile赞助】jQuery编程挑战#009：生成两个div元素互相追逐的动画
HTML页面: <!-- HTML代码片段中请勿添加<body>标签 //--> <div id="container"> <div id ...
- [jQuery编程挑战]008 生成逗号分隔数字
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...
- [jQuery编程挑战]007 切换数据表格的行列
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...
- [jQuery编程挑战]005 使用最短的代码生成元素的闪烁效果
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...
- [jQuery编程挑战]004 针对选择框词典式排序
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...
随机推荐
- 图论（2-sat）：HDU 3062 Party
Party Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submi ...
- 【数学规律】Vijos P1582 笨笨的L阵游戏
题目链接: https://vijos.org/p/1582 题目大意: 就是o(o<=50)个人在n*m(n,m<=2000)的格子上放L型的东西(有点像俄罗斯方块的L,可对称旋转),问 ...
- 重新注册IE组件
重新注册IE组件:1.打开一个记事本文件. 2.将下面的命令复制到记事本文件中.regsvr32 comcat.dll /sregsvr32 CSSEQCHK.DLL /sregsvr32 shdoc ...
- Single Number III——LeetCode
Given an array of numbers nums, in which exactly two elements appear only once and all the other ele ...
- 面向GC的Java编程
转自http://hellojava.info/?p=341 HelloJava微信公众账号网站 面向GC的Java编程 Leave a reply 这是内部一个同事(沐剑)写的文章,国外有一家专门做 ...
- C++基础复习
1.Object-C也是面向对象的语言:2.#include<iostream> //#include是一个预处理指令3.using namespace std; //std是命名空间,u ...
- visual stduio 插件及代码生成器
下图是本人常用的visual stuido开发工具插件. 2 使用NArrange格式化代码,这个工具,可以将代码格式化,用region分隔开来. NArrange 0.2.9.0 ________ ...
- Win8 移除右键菜单中的SkyDrive Pro选项
Step 1:进入注册表编辑器 Win + R键调出运行窗口,然后输入regedit,进入注册表编辑器. Step 2:删除下面的键值 HKEY_CLASSES_ROOT\AllFilesystemO ...
- android scrollview组件禁止滑动的方法
xml配置: android:id="@+id/sc_freement" android:layout_width="fill ...
- POJ 3449 Geometric Shapes (求正方形的另外两点)
Geometric Shapes Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 1470 Accepted: 622 D ...