<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>百度评分扩展-sunshinegirl</title> <style> body,div{ margin:0; padding:0; } div{ 700px; border:1px solid #8470FF; font-size:14px; } li{ padding-top:10px; padding-left:10px; list-style:none; 20px; float:left; text-align:center; } #headline{ background:#BCD2EE; padding-left:20px; padding-top:10px; padding-bottom:10px; 678px; } #grade{ 698px; height:50px; padding-bottom:20px; } img{ 25px; height:25px; } #show{ float:right; 200px; height:69px; padding-top:20px; color:#b0b0b0; } </style> <script> window.onload=function(){ oImg=document.getElementsByTagName("img");//获取img元素 //先for循环,添加索引值，初始设一个开关为true for(var i=0;i<oImg.length;i++){ oImg[i].index=i; var offon=true; //鼠标移过图片时，先循环将图片修改为初始颜色,关于Math.floor(length/2),正常情况下奇数个取中间数可用Math.ceil(length/2)，但由于下标从0开始，因此取中间数时往左移一位，用Math.floor(length/2). oImg[i].onmouseover=function(){ for(var j=0;j<oImg.length;j++){ oImg[j].src="./1.png"; oImg[Math.floor(oImg.length/2)].src="./3.png"; } fn(this.index); } //初始一个变量num值为-1，用于存点击时索引值 //点击时只记录存一个值，所有操作都需要在鼠标移开后进行，因此点击的效果可放在onmouseout里进行。 var num=-1; oImg[i].onclick=function(){ num=this.index; offon=false; } //鼠标移动事件，首先将所有图片设为初始颜色，然后判断是否有点击，若有点击时则根据点击时是在左边还是在右边添加相应的效果。 oImg[i].onmouseout=function(){ for(var m=0;m<oImg.length;m++){ oImg[m].src="https://img.alicdn.com/tps/i2/T1j_SkXl0fXXXXXXXX-19-19.png"; oImg[5].src="https://img.alicdn.com/tps/i1/T1lgl9XfXyXXXXXXXX-19-19.png"; } if(!offon){ fn(num); } } //自定义的函数片断，根据在左右还是在右边进行添加颜色 function fn(n){ if(n>=(oImg.length)/2){ for(var k=Math.floor((oImg.length)/2);k<=n;k++){ oImg[k].src="https://img.alicdn.com/tps/i3/T1eMt9XclyXXXXXXXX-19-19.png"; } }else{ for(var l=Math.floor((oImg.length)/2);n<=l;l--){ oImg[l].src="https://img.alicdn.com/tps/i3/T1eMt9XclyXXXXXXXX-19-19.png"; } } } } } </script> </head> <body> <div> <div id="headline"> <span>对本篇资讯报道的质量打分</span> </div> <div id="grade"> <li> <img src="https://img.alicdn.com/tps/i2/T1j_SkXl0fXXXXXXXX-19-19.png"/> <span>-5</span> </li> <li> <img src="https://img.alicdn.com/tps/i2/T1j_SkXl0fXXXXXXXX-19-19.png"/> <span>-4</span> </li> <li> <img src="https://img.alicdn.com/tps/i2/T1j_SkXl0fXXXXXXXX-19-19.png"/> <span>-3</span> </li> <li> <img src="https://img.alicdn.com/tps/i2/T1j_SkXl0fXXXXXXXX-19-19.png"/> <span>-2</span> </li> <li> <img src="https://img.alicdn.com/tps/i2/T1j_SkXl0fXXXXXXXX-19-19.png"/> <span>-1</span> </li> <li> <img src="https://img.alicdn.com/tps/i1/T1lgl9XfXyXXXXXXXX-19-19.png" /> <span>0</span> </li> <li> <img src="https://img.alicdn.com/tps/i2/T1j_SkXl0fXXXXXXXX-19-19.png"/> <span>1</span> </li> <li> <img src="https://img.alicdn.com/tps/i2/T1j_SkXl0fXXXXXXXX-19-19.png"/> <span>2</span> </li> <li> <img src="https://img.alicdn.com/tps/i2/T1j_SkXl0fXXXXXXXX-19-19.png"/> <span>3</span> </li> <li> <img src="https://img.alicdn.com/tps/i2/T1j_SkXl0fXXXXXXXX-19-19.png"/> <span>4</span> </li> <li> <img src="https://img.alicdn.com/tps/i2/T1j_SkXl0fXXXXXXXX-19-19.png"/> <span>5</span> </li> <span id="show">当前平均分：打分后显示</span> </div> </div> </body> </html>