一个jQuery抽奖动画效果

2025-11-04 18:49:18

1、准备好需要用到的图标。

一个jQuery抽奖动画效果

2、新建html文档。

一个jQuery抽奖动画效果

3、书写hmtl代码。

<p class="title">Feel free to build your ouw casino!

</div>

</div>

</div>

</div>

<div id="slotMachineButtonShuffle" class="slotMachineButton" style="font-size: 25px">Shuffle!</div>

</div>

一个jQuery抽奖动画效果

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"); }

一个jQuery抽奖动画效果

5、书写并添加js代码。

$(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>

一个jQuery抽奖动画效果

6、代码整体结构。

一个jQuery抽奖动画效果

7、查看效果。

一个jQuery抽奖动画效果

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。