365体育备用网址报道24.5.4前端页面实现_365体育备用网址官网资讯

大转盘的开拓最重要的素材是转盘游艇会娱乐线路和指针游艇会娱乐线路。如图24-20所示。

图24-20转盘和指针
接着需要实现页面布局,其中游艇会娱乐线路素材需要将转盘设置为前景,指针设置为背景,依此定义外部内部两个容器,HTML代码如下:

1 <div id="outercont"  >
2   <div id="outer-cont">
3     <div id="outer"><img src="img/activity-lottery-24.png"></div>
4   </div>
5   <div id="inner-cont">
6     <div id="inner"><img src="img/activity-lottery-2.png"></div>
7   </div>
8 </div>

相应的CSS操纵代码如下:

 1 #outer-cont {
 2     position: relative;
 3     width: 100%;
 4     top: 20px;
 5     margin-bottom: 30px;
 6 }
 7 #inner-cont {
 8     position: absolute;
 9     width: 100%;
10     top: 70px;
11 }
12 #outer {
13     height: 227px;
14     margin: 0 auto;
15     max-width: 227px;
16     width: 227px;
17 }
18 #inner {
19     cursor: pointer;
20     height: 110px;
21     margin: 0 auto;
22     max-width: 90px;
23     width: 90px;
24 }
25 #outer img, #inner img {
26     display: block;
27     margin: 0 auto;
28 }

再定义一些要显示的内容区域,主要有中奖结果区、奖项设置区、运动说明区。相关代码如下所示:

 1 <div class="content"  >
 2   <div class="boxcontent boxyellow" id="result" style="display:none" >
 3     <div class="box">
 4       <div class="title-orange"><span>恭喜中奖</span></div>
 5       <div class="Detail">
 6         <p>您中了 <span class="red" id="prizelevel" ></span></p>
 7         <p>奖品为 <span class="red" id="prizename"></span></p>
 8       </div>
 9     </div>
10   </div>
11   <div class="boxcontent boxyellow">
12     <div class="box">
13       <div class="title-green"><span>奖项设置:</span></div>
14       <div class="Detail">
15         <p>一等奖:iPhone 6 </p>
16         <p>二等奖:iPhone 5S</p>
17         <p>三等奖:iPhone 5C</p>
18         <p>四等奖:iPad Air </p>
19         <p>五等奖:iPhone 4S</p>
20         <p>六等奖:iPad mini</p>
21       </div>
22     </div>
23   </div>
24   <div class="boxcontent boxyellow">
25     <div class="box">
26       <div class="title-green">运动说明:</div>
27       <div class="Detail">
28         <p>本次运动每人能够抽奖5次 </p>
29         <p>祝您中奖!</p>
30       </div>
31     </div>
32   </div>
33 </div>

在页面初始时,中奖结果区域通过样式表操纵成不可见,抽奖页面的最终实现效果如图24-21所示:

图24-21大转盘

------分隔线----------------------------

公布评论 (183人察看0条评论)
请自觉遵守互联网相关的政策法规,严禁公布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换游艇会娱乐线路
最新评论