标签：style blog class code java ext
抽奖软件，实现翻牌效果 DEMO
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>CSS3-3D旋转</title> <style type="text/css"> *{margin:0;padding:0px;} body{background:#b1b1b1;font-family:Arial;font-size:125%;color:#202020;background-color:#C43C3C} .title{margin:15px auto;width:400px;font-size:40px;font-weight:900;color:#000000;text-align:center} #container{position:relative;height:500px;width:1300px;margin:0 auto;top:10px;-webkit-perspective:800px;/*3d场景*/ -moz-perspective:800px;} #container div{position:absolute;width:110px;height:80px;padding:3px;background:#463;-ms-border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-webkit-transition:1s ease-in-out;-moz-transition:1s ease-in-out;-ms-transition:1s ease-in-out;-o-transition:1s ease-in-out;transition:1s ease-in-out;/*box-shadow:5px 5px 5px #888888;*/ } #container div.lower{font-family:verdana,arial,sans-serif;background:#642;background:-moz-linear-gradient(-45deg,#642,#864 50%,#642 100%);background:-webkit-gradient(linear,0 0,100% 100%,from(#642),color-stop(50%,#a86),color-stop(100%,#642));transform-style:preserve-3d;backface-visibility:hidden;/*抖动*/ -moz-transform-style:preserve-3d;-moz-backface-visibility:hidden;/*抖动*/ -webkit-transform-style:preserve-3d;-webkit-backface-visibility:hidden;transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-webkit-transform:rotateY(-180deg);} #container div.upper{transform-style:preserve-3d;backface-visibility:hidden;-moz-transform-style:preserve-3d;-moz-backface-visibility:hidden;-webkit-transform-style:preserve-3d;-webkit-backface-visibility:hidden;background:-moz-linear-gradient(-45deg,#463,#8a7 50%,#463 100%);background:-webkit-gradient(linear,0 0,100% 100%,from(#463),color-stop(50%,#8a7),color-stop(100%,#463));} .positive{line-height:17px;overflow:visible;padding:4px 10px 3px 7px;width:110px;height:80px;color:#529214;border:1px solid;border-top-left-radius:10px;border-bottom-right-radius:10px;border-top-right-radius:20px;border-bottom-left-radius:20px;font-size:20px;font-weight:600;text-shadow:2px 2px 2px #888888;} </style> </head> <body onload="init();"> <div class="title">抽奖</div> <div id="container"></div> <script type="text/javascript"> /** 一共五十张牌，其中200元5个，100元10个，50元25个，谢谢您10个 */ function init(){ award.init(); } var award = { money:[], //数组 init:function(){ //初始化数据 var html = ‘‘; for(var i=0;i<50;i++){ (i<5)&&(this.money.push("200元")); (i<15&&i>4)&&(this.money.push("100元")); (i<40&&i>14)&&(this.money.push("50元")); (i>39)&&(this.money.push("谢谢您！")); var left ,top; if(i<10){left = i*130;top =0;} if(i>9&&i<20){left = (i-10)*130;top ="100px";} if(i>19&&i<30){left = (i-20)*130;top ="200px";} if(i>29&&i<40){left = (i-30)*130;top ="300px";} if(i>39&&i<50){left = (i-40)*130;top ="400px";} html += ‘<span style="width:120px">‘ html += ‘<div class="lower" id="lower_‘+i+‘" style="left:‘+left+‘px; top:‘+top+‘;"><input type="button" id="lower_‘+i+‘_button" class="positive"/></div>‘; html += ‘<div class="upper" id="upper_‘+i+‘" style="left:‘+left+‘px; top:‘+top+‘;" onclick="award.changeButton(this);"><input type="button" value="马上有钱了" class="positive" /></div></span>‘; } console.log(this.money); document.getElementById("container").innerHTML = html; }, changeButton:function(bt){ //翻页 var element2 = bt; var element1 = document.getElementById("lower_"+element2.id.split(‘_‘)[1]); var ele = document.getElementById(element1.id+"_button"); var num = this.getRandNum(); var price = this.money[num];//根据随机数取随机价格 ele.value=price,ele.style.color="red",ele.style.fontSize="25px"; element2.style.transform = "rotateY(180deg)"; element2.style.MozTransform = "rotateY(180deg)"; element2.style.webkitTransform ="rotateY(180deg)"; element1.style.transform = "rotateY(0)"; element1.style.MozTransform = "rotateY(0)"; element1.style.webkitTransform ="rotateY(0)"; this.removeEleAt(num);//删除money数组中已被抽中的 }, getRandNum:function(){ //得到随机数 return parseInt(Math.random()*(this.money.length)); }, removeEleAt:function(dx){ if(isNaN(dx)||dx>this.money.length){return false;} this.money.splice(dx,1); var o = 0; for(var p=0; p<this.money.length;p++){ if(typeof this.money[p]!="undefined"){ this.money[o] = this.money[p]; o++; } } } } </script> </body> </html>
标签：style blog class code java ext
原文地址：http://www.cnblogs.com/lj915/p/3704203.html
