javascript+css好多网站用的选星星实现打分功能的函数_表单特效

来源：动视网责编：小采时间：2020-11-27 20:39:11

javascript+css好多网站用的选星星实现打分功能的函数_表单特效

javascript+css好多网站用的选星星实现打分功能的函数_表单特效:函数有两个参数，功能如下： obj： img标签组的父容器，类型为DOM对象； oEvent： event对象。这个函数的优点是html代码可以很简洁，使用图片也可以很少，只需要两张图片。事件句柄只需要写在img的父容器上即可。演示用的图片我用的是绝对地址，各位在使用的

推荐度：

点击下载本文 文档为doc格式

导读javascript+css好多网站用的选星星实现打分功能的函数_表单特效:函数有两个参数，功能如下： obj： img标签组的父容器，类型为DOM对象； oEvent： event对象。这个函数的优点是html代码可以很简洁，使用图片也可以很少，只需要两张图片。事件句柄只需要写在img的父容器上即可。演示用的图片我用的是绝对地址，各位在使用的

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

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>脚本之家_www.gxlcms.com_阿当制作选星星打分</title> 
<style type="text/css"> 
.starWrapper{border:1px solid #FFCC00;padding:5px;width:70px;} 
.starWrapper img{cursor:pointer;} 
</style> 
 
function rate(obj,oEvent){ 
//================== 
// 图片地址设置 
//================== 
var imgSrc = 'http://www.gxlcms.com/upload/20080508122008586.gif'; 
var imgSrc_2 = 'http://www.gxlcms.com/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="http://www.gxlcms.com/upload/20080508122008586.gif" title="很烂" /><img src="http://www.gxlcms.com/upload/20080508122008586.gif" title="一般" /><img src="http://www.gxlcms.com/upload/20080508122008586.gif" title="还好" /><img src="http://www.gxlcms.com/upload/20080508122008586.gif" title="较好" /><img src="http://www.gxlcms.com/upload/20080508122008586.gif" title="很好" /> 
</p> 
</body> 
</html>

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

javascript+css好多网站用的选星星实现打分功能的函数_表单特效

推荐度：

点击下载本文 文档为doc格式

标签：评分实现 js

热门焦点

javascript+css好多网站用的选星星实现打分功能的函数_表单特效

javascript+css好多网站用的选星星实现打分功能的函数_表单特效

javascript+css好多网站用的选星星实现打分功能的函数_表单特效

最新推荐

猜你喜欢

热门推荐