一般我们在一些购物以及美食的网站都会看到五星好评之类的，一下是使用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. width: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>
 

直接复制粘贴 即可查看效果图：

最新文章

  1. 【GoLang】golang 的精髓--流水线，对现实世界的完美模拟
  2. jpa 表字段转bean对象
  3. html5基础知识点
  4. JavaScript-join连接符
  5. WinForm设置右键菜单
  6. Poj(1511)，SPFA
  7. EditText默认不弹出软键盘
  8. 进入效果 neon
  9. 【实验吧】Reverse400
  10. BZOJ 4195: [Noi2015]程序自动分析 [并查集 离散化 | 种类并查集WA]
  11. 凡事预则立-于Beta冲刺前
  12. PHP-自定义数组-预定义数组-自定义函数-预定义函数
  13. 在平衡树的海洋中畅游（一）——Treap
  14. [NOIP提高组2018day2t1]旅行
  15. DB2&lt;RedHed Linux&gt; 创建数据库
  16. linux进程管理之优先级
  17. Linux-IO重定向与管道
  18. 文章翻译：Recommending items to more than a billion people（面向十亿级用户的推荐系统）
  19. Java SPI机制原理和使用场景
  20. Linux oracle数据库创建表空间、用户并赋予权限

热门文章

  1. isolinux.cfg 文件是干什么的
  2. PHP内置安全函数一览
  3. pycharm 里面引用pymysql
  4. 【BZOJ3328】PYXFIB 数论+矩阵乘法
  5. dhroid - Perference
  6. Java秒杀简单设计四：service层设计
  7. CentOS安装php及其扩展
  8. iOS - 友盟集成QQ分享的AppID转换16进制的方法
  9. vue--点击事件
  10. Django之form组件is_valid校验机制