html+css+js实现类淘宝星级宝贝评价系统

1.先上效果图

鼠标悬浮效果

鼠标点击效果

点击后把鼠标移开依旧会恢复上次的评分

2.准备部分

    1.提示框倒三角的实现

    看这张图片

颜色比较丑。我们实现很多地方都要用到这种气泡型的东西，倒三角是它的实现思路。我们怎么制作一个倒三角呢？？用css background的话要加载图片，是不利于网站优化的.我这里用到的办法是采用css border来实现的。

继续看这张图片 它的代码长成这个样子,就是一个单纯的DIV

              .triangle{
			width: 30px;
			height: 30px;
			border-style: solid;
			border-width: 20px;
			border-color:crimson steelblue lightgreen pink;
		}

原来就是四方枭雄想争夺都想问鼎，你不让我我不让你，但是达成了一个领土共识，所以各自形成了梯形。皇帝虽羸弱，但毕竟还是龙，一日不死各路枭雄的敌人就会多一个。

来，我们让皇帝死。

             .triangle{
			width: 0px;
			height: 0px;
			border-style: solid;
			border-width: 20px;
			border-color:crimson steelblue lightgreen pink;
		}

啪，皇帝驾崩

看来时事造就英雄啊，绿党貌似掌握了大权

          .triangle{
			width: 0px;
			height: 0px;
			border-style: solid;
			border-width: 20px;
			border-color:transparent transparent lightgreen transparent;
		}

回到正题，我们为绿党造一个父DIV，提示框嘛，总得有框的样子

#box{
			width: 200px;
			height: 50px;
			background: lightgreen;
			position: relative;
			margin: 20px;
		}
		.triangle{
			width: 0px;
			height: 0px;
			border-style: solid;
			border-width: 20px;
			border-color:transparent transparent lightgreen transparent;
			position: absolute;
			top: -30px;
			left: 0;
		}

给绿党设置绝对定位，小荷才露尖尖角啊

我们要设置黑边框怎么破啊？？？？？？？

我们再设置培养一个党派，叫黑党，不，黑手党吧

黑手党的css长这样

.triangle_outer{
			width: 0px;
			height: 0px;
			border-style: solid;
			border-width: 20px;
			border-color:transparent transparent black transparent;
			position: absolute;
			top: -31px;
			left: 0;
		}

就是颜色变了。

不能让黑手党完全覆盖绿党了哇，我们为绿党设置一个z-index=1;       黄袍加身
注意，这里还要让黑手党的top比绿党的top小1，才能露出那个蜜汁黑边框啊。黑手党最终用自己的身体成就了绿党的边框.

代码清单   css

#box{
			width: 200px;
			height: 50px;
			background: lightgreen;
			position: relative;
			margin: 20px;
			border: 1px solid black;
		}
		.triangle{
			width: 0px;
			height: 0px;
			border-style: solid;
			border-width: 20px;
			border-color:transparent transparent lightgreen transparent;
			position: absolute;
			top: -40px;
			left: 10px;
			z-index: 1;
		}
		.triangle_outer{
			width: 0px;
			height: 0px;
			border-style: solid;
			border-width: 20px;
			border-color:transparent transparent black transparent;
			position: absolute;
			top: -41px;
			left: 10px;
		}

html

效果 这颜色真丑。

下面不扯皮了，

2.附上这个评分系统的完整HTML代码

	
		
		
	
	
	
	    

	    	请为我们的宝贝打分
	    	

	    		

	    		

	    		

	    		

	    		

	    	
	    	

	    	

	    		1星,非常糟糕
	    		

	    		

	    	
	    
	         
	

——————————————————————————————————————————————————————————————————————————

后记

本来实现鼠标滑过当前的和前面的星星都亮，我的思路是：循环遍历oLi，用数组的slice方法截取前面几个li为其添加class，但是天真了，DOM的 document.getElementBy*(Id,tagName...)方法得到DOM集合都是 Array-Like，伪数组，它的类型是 HTMLCollection，只有数组的.length和for循环可以用，要选择其内部的特定元素只能用HTMLCollection的方法， item()方法

我的思路：   伪代码

                          
 switch(this.index){
                                case 0:  oLi[0].className='current';   
                                break;
                                case 1:  oLi.item(0,1).className='current'; 
                               break;
                               }
 
   
 
   
 
   
 
   
 
  

大致是这样，太复杂也不成立，好像item方法只能接收一个参数，有知道的同学说一下啦...