评分星级的实现(星座运势)

效果

your text

难点

  1. 选择框的取值
  2. 图标,文字的改变
  3. 星星的实现

布局

布局上没什么难点,关键是星星那里,应该是2个图片的叠加,所以那里应该有2个span而不是一个(如果是一个,那考虑一下,需要做多少图片才够?)

your text

选择框的值

每个option一个value值,然后取selectvalue值就行了,这里value编号从0开始,方便sprite图计算偏移

your text

星座图标切换

第一想法就是用sprite图片,看到qq也是这么实现的,因为这个完全可以根据选择框的值直接获得偏移地址(50*index)

your text

星星实现

这个里面的难点是星星实现,比较笨的方法是每个星星做一个图,这样每次修改很麻烦,比较好的方法是用2张图片做叠加,一个是有星星的,一个是没星星的,然后有星星的叠加到没星星的上面。通过修改有星星的那张图的宽度,就能实现不同星级的变化。

your text

效果

your text

代码

html

<div class="xzys">
    <h2>星座运势</h2>
    <div class="mt">
        <a href="" id="xz_icon" class="xz-icon"></a>
        <div class="fl">
            <select class="xingzuoSelect fl" id="xzSelect">
                <option selected="selected" value="0">白羊座(03.21-04.19)</option>
                <option value="1">金牛座(04.20-05.20)</option>
                <option value="2">双子座(05.21-06.21)</option>
                <option value="3">巨蟹座(06.22-07.22)</option>
                <option value="4">狮子座(07.23-08.22)</option>
                <option value="5">处女座(08.23-09.22)</option>
                <option value="6">天秤座(09.23-10.23)</option>
                <option value="7">天蝎座(10.24-11.22)</option>
                <option value="8">射手座(11.23-12.21)</option>
                <option value="9">摩羯座(12.22-01.19)</option>
                <option value="10">水瓶座(01.20-02.18)</option>
                <option value="11" selected="selected">双鱼座(02.19-03.20)</option>
            </select>
            <p>
                今日运势
                <span class="starts"></span>
                <span id="ys_star" class="starts light"></span>
            </p>
        </div>
    </div>
    <div class="mb">
            <p id='content'>
            今天在领导面前有不错的表现,并且有朋友或者同事的帮忙,让你进行的很顺利愉快。但是在具体事务...<a href="#">[详细]</a>
            </p>
    </div>

</div>

css

 .fl{
            float: left;
        }
        p{
            color:#323F5A;
            font-size:14px;
            /*line-height:14px;*/
        }
        .xzys{
            box-sizing: border-box;
            width:280px;
            height:190px;
            padding:10px 20px;
            margin:100px auto;
            border:1px solid #D2E1F1;
        }
        .xzys h2{
            color:#0888C3;
            font-size: 16px;
            line-height:16px;
            font-weight:700;
            margin-bottom:8px;
        }
        .mt{
            overflow: hidden;
            margin-bottom:5px;
        }
        .mt a{
            display: block;
            float: left;
            width:50px;
            height:50px;
            margin-right:20px;
            background: url(astroIcon.png) no-repeat;
        }
        .mt select{
            margin-bottom:10px;
        }
        .mt p{
            color:#333;
            position: relative;
            line-height:14px;
        }
        .starts{
            position: absolute;
            top:14px;
            left:64px;
            width: 80px;
            height: 13px;
            background: url(yunshi.png) no-repeat;
        }
        .light{
            background-position-y: bottom;
        }

js

这里我简单的模拟了一下ajax请求,每个json文件里面就是很简单的:
your text

 window.onload = function(){
        var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象
        function $(id){
            return document.getElementById(id);
        }
        function $cl(cl){return document.getElementsByClassName(cl);}

        function success(data) {
            // body... 

        }
        $('xzSelect').onchange = function () {
            var index = this.value;
            $('xz_icon').style.backgroundPositionY = -index*50+'px';
            request.open('GET', 'xzys_'+ index +'.json');
            request.send();
            request.onreadystatechange = function () { // 状态发生变化时,函数被回调
                if (request.readyState === 4) { // 成功完成
                    // 判断响应结果:
                    if (request.status === 200) {
                        // 成功,通过responseText拿到响应的文本:
                        var data = JSON.parse(request.responseText);
                        $('ys_star').style.width = 8*data.star + 'px';
                        $('content').innerText = data.content;
                        return success(data);
                    } else {
                        // 失败,根据响应码判断失败原因:
                        alert(request.status);
                    }
                } 
            }
        }
    }