js+css3的卡牌抽奖特效动画
生活随笔
收集整理的這篇文章主要介紹了
js+css3的卡牌抽奖特效动画
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
項目結構：
index.html
people.js（人員列表）
let people = [{ "name": "云天河", "gender": "boy", "birdhday": "1-1" },{ "name": "韓菱紗", "gender": "girl", "birdhday": "2-1" },{ "name": "柳夢璃", "gender": "girl", "birdhday": "3-1" },{ "name": "慕容紫英", "gender": "girl", "birdhday": "4-1" },{ "name": "云天青", "gender": "boy", "birdhday": "5-1" },{ "name": "夙玉", "gender": "girl", "birdhday": "6-1" },{ "name": "玄霄", "gender": "girl", "birdhday": "7-1" },{ "name": "夙瑤", "gender": "girl", "birdhday": "8-1" },{ "name": "太清", "gender": "boy", "birdhday": "9-1" },{ "name": "宗煉", "gender": "girl", "birdhday": "10-1" },{ "name": "嬋幽", "gender": "girl", "birdhday": "11-1" },{ "name": "奚仲", "gender": "boy", "birdhday": "12-1" },{ "name": "歸邪", "gender": "boy", "birdhday": "10-1" },{ "name": "test<br>F0000000", "gender": "boy"}, ]index.js（人員隨即以及星座判定）
function getRandomNum(min, max) {let range = max - min;return (min + Math.round(Math.random() * range)) }function getLuckyPeople(people_list, lucky_num) {let lucky_pelple = [];for (let i = 0; i < lucky_num; i++) {let lucky_index = getRandomNum(0, people_list.length - 1);lucky_pelple.push(people_list[lucky_index]);people_list.splice(lucky_index, 1);}return lucky_pelple }function getConstellation(birthday) {try {let split_data = birthday.match(/\d+/g)let day = parseInt(split_data[split_data.length - 1]), month = parseInt(split_data[split_data.length - 2])if (month == 1 && day >= 20 || month == 2 && day <= 18) {result = { name: '水瓶座', time: '1/20-2/18', img: '12.png' }} else if (month == 2 && day >= 19 || month == 3 && day <= 20) {result = { name: '雙魚座', time: '2/19-3/20', img: '8.png' }} else if (month == 3 && day >= 21 || month == 4 && day <= 19) {result = { name: '白羊座', time: '3/21-4/19', img: '9.png' }} else if (month == 4 && day >= 20 || month == 5 && day <= 20) {result = { name: '金牛座', time: '4/20-5/20', img: '2.png' }} else if (month == 5 && day >= 21 || month == 6 && day <= 21) {result = { name: '雙子座', time: '5/21-6/21', img: '7.png' }} else if (month == 6 && day >= 22 || month == 7 && day <= 22) {result = { name: '巨蟹座', time: '6/22-7/22', img: '10.png' }} else if (month == 7 && day >= 23 || month == 8 && day <= 22) {result = { name: '獅子座', time: '7/23-8/22', img: '4.png' }} else if (month == 8 && day >= 23 || month == 9 && day <= 22) {result = { name: '處女座', time: '8/23-9/22', img: '3.png' }} else if (month == 9 && day >= 23 || month == 10 && day <= 23) {result = { name: '天秤座', time: '9/23-10/23', img: '6.png' }} else if (month == 10 && day >= 24 || month == 11 && day <= 22) {result = { name: '天蝎座', time: '10/24-11/22', img: '1.png' }} else if (month == 11 && day >= 23 || month == 12 && day <= 21) {result = { name: '射手座', time: '11/23-12/21', img: '5.png' }} else if (month == 12 && day >= 22 || month == 1 && day <= 19) {result = { name: '摩羯座', time: '12/22-1/19', img: '11.png' }} else {result = { name: '***', time: '***', img: '0.png' }}} catch (e) {result = { name: '***', time: '***', img: '0.png' }}return result }function checkxingzuo(date) {let xingzuo = [{ name: '白羊座', time: '3/21-4/19', img: '9.png' },{ name: '金牛座', time: '4/20-5/20', img: '2.png' },{ name: '雙子座', time: '5/21-6/21', img: '7.png' },{ name: '巨蟹座', time: '6/22-7/22', img: '10.png' },{ name: '獅子座', time: '7/23-8/22', img: '4.png' },{ name: '處女座', time: '8/23-9/22', img: '3.png' },{ name: '天秤座', time: '9/23-10/23', img: '6.png' },{ name: '天蝎座', time: '10/24-11/22', img: '1.png' },{ name: '射手座', time: '11/23-12/21', img: '5.png' },{ name: '摩羯座', time: '12/22-1/19', img: '11.png' },{ name: '水瓶座', time: '1/20-2/18', img: '12.png' },{ name: '雙魚座', time: '2/19-3/20', img: '8.png' },]let birthday = new Date(date)let year = birthday.getFullYear()let time = birthday.getTime()let xingzuoObj = { name: '摩羯座', time: '12/22-1/19', img: '11.png' }for (let item of xingzuo) {let starttime = new Date(year + '/' + item.time.split('-')[0]).getTime()let lasttime = new Date(year + '/' + item.time.split('-')[1]).getTime()if (time >= starttime && time <= lasttime) {xingzuoObj = itembreak}}return xingzuoObj }gender_picture.js（性別判定并替換前景圖片）
let origin_gender_picture = {boy:['gangbu.png','qiaotian.png','qiyuan.png'],girl:['zhenyouli.png','tongsheng.png','lixi.png','zhuiming.png','biwu.png','lingyu.png'] }function getGenderPicture(gender,gender_picture=origin_gender_picture){let picture_list = gender_picture[gender]let picture = picture_list[Math.floor((Math.random()*picture_list.length))]return gender+'/'+picture }animate.js（動畫特效）
$("#remain").val(people.length) let puke = $("<i class='puke'><i class='front'><div class='front-photo'></div></i><i class='back'><div class='back-border'><div class='back-img'></div></div></i>") $("#pukedui").click(function (e) {let num = parseFloat($("#num").val())if (num > people.length) {alert("選擇人數已超出獎池剩餘人數：" + people.length);return}$(".wrap").empty()let elList = []let positionList = []let lucky_people = getLuckyPeople(people, num)$("#remain").val(people.length)for (let i = 0; i < num; i++) {let newEl = puke.clone().css({ zIndex: i, id: 'puke' + i })// let imgNum = i + 1// let constellation_info = checkxingzuo(lucky_people[i]['birdhday'])newEl.find('.front-photo').css({ "background": "url(./img/" + getConstellation(lucky_people[i]['birdhday'])['img'] + ") no-repeat" })newEl.find('.back .back-img').css({ "background": "url(./img/avatar/" + getGenderPicture(lucky_people[i]['gender'] ) + ") no-repeat", "background-size": "12rem 20rem" })newEl.click(function () {if ($(this).hasClass("top")) {return}let text_element = $("<span class='info-text'>" + lucky_people[i]['name'] + "</span>")$(this).children('.back').children().children().append(text_element)$(this).removeClass("round")$(this).addClass("flipped")$(this).animate({}, 500, function () {$(this).addClass("top").addClass("show").css({ left: window.innerWidth / 2 - $(this).outerWidth() / 2, top: window.innerHeight / 2 - $(this).outerHeight() / 2 })})setTimeout(() => {$(this).removeClass("show").css(positionList[i])setTimeout(() => {$(this).removeClass("top")}, 500)}, 2000)})newEl.appendTo(".wrap")elList.push(newEl)positionList.push(newEl.offset())}for (let i = 0; i < elList.length; i++) {elList[i].addClass("origin")}function move(i) {elList[i].animate(positionList[i], 500, function () {$(this).addClass('round')if (i + 1 < elList.length) {move(i + 1)}})}move(0) })完整資源鏈接:代碼下載地址
總結
以上是生活随笔為你收集整理的js+css3的卡牌抽奖特效动画的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ABAQUS UEL
- 下一篇： 恩智浦+飞思卡尔后你需要知道的十件事