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" 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>