javascript+css好多网站用的选星星实现打分功能的函数

ttx9n · 发表于 2008-5-8 12:20:11

javascript+css好多网站用的选星星实现打分功能的函数函数有两个参数，功能如下：
obj： img标签组的父容器，类型为DOM对象；
oEvent： event对象。
这个函数的优点是html代码可以很简洁，使用图片也可以很少，只需要两张图片。事件句柄只需要写在img的父容器上即可。演示用的图片我用的是绝对地址，各位在使用的时候改成网站的相对地址就可以了。当我们点击的时候，我用的是个alert事件。事实上，我们会在这个地方用个ajax方法，把相关的参数传到服务器端。只要把alert(this._num+1)写成sendAjax(this._num+1)就可以了。
需要的两张图片：

<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>脚本之家_www.jb51.net_阿当制作选星星打分</title> 
<style type="text/css"> 
.starWrapper{border:1px solid #FFCC00;padding:5px;width:70px;} 
.starWrapper img{cursor:pointer;} 
</style> 
<script type="text/javascript"> 
function rate(obj,oEvent){ 
//================== 
// 图片地址设置 
//================== 
var imgSrc = 'https://www.jb51.net/www.jb51.net/upload/20080508122008586.gif'; 
var imgSrc_2 = '//www.jb51.net/upload/20080508122010810.gif'; 
//--------------------------------------------------------------------------- 
if(obj.rateFlag) return; 
var e = oEvent || window.event; 
var target = e.target || e.srcElement;  
var imgArray = obj.getElementsByTagName("img"); 
for(var i=0;i<imgArray.length;i++){ 
   imgArray<i>._num = i; 
   imgArray<i>.onclick=function(){ 
    if(obj.rateFlag) return; 
    obj.rateFlag=true; 
    alert(this._num+1); 
   }; 
} 
if(target.tagName=="IMG"){ 
   for(var j=0;j<imgArray.length;j++){ 
    if(j<=target._num){ 
     imgArray[j].src=imgSrc_2; 
    } else { 
     imgArray[j].src=imgSrc; 
    } 
   } 
} else { 
   for(var k=0;k<imgArray.length;k++){ 
    imgArray[k].src=imgSrc; 
   } 
} 
} 
</script> 
<body> 
<p class="starWrapper" onmouseover="rate(this,event)"> 
          <img src="https://www.jb51.net/www.jb51.net/upload/20080508122008586.gif" title="很烂" /><img src="https://www.jb51.net/www.jb51.net/upload/20080508122008586.gif" title="一般" /><img src="https://www.jb51.net/www.jb51.net/upload/20080508122008586.gif" title="还好" /><img src="https://www.jb51.net/www.jb51.net/upload/20080508122008586.gif" title="较好" /><img src="https://www.jb51.net/www.jb51.net/upload/20080508122008586.gif" title="很好" /> 
</p> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

4r8oiin60 · 发表于 2022-8-8 07:50:48

很好，谢谢分享

平平安安 · 发表于 2022-10-13 15:52:12

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦

fzyzy · 发表于 2022-12-20 21:18:51

搞个免费的用用

thywok · 发表于 2023-1-8 11:47:55

逛逛看看瞧瞧

6hruhg · 发表于 2023-1-9 16:19:25

借款金额看了就立刻

3t0ukmu · 发表于 2023-9-11 03:47:18

儿飞飞微风DVD谁vdsvd

5ble0ks · 发表于 2023-9-12 14:21:51

啦啦啦啦啦啦啦啦！

qwe520 · 发表于 2023-10-2 11:30:55

的vgdsvsdvdsvdsvds

u6h2m4 · 发表于 2023-10-19 17:57:26

的谁vdvdsvdsvdsdsv

账号		自动登录	找回密码
密码			立即注册

[JavaScript] javascript+css好多网站用的选星星实现打分功能的函数

相关帖子