JS实现的论坛埃阿斯打分效果完整实例

本文实例讲述了射流研究…实现的论坛埃阿斯打分效果。分享给大家供大家参考，具体如下：

这是论坛常见的一种埃阿斯打分效果，使用了Discuz老版论坛的就有此种效果，目前有很多网站也有类似的，分享给大家吧，我觉得非常实用的埃阿斯评分效果，使用了一个背景图片，自己可以下载。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-dicuz-ajax-df-plugs-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML '标题论坛埃阿斯评分效果/title meta http-equiv=' content-type ' content=' text/html；charset=utf-8 '/style type=' text/CSS ' * { margin :0；划水：0;font-size :12 px } # show { font : bold 14px/2 Georgia；文本对齐：居中；}.星形{位置：相对宽度宽度：150pxmargin:0 auto}。明星。索引，启动{ overflow : hiddenheight :25 pxbackground : URL(' images/221815 eep 7 piubznelxie e。gif ')重复-x；颜色： # FFF；font :0/0 arial；}.索引{ position:absolutez索引：1;top :0 left :0 margin :0背景-位置：0-60px；高度：25px} .以{ position:absolutez索引：3;top:0宽度：30 px背景-位置：0-90px；}.开始：悬停{ z-index :2左转：0背景-位置：0-30px；} a . star 1 {左侧：0；} a . star 1:悬停{ width :30 px} a . star 2 {左侧：30 px} a . star 2:悬停{ width :60 px} a . star 3 {左侧：60 px} a . star 3:悬停{ width :90 px} a . star 4 {左侧：90 px} a . star 4:悬停{ width :120 px} a . star 5 {左侧：120 px} a . star 5:悬停{ width :150 px}/style脚本函数go(){ var count=sum=distance=0；var dd，a；var as=文档。getelementbyid(' rank ').getElementsByTagName(' a ')；var这里=文档。getelementbyid('此处')；var show=文档。getelementbyid(' show ')；for(var I=0；ias.lengthi ){ as[i].idx=I ^ 1；作为[我]。onclick=function(){ count；this.w=距离=这个。idx *这个。w；这里。风格。宽度=距离/计数px '；DD=ParSeint(此处。风格。宽度)/30；a=dd.toString().substr(0，4)；show.innerHTML=a '分；返回false} } }窗口。onload=function(){ go()}/script/head dybr/br/br/br/div id=' rank ' class=' star ' H3 id=' here ' class=' index '/H3 a title='给一分href=' # ' class=' star 1 ' 1/a a title='给2分href=' # ' class=' star 2 ' 2/a a title='给3分href=' # ' class=' star 3 ' 3/a a title='给四分href=' # class=' star 4 ' 4/a a title='给5分href=' # ' class=' star 5 ' 5/a/div div id=' show '打分./div/body/html希望本文所述对大家Java脚本语言程序设计有所帮助。