[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 ...
随机推荐
- First Bad Version——LeetCode
You are a product manager and currently leading a team to develop a new product. Unfortunately, the ...
- 更新一波题解（最近做的三个dp题）
很久没写题解了,去ec之前来填一填坑,希望能攒攒人品... 首先是去年上海F题..uvalive7143 题意: 给n个人分 m间房子,每个房间的容量是已知的,其中有k对双胞胎,双胞胎可以看作相同的人 ...
- SRM 504(2-1000pt)
DIV2 1000pt 题意:对于一个n*m的矩阵,每个格子都有一个颜色B或者W.对矩阵A执行以下程序后变成矩阵B.给出矩阵B,求A.(若有多种情况,输出字典序最小的).(n,m <= 16) ...
- JQuery实现悬浮工具条
实现效果如下 html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- 如何提高Lucene构建索引的速度
如何提高Lucene构建索引的速度 hans(汉斯) 2013-01-27 10:12 对于Lucene>=2.3:IndexWriter可以自行根据内存使用来释放缓存.调用writer.set ...
- Android三种实现自定义ProgressBar的方式介绍
一.通过动画实现 定义res/anim/loading.xml如下: View Row Code<?xml version="1.0" encoding="UTF- ...
- MYSQL 体系结构图-unzip_LRU
- linux下显卡信息的查看
lspci | grep -i vga 这样就可以显示机器上的显卡信息,比如 [root@localhost conf]# lspci | grep -i vga01:00.0 VGA compat ...
- Note | javascript权威指南[第六版] 第2章：词法结构
语法结构规定了诸如变量名是什么样的.怎么写注释,以及程序语句之间如何分隔等规则.本章用很短的篇幅来介绍JavaScript的词法结构. 2.1.字符集 JavaScript程序是用Unic ...
- Java基础知识强化之集合框架笔记11：Collection集合之迭代器的原理及源码解析
1. 迭代器为什么不定义成一个类,而是定义为一个接口 ? 答:假设迭代器定义的是一个类,这样我们就可以创建该类的对象,调用该类的方法来实现集合的遍历.但是呢? 我们想想,Java中提供了很多的集合类 ...