Skip to content

Latest commit

 

History

History
87 lines (78 loc) · 2.68 KB

综合小练习--星级评分.md

File metadata and controls

87 lines (78 loc) · 2.68 KB
Raw

title: 综合练习--星级评分 speaker: lizhiyuan url: theme:colors transition: rollIn files:/css/style.css,/js/demo.js,/js/highlight/styles/monnokai_sublime.css

[slide]

综合练习--星级评分

演讲者：李志远

[slide] {:.flexbox.vleft} ##综合练习--星级评分 ###HTML部分

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>星级评分系统</title>
</head>
<body>
<div id="star">
    <span>点击星星就能打分</span>
    <ul>
        <li><a href="javascript:;">1</a></li>
        <li><a href="javascript:;">2</a></li>
        <li><a href="javascript:;">3</a></li>
        <li><a href="javascript:;">4</a></li>
        <li><a href="javascript:;">5</a></li>
    </ul>
    <span></span>
    <p></p>
</div>
</body>
</html>

[slide] {:.flexbox.vleft} ##综合练习--星级评分 ###CSS部分

body,div,ul,li,p{margin:0;padding:0;}
body{color:#666;font:12px/1.5 Arial;}
ul{list-style-type:none;}
#star{position:relative;width:600px;margin:10px auto;}
#star ul,#star span{float:left;display:inline;height:19px;line-height:19px;}
        #star ul{margin:0 10px;}
        #star li{float:left;width:24px;cursor:pointer;text-indent:-9999px;background:url(img/star.png) no-repeat;}
        #star strong{color:#f60;padding-left:10px;}
        #star li.on{background-position:0 -28px;}
        #star p{position:absolute;top:20px;width:159px;height:60px;display:none;background:url(img/icon.gif) no-repeat;padding:7px 10px 0;}
        #star p em{color:#f60;display:block;font-style:normal;}

[slide] {:.flexbox.vleft} ##综合练习--星级评分 ###javascript部分

window.onload = function ()
        {
            var oLi = document.getElementById("tab").getElementsByTagName("li");
            var oUl = document.getElementById("content").getElementsByTagName("ul");

            for(var i = 0; i < oLi.length; i++)
            {
                //记录下下标
                //每一个li元素都添加一个属性来记录当前的下标值
                oLi[i].index = i;
                oLi[i].onmouseover = function ()
                {
                    for(var n = 0; n < oLi.length; n++) oLi[n].className="";
                    this.className = "current";
                    for(var n = 0; n < oUl.length; n++) oUl[n].style.display = "none";
                    oUl[this.index].style.display = "block"
                }
            }
        }

[slide] {:.flexbox.vleft} ##综合练习--星级评分 ###效果

<iframe src='/demos/star.html'></iframe>