比较实用的选星星打分功能函数
- 作者：cly84920 来源：blueidea 文章点击数：
看了下传统的方法，觉得不好，太麻烦。自己重写了个，思路比较新。
//====================选星星打分功能=================
function rate(obj,oEvent){
//==================
// 图片地址设置
//==================
var imgSrc = "/Upfiles/BeyondPic/2008-06/20086258974074567.gif";
var imgSrc_2 = "/Upfiles/BeyondPic/2008-06/20086258803784667.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)就可以了。
<!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>阿当制作</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 = "/Upfiles/BeyondPic/2008-06/20086258974074567.gif";
var imgSrc_2 = "/Upfiles/BeyondPic/2008-06/20086258803784667.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="/Upfiles/BeyondPic/2008-06/20086258974074567.gif" title="很烂" /><img src="/Upfiles/BeyondPic/2008-06/20086258974074567.gif" title="一般" /><img src="/Upfiles/BeyondPic/2008-06/20086258974074567.gif" title="还好" /><img src="/Upfiles/BeyondPic/2008-06/20086258974074567.gif" title="较好" /><img src="/Upfiles/BeyondPic/2008-06/20086258974074567.gif" title="很好" />
</p>
</body>
</html>
- 上一篇：层展开与关闭-运动缓冲效果
- 下一篇：仿QQ邮箱下载提示效果
- 相关文章
| ·仿windows选项卡效果拾零 | 07-15 |
| ·符合Firefox的,以图片代替滚动条效果 | 07-14 |
| ·模仿JQ的UI-TAB控件,兼容多浏览器 | 07-12 |
| ·一个背景变暗的div可拖动提示窗口，兼容IE、Firefox、 | 07-11 |
| ·非常不错的一个DIV+CSS客齐集的导航特效 | 07-10 |
| ·非常经典的不用图片实现圆角代码 | 07-09 |
| ·如何实现浏览器上的右键菜单 | 07-08 |
| ·网页中实用的中英文日历网页特效代码 | 07-07 |
