这是一个类似淘宝评分
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了这是一个类似淘宝评分相关的知识，希望对你有一定的参考价值。
这则代码中需要插入一个JQ文件和几张图片这里就不发出来了；在这代码中只要用户鼠标移入其中星星就会亮，并会显示打分标准，点击过后就会保持所选标准。
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Document</title> | |
| <style> | |
| .container{ | |
| float:left; | |
| } | |
| .score{ | |
| float: left; | |
| position: relative; | |
| width: 100px; | |
| margin-top: 5px; | |
| margin-left: 10px; | |
| } | |
| span{ | |
| display: none; | |
| position: absolute; | |
| font-family: "Microsoft YaHei"; | |
| left: 0; | |
| top: 0; | |
| } | |
| .scoreDisplay{ | |
| display: block; | |
| } | |
| </style> | |
| <script src="jquery-1.11.1.js"></script> | |
| </head> | |
| <body> | |
| <!-- 一个容器里面放5张图片,先所有的都空星图片--> | |
| <!-- 该案例的要点就是在于鼠标移动上去时改变图片的src--> | |
| <div class="container"> | |
| <img src="empty.png" > | |
| <img src="empty.png" > | |
| <img src="empty.png" > | |
| <img src="empty.png" > | |
| <img src="empty.png" > | |
| </div> | |
| <div class="score"> | |
| <span>很差</span> | |
| <span>较差</span> | |
| <span>一般</span> | |
| <span>较好</span> | |
| <span>很好</span> | |
| </div> | |
| <script> | |
| var img = $(".container img");//获取5张图片的集合 | |
| var span = $(".score span"); | |
| var i,j,k;//定义变量i,j,k | |
| k = -1;//k给予一个初始值-1,,不然后面第1个星星始终是被点亮的 | |
| img.mouseenter(function(){ //设置鼠标进入时的效果,首先将所有的星星熄灭,然后再根据用户鼠标进入的星星下标值点亮星星 | |
| span.removeClass("scoreDisplay");//鼠标进入时，将右边的评论清除掉 | |
| img.attr("src","empty.png"); | |
| i = img.index(this); | |
| for(j=0;j<=i;j++) | |
| { | |
| img.eq(j).attr("src","shining.png"); | |
| } | |
| span.eq(i).addClass("scoreDisplay");//根据用户进入的i值来显示评论 | |
| }).mouseleave(function(){ //仍然是将所有的星星熄灭,然后根据k值来点亮星星 | |
| span.removeClass("scoreDisplay");//鼠标离开时，首先清除掉评论 | |
| img.attr("src","empty.png");//接下来将所有星星变为空星 | |
| for(j=0;j<=k;j++)//根据最终值k值来确定点亮几颗星星 | |
| { | |
| img.eq(j).attr("src","shining.png"); | |
| } | |
| if(k==-1)//如果k值=-1,则不显示任何一个评论内容 | |
| { | |
| span.removeClass("scoreDisplay"); | |
| } | |
| else{ | |
| span.eq(k).addClass("scoreDisplay");//根据最终值k值显示评论 | |
| } | |
| }) | |
| $("img").click(function(){ //k记录用户点击鼠标时的星星下标值 | |
| k = img.index(this); | |
| }) | |
| </script> | |
| </body> | |
| </html> |
以上是关于这是一个类似淘宝评分的主要内容，如果未能解决你的问题，请参考以下文章