首页 > 代码库 > 简易2D抽奖盒子
简易2D抽奖盒子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="format-detection" content="telephone=no, email=no" /> <meta name="screen-orientation" content="portrait"> <meta name="x5-orientation" content="portrait"> <meta name="msapplication-tap-highlight" content="no"> <title>2dtIGER</title> <style type="text/css"> .m-tiger{ position: absolute; left:50%; top:50%; padding:40px 30px 70px 30px; width: 600px; height:200px; outline: 1px solid rgba(0,0,0,0.3); font-size: 0; }
.m-tiger .item{ transform-style:preserve-3d; perspective:1200px; position: relative; overflow: hidden; display: inline-block; width:32%; height:100%; outline:1px solid rgba(0,0,0,0.3); }
.m-tiger .item + .item{ margin-left: 10px; }
.m-tiger .textW{ position: absolute; left:0; top:0; transition-timing-function:cubic-bezier(0,.22,1,.69); transition-property:top; width:100%; height: 2000px; transform:translate3d(0,0,0); }
.m-tiger .textW > span{ display: inline-block; width:100%; height:200px; font-size: 160px; line-height: 1.2; text-align: center; color: #000000; }
.m-tiger .f-btn{ position: absolute; right: 10px; bottom: 10px; width: 80px; height: 30px; background-color: dodgerblue; font-size: 18px; line-height: 30px; text-align: center; }
.m-tiger .f-btn > a{ text-decoration: none; color: #ffffff; }
.bothCenter{ transform:translate3d(-50%,-50%,0); -moz-transform:translate3d(-50%,-50%,0); -webkit-transform:translate3d(-50%,-50%,0); -ms-transform:translate3d(-50%,-50%,0); -o-transform:translate3d(-50%,-50%,0); }
</style> </head> <body>
<div class="m-tiger bothCenter">
<div class="item"> <div class="textW"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> <span>7</span> <span>8</span> <span>9</span> <span>10</span> </div> </div>
<div class="item"> <div class="textW"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> <span>7</span> <span>8</span> <span>9</span> <span>10</span> </div> </div>
<div class="item"> <div class="textW"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> <span>7</span> <span>8</span> <span>9</span> <span>10</span> </div> </div>
<div class="f-btn"> <a href="http://www.mamicode.com/#">点击抽奖</a> </div>
</div>
</body>
<script>
function tiger(){ var tiger = document.getElementsByClassName("m-tiger")[0]; if(!tiger) return false; var items = tiger.getElementsByClassName("item"); var textWs = tiger.getElementsByClassName("textW"); var btn = tiger.getElementsByClassName("f-btn")[0]; var textItms1 = textWs[0].getElementsByTagName("span"); var evrH = textItms1[0].clientHeight;
var absT = []; var data = http://www.mamicode.com/[];
for(var itm = 0; itm < items.length; itm++){ data.push(items[itm]); }
// btn.addEventListener("click",frontMove,false); btn.addEventListener("click",move,false);
/* function frontMove(){ for(var j = 0; j < textWs.length; j++){ textWs[j].style.transitionDuration = ".2s"; textWs[j].style.top = -(Math.random() * 100) + "px"; } }*/
function move(){ setTimeout(function(){ var randomS = [];
for(var i=0; i<textWs.length; i++){ randomS[i] = Math.random().toFixed(1) * textItms1.length; if(randomS[i] == textItms1.length){ randomS[i] = 0; } absT[i] = randomS[i] * evrH; textWs[i].style.transitionDuration = ".6s"; textWs[i].style.top = -(absT[i]) + "px"; } },0); } }
tiger(); </script> </html>
简易2D抽奖盒子