星座运势 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <style>
10         .box{
11             width: 350px;
12             height: 250px;
13             border:1px solid #ccc;
14             margin: 100px auto;
15         }
16         .dt{
17             padding-left: 10px;
18             line-height: 35px;
19             font-weight: 700;
20             color:#036;
21         }
22         .dd{
23             padding: 10px;
24         }
25         .dd-t{
26             overflow: hidden;
27         }
28 
29         .icon{
30             width: 50px;
31             height: 50px;
32             float: left;
33             background: url(../images/5.jpg) no-repeat;
34         }
35         .yunshi{
36             width: 80px;
37             height: 13px;
38             display: inline-block;
39             /*//通过控制子盒子的黄色星星的宽度来压住父盒子的无色星星实现星级表现；*/
40             background: url(yunshi.png) no-repeat;
41             position: relative;
42         }
43        .str{
44             width: 0;//改变这个的宽度初始为0；
45             height: 13px;
46             position: absolute;
47            left: 0;
48            bottom: 0;
49            background: url(yunshi.png) no-repeat bottom;
50 
51        }
52     </style>
53 </head>
54 <body>
55     <div class="box">
56         <div class="dt">星座运势</div>
57         <div class="dd">
58             <div class="dd-t">
59                 <div class="icon" id="ico"></div>
60                 <div class="right">
61                     <select name="" id="sele">
62                         <option value="0">白羊座03.21-04.19</option>
63                         <option value="1">金牛座04.21-05.19</option>
64                         <option value="2">天蝎座04.21-05.19</option>
65                         <option value="3">双子座04.21-05.19</option>
66                         <option value="4">哈哈座04.21-05.19</option>
67                     </select>
68                     <div>今日运势：
69                         <span class="yunshi">
70                             <span class="star" id="star"></span>
71                         </span></div>
72 
73                 </div>
74             </div>
75             <div class="dd-b" id="content">这几天的财运都很强，但是危机总是在不知不觉中发生；这几天的财运都很强，但是危机总是在不知不觉中发生；这几天的财运都很强，但是危机总是在不知不觉中发生；这几天的财运都很强，但是危机总是在不知不觉中发生；</div>
76         </div>
77     </div>
78 </body>
79 </html>
80 <script>
81     // 获取元素
82     function $(id){return  document.getElementById(id)};
83     var arr=[10,3,7,4,8];
84     var txtArr=["白羊座的内容","金牛座的内容","狮子座的内容"];
85     var sele=$('sele');
86     sele.onchange=function () {
87         $('ico').style.backgroundPosition='0 '+(-this.value*50)+'';
88         $('content').innerHTML=txtArr[this.value];
89         $('star').style.width=arr[this.value]*8+'px';
90     }
91 
92 </script>

 

posted @ 2017-12-28 22:34  前端极客  阅读(321)  评论(0)  编辑  收藏  举报