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: 2;
}
/*.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: 0;
left: 0;
opacity: .6;
width: 1500px;
height: 1500px;
background: #000;
z-index: 1;
}
$(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="images/image‘ + i + ‘.jpg" /></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>
时间： 2024-11-08 19:08:18