打印

发个选星星打分功能函数

看了下传统的方法,觉得不好,太麻烦。自己重写了个,思路比较新。
//====================选星星打分功能=================
function rate(obj,oEvent){
//==================
// 图片地址设置
//==================
var imgSrc = 'http://image1.koubei.com/images/store/icon_star_1.gif';
var imgSrc_2 = 'http://image1.koubei.com/images/store/icon_star_2.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;
   }
}
}

函数有两个参数,功能如下:
obj:  img标签组的父容器,类型为DOM对象;
oEvent: event对象。

这个函数的优点是html代码可以很简洁,使用图片也可以很少,只需要两张图片。事件句柄只需要写在img的父容器上即可。演示用的图片我用的是绝对地址,各位在使用的时候改成网站的相对地址就可以了。当我们点击的时候,我用的是个alert事件。事实上,我们会在这个地方用个ajax方法,把相关的参数传到服务器端。只要把alert(this._num+1)写成sendAjax(this._num+1)就可以了。

 提示:您可以先修改部分代码再运行
[ 本帖最后由 cly84920 于 2008-5-5 11:17 编辑 ]
本帖最近评分记录
  • caiying2007 威望 +1 不错,支持原创 2008-5-6 14:56
阿当
效果好像不错,收藏。
鼠标挪到星星上,   能加个小手,是不是会更好?

cursor:hand;

TOP

引用:
原帖由 cuikai 于 2008-5-5 11:14 发表
鼠标挪到星星上,   能加个小手,是不是会更好?

cursor:hand;
考虑到兼容性问题,应该用cursorointer;

TOP

恩,已经加上了手形了。谢谢提醒。另外,cursor用pointer比较好,hand是IE only。
阿当

TOP

引用:
原帖由 cly84920 于 2008-5-5 11:18 发表
恩,已经加上了手形了。谢谢提醒。另外,cursor用pointer比较好,hand是IE only。
受教了   谢谢楼上两位。

TOP

收藏了!谢谢楼主分享!

TOP

很好,谢谢!

TOP

那个AJAX怎么写,楼主可以写出一整套完整的吗?

TOP

不错,但是该如何弄选择后可以提交数据库~?

TOP

那个ajax功能和这个函数的关系不大,是相对独立的功能模块,所以当然没有写在这个函数里。至于具体如何用ajax发送数据出去,那个要看你自己怎么使用ajax方法了。你是把ajax方法自己打个包使用呢,还是使用js库。我自己用的是jq,所以没有自己打包过ajax方法。你可以找一下哪里有ajax打包好的函数,或者干脆就用js库好了。推荐jq,上手太容易了。有基础的话,一周绝对够了。
阿当

TOP

不可以第二次使用。。。

TOP

好像很不错哦。收藏了。

TOP

嗯,很不错的效果,学习了,谢谢楼主分享

TOP

引用:
原帖由 togoog 于 2008-5-5 17:16 发表
不可以第二次使用。。。
这个是故意的。因为我们确定点评之后就会定住,不会让它再次点评啊,一般网站都是这么做的。当然,除非你刷新,重新再做点评。
阿当

TOP

谢谢楼主~

我个人认为 没办法第二次使用,是最好的!!!不然没意思了~
我们网友是最无聊的,.,,说不定有人会一次点N次的~无法第二次使用做得很好!!
当然,刷新后就可以~呵呵`

TOP

要是写cookies禁止重复打分就更好了~~~刷新后可以还是不太完善

TOP

阿当,我是大王,不错,顶一下。。

TOP

引用:
原帖由 gyct 于 2008-5-6 08:53 发表
要是写cookies禁止重复打分就更好了~~~刷新后可以还是不太完善
如果刷新应该表示会重新提交一份数据吧,我想应该给他一次重新打分的机会对不对?至于多少秒内不能连续提交数据,也可以放到服务器端去做拉,毕竟保存在客户端的cookie里,要删掉重新提交还是非常容易的。
阿当

TOP

下了一个外国佬做的,效果比楼主的好看些,http://www.m3nt0r.de/devel/raterDemo/
不过光js文件就3个,还要一个css,几十k了
楼主几行代码就实现了差不多的效果,而扩展性也不错,赞一个

它是一个图片,3个样式,用滑动门实现,楼主有没有看过阿,可以参考一下,改进一下外观就很完美了

TOP

不错,这个是你自己手编的吗?

TOP

没看过,谢谢你的资料,有时间看一下。同一种效果可以有多种思路实现的,哪种代码更精简,构思更巧妙才是王道^^。
阿当

TOP

代码简单啊,呵呵,JS就是爽。
我的MSN SPACE
spaces.msn.com/danielchen59/
团队的MSN SPACE
spaces.msn.com/51wdgroup/

TOP

好文章,谢谢分享

TOP

很遗憾的是不能2次使用...

TOP

又是一个我很需要的功能   收藏&学习
行万里路,破万卷书

TOP