zoukankan      html  css  js  c++  java

  • js五星好评

    一般我们在一些购物以及美食的网站都会看到五星好评之类的，一下是使用js制作的五星好评！

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>Title</title>
    6. <style type="text/css">
    7. *{
    8. margin:0;
    9. padding:0;
    10. }
    11. div{
    12. 135px;
    13. height: 30px;
    14. z-index: 1;
    15. opacity: .8;
    16. background: url("images/star.gif") repeat-x;
    17. position: relative;
    18. }
    19. .one{
    20. height: 30px;
    21. position: absolute;
    22. top:0;
    23. left:0;
    24. background:url('images/star.gif') repeat-x 0 -30px;
    25. }
    26. </style>
    27. <script>
    28. window.onload=function() {
    29. var div = document.getElementsByTagName("div")[0];
    30. var p = document.createElement("p");
    31. p.setAttribute("class","one");
    32. div.appendChild(p);
    33. div.onclick=function(ev)
    34. {
    35. var oEvent=ev||event;
    36. var wid = oEvent.offsetX;
    37. if(wid>=135){
    38. wid = 135;
    39. }
    40. p.style.width=wid+"px";
    41. }
    42. }
    43. </script>
    44. </head>
    45. <body>
    46. <div></div>
    47. </body>
    48. </html>
     

    直接复制粘贴 即可查看效果图：
  • 相关阅读:
    Web.xml配置详解
    ANNOTATION 注解
    Gradle的使用
    Version Control
    Building Tool(Maven/Gradle)
    HTTP协议
    函数式编程
    injection
    Container
    Building Tool(Maven/Gradle)
  • 原文地址：https://www.cnblogs.com/ldlx-mars/p/6827008.html
Copyright © 2011-2022 走看看