1、准备好需要用到的图标。
2、新建html文档。
3、书写hmtl代艨位雅剖码。<div class="line" style="padding-top:50px;"> <div class="content" style="text-align: center; background: url('./img/machine.png') no-repeat 50% 120px; height: 500px;"> <div style="clear:both"> <p class="title">Feel free to build your ouw casino! </p> </div> <div style="clear:both; margin-top: 250px;"> <div id="machine4" class="slotMachine" style="margin-left: -65px;"> <div class="slot slot1"></div> <div class="slot slot2"></div> <div class="slot slot3"></div> <div class="slot slot4"></div> <div class="slot slot5"></div> <div class="slot slot6"></div> </div> <div id="machine5" class="slotMachine"> <div class="slot slot1"></div> <div class="slot slot2"></div> <div class="slot slot3"></div> <div class="slot slot4"></div> <div class="slot slot5"></div> <div class="slot slot6"></div> </div> <div id="machine6" class="slotMachine"> <div class="slot slot1"></div> <div class="slot slot2"></div> <div class="slot slot3"></div> <div class="slot slot4"></div> <div class="slot slot5"></div> <div class="slot slot6"></div> </div> </div> </div> <div class="content" style="padding-left:500px; margin-top:-60px"> <div id="slotMachineButtonShuffle" class="slotMachineButton" style="font-size: 25px">Shuffle!</div> <div id="slotMachineButtonStop" class="slotMachineButton" style="font-size: 25px">Stop!</div> </div></div>
4、书写css代码。a { color: #ccd500; text-decoration: none; 魈胺闹臣}a:hover { text-decoration: underline; color: #a9b119; }.clear { clear: both; }html { position: relative; min-height: 100%; }body { }footer { position: absolute; left: 0; bottom: 0; height: 80px; width: 100%; background: black; }b { font-weight: 600; }.wrapper { width: 960px; margin: 120px auto 0; }.wrapper_inner { width: 960px; margin: 0 auto 0; }.wrapper.margin1 { width: 960px; margin: 70px auto 0; }.wrapper.foot { width: 960px; margin: 0 auto 0; }.content { padding: 30px; width: 900px; margin: 0 auto; }.content.foot { padding: 0 30px; float: inherit; margin: 0 auto 0; width: 900px; margin-bottom: 0; }h1 { float: left; width: 288px; height: 73px; }h1 a { float: left; width: 288px; height: 73px; background: url(../img/logo_menu.jpg) no-repeat 0 0; }h1 a span { display: none; }h2 { color: #000000; display: table-cell; float: left; font-size: 45px; line-height: 40px; margin: 0 0 50px; text-align: center; width: 100%; font-weight: 300; }h2 span { font-weight: 400; }h3 { float: left; width: 100%; margin: 0 0 20px 0; color: white; font-size: 40px; font-family: 'Lato', 'sans-serif'; font-weight: 300; }h4 { color: #ffffff; display: table-cell; float: left; font-size: 35px; line-height: 31px; margin: 0 0 0; text-align: center; width: 100%; font-weight: 400; }p.title { color: #000000; display: table-cell; float: left; font-size: 45px; line-height: 40px; margin: 0 0 50px; text-align: center; width: 100%; font-weight: 300; }.grey { color: #444; }#header { margin: 0 auto 0; width: 100%; position: absolute; top: 0px; background-color: #6C5726; overflow: hidden; position: relative; padding: 50px 0px; }#header table, #footer table { height: 100%; width: 100%; }#header table td, #footer table td { vertical-align: middle; }#header .content { color: #FFFFFF; float: left; font-size: 50px; font-weight: 300; line-height: 42px; margin-top: 30px; text-align: center; border-top: 10px solid #A48E4E; border-bottom: 10px solid #A48E4E; width: 100%; }#header .content, #footer .content { font-family: 'Pathway Gothic One'; color: #ffffff; float: left; font-size: 70px; font-weight: 300; line-height: 80px; margin-top: 2px; margin-bottom: 20px; text-align: center; width: 100%; padding: 30px 0px; }#header .content > div, #footer .content > div { display: inline-block; }#footer { width: 100%; background-color: #6C5726; border-top: 20px dotted #A48E4E; height: 200px; }.line { background-color: #DCD293; padding: 75px 0px; width: 100%; border-top: 20px dotted #A48E4E; }#textMachine, #textMachine2 { width: 520px; height: 67px; overflow: hidden; display: inline-block; text-align: center; }#textMachine > *, #textMachine2 > * { padding: 0px 0px; }.slotMachineButton { width: 100px; height: 100px; overflow: hidden; display: inline-block; text-align: center; }.slotMachineButton { -moz-box-shadow: inset 0px 1px 0px 0px #fce2c1; -web kit-box-shadow: inset 0px 1px 0px 0px #fce2c1; box-shadow: inset 0px 1px 0px 0px #fce2c1; background: -web kit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25) ); background: -moz-linear-gradient( center top, #ffc477 5%, #fb9e25 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25');background-color: #ffc477; border-radius: 75px; text-indent: 0px; border: 6px solid #eeb44f; display: inline-block; color: #ffffff; font-size: 50px; font-weight: bold; font-style: normal; height: 100px; line-height: 100px; width: 100px; text-decoration: none; text-align: center; text-shadow: 1px 1px 0px #cc9f52; margin-left: 50px; cursor: pointer; }.slotMachineButton:hover { background: -web kit-gradient( linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477) ); background: -moz-linear-gradient( center top, #fb9e25 5%, #ffc477 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477');background-color: #fb9e25; }.slotMachineButton:active { position: relative; top: 1px; }.slotMachine { width: 100px; height: 100px; overflow: hidden; display: inline-block; text-align: center; border: 5px solid #000; background-color: #ffffff; }.noBorder { border: none !important; background: transparent !important; }.slotMachine .slot { width: 100px; height: 100px; }.slot1 { background-image: url("../img/slot1.png"); }.slot2 { background-image: url("../img/slot2.png"); }.slot3 { background-image: url("../img/slot3.png"); }.slot4 { background-image: url("../img/slot4.png"); }.slot5 { background-image: url("../img/slot5.png"); }.slot6 { background-image: url("../img/slot6.png"); }
5、书写并添加js代码。<script> $(document).ready(function(){ var machine4 = $("#machine4").slotMachine({ active : 0, delay : 500 }); var machine5 = $("#machine5").slotMachine({ active : 1, delay : 500 }); window.machine6 = $("#machine6").slotMachine({ active : 2, delay : 500 }); $("#slotMachineButtonShuffle").click(function(){ machine4.shuffle(); machine5.shuffle(); machine6.shuffle(); }); $("#slotMachineButtonStop").click(function(){ if( machine4.isRunning() ){ //True to stop now machine4.stop(true); }else{ if( machine5.isRunning() ){ machine5.stop(true); }else{ if( machine6.isRunning() ){ machine6.stop(true); } } } }); }); </script>
6、代码整体结构。
7、查看效果。
