[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 ...
随机推荐
- 【动态规划】【二分】【最长上升子序列】HDU 5773 The All-purpose Zero
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5773 题目大意: T组数据,n个数(n<=100000),求最长上升子序列长度(0可以替代任何 ...
- iconv gbk字符转utf8字符
直接上代码 bool gbk2utf8(const char* src, char* dest, size_t inlen) { const char *inbuf = src; size_t out ...
- UVa11419 SAM I AM（构造最小点覆盖）
题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=27475 [思路] 二分图的最小点覆盖以及构造最小覆盖. 二分图的最 ...
- android webview无法加载网页
主要原因是没有在AndroidManifest.xml里面设置如下: <user-permission android:name="android.permission.INTERNE ...
- HDU1510 White rectangles
White Rectangles Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- JEFF BANKS_百度百科
JEFF BANKS_百度百科 JEFF BANKS
- php总结 --- 19. 其他小知识
1. PHP博物馆 php各个版本的代码库 2. PHP-GTK php桌面程序 3. Pecl 4. Pear 5. php调试器 目前还不清楚具体有什么大的优势,为什么要用, IDE不能满足吗 6 ...
- [Angular 2] Template property syntax
This lesson covers using the [input] syntax to change an element property such as “hidden” or “conte ...
- JBoss EAP6/AS7/WildFly: How to Use Properties Files Outside Your Archive--reference
Introduction I’d like to preface this post with, really, all properties files should be inside your ...
- group by、order by 先后顺序问题
今天遇到个小问题 本来是很基础的问题 应该说 基础知道掌握的不牢 好了不说 错误 语句 : select a.a1 from table a where order by a.a1 gro ...