[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 ...
随机推荐
- 动态规划（奇异状态）：HNOI 2001 产品加工
产品加工 某加工厂有A.B两台机器,来加工的产品可以由其中任何一台机器完成,或者两台机器共同完成.由于受到机器性能和产品特性的限制,不同的机器加工同一产品所需的时间会不同,若同时由两台机器共同进行加 ...
- 【二分】NEERC15 L Landscape Improved(2015-2016 ACM-ICPC)(Codeforces GYM 100851)
题目链接: http://codeforces.com/gym/100851 题目大意: 一个宽度为N的网格图,i上有h[i]高的方块.现在你有W个方块,问怎么放使得最终的最高点最高. 只要一个格子的 ...
- Binary Tree Zigzag Level Order Traversal——LeetCode
Given a binary tree, return the zigzag level order traversal of its nodes' values. (ie, from left to ...
- nginx在mac下的安装与基本操作
1. 安装 brew install nginx(需要安装homebrew) 2. 执行 nginx 直接启动nginx服务 3. nginx -s reload/stop 4. 配置地址 sud ...
- 网络编程之TCP异步群聊：服务器端代码
最近朋友建议我写一些关于微软云技术的博客留给学校下一届的学生们看,怕下一届的MSTC断档.于是我也觉的有这个必要.写了几篇博客之后,我觉得也有必要把这一年的学习内容放在博客做个纪念,就这样写了本篇博客 ...
- PyCharm4注册码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 name : newasp == ...
- 手把手教你从 Core Data 迁移到 Realm
前言 看了这篇文章的标题,也许有些人还不知道Realm是什么,那么我先简单介绍一下这个新生的数据库.号称是用来替代SQLite 和 Core Data的.Realm有以下优点: 使用方便 Realm并 ...
- Android（java）学习笔记220：开发一个多界面的应用程序之界面间数据传递
1.界面跳转的数据传递 (1)intent.setData() --> intent.getData(): 传递的数据比较简单,一般是文本类型的数据String:倘若我们传递的数据比较复 ...
- Android 设计模式之观察者模式（转载自：“http://blog.csdn.net/fangchongbory/article/details/7774044”）
/* * 观察者模式 * 定义对象间的一种一个(Subject)对多(Observer)的依赖关系,当一个对象的状态发送改变时,所以依赖于它的 * 对象都得到通知并被自动更新 * * 当然, ...
- codevs 1281 Xn数列 （矩阵乘法）
/* 再来个题练练手 scanf longlong 有bug....... */ #include<cstdio> #include<iostream> #include< ...