zoukankan      html  css  js  c++  java
  • 画五角星

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
    <style>
    .star-five {
    position: relative;
    display: block;
    0;
    height: 0;
    border-right: 10px solid transparent;
    border-bottom: 5px solid #ffff00;
    border-left: 10px solid transparent;
    -moz-transform: rotate(35deg);
    -webkit-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    -o-transform: rotate(35deg);
    }
    .star-five:before {
    border-bottom: 10px solid yellow;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    position: absolute;
    height: 0;
    0;
    top: -6px;
    left: -6px;
    display: block;
    content: "";
    -webkit-transform: rotate(-35deg);
    -moz-transform: rotate(-35deg);
    -ms-transform: rotate(-35deg);
    -o-transform: rotate(-35deg);
    }
    .star-five:after {
    position: absolute;
    display: block;
    top: 0;
    left: -10px;
    0;
    height: 0;
    border-right: 10px solid transparent;
    border-bottom: 5px solid #ffff00;
    border-left: 10px solid transparent;
    -webkit-transform: rotate(-70deg);
    -moz-transform: rotate(-70deg);
    -ms-transform: rotate(-70deg);
    -o-transform: rotate(-70deg);
    content: "";
    }
    </style>
    </head>
    <script>
    var aData =["很差","较差","一般","推荐","力推"];
    window.onload=function(){
    var oDiv = document.getElementById("rank");
    var aLi = oDiv.getElementsByTagName("li");
    var oP = oDiv.getElementsByTagName("p")[0];
    var i =0;
    for(i=0;i<aLi.length;i++){
    aLi[i].index = i;
    aLi[i].onmouseover= function(){
    oP.style.display = "block";
    oP.style.marginTop="30px";
    oP.innerHTML=aData[this.index];
    for(i=0; i<=this.index;i++){
    aLi[i].className="active";
    }
    };
    aLi[i].onmouseout = function(){
    oP.style.display = "";
    for(i=0; i<aLi.length; i++){
    aLi[i].className="";
    }
    };
    aLi[i].onclick=function(){
    alert(aData[this.index]);

    };
    }
    };
    </script>
    <body><span class="star-five"></span><span class="star-five"></span></body></html>
  • 相关阅读:
    Facade
    Adapter
    Bridge
    Factory
    Singleton
    Decorator
    Template Method
    设计模式
    寻找最小的k个数
    java并发编程(4)--线程池的使用
  • 原文地址:https://www.cnblogs.com/mo-cha/p/5805535.html
Copyright © 2011-2022 走看看