<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<style type="text/css">
body{font-size:12px;}
#ratingarea{position:absolute;left:100px;top:50px; width:900px; border:solid 1px #666;}
.wrap{margin:20px;}
.outer{height:98;border:solid 1px #666; overflow:hidden;position:relative;z-index:1; margin-top:10px;}
.inner{position:absolute;left:0;top:0;z-index:2;cursor:pointer;}
.rating{position:absolute;right:10px;top:38px; width:20px; height:20; line-height:20px; border:solid 1px #999; text-align:center;}
.red{background-color:#f60;width:150px;height:20px;float:left;border-right:solid 1px gray;}
.gray{background-color:gray;width:150px;height:20px;float:left;border-right:solid 1px gray;}
</style>
</head>
<body>
<div id="msg"></div>
<div id="ratingarea"># 您现在无法评分</div>
<script>
var RatingKiller={
fields:[{name:'气质好',field:'qizhi'},{name:'身材苗条',field:'shencai'},{name:'声音甜美',field:'shengyin'},{name:'皮肤细腻',field:'pifu'}],
star:{ceiling:'<div class="red"><img src="e1.jpg" width="150" height="98" /></div>',floor:'<div class="gray"><img src="e2.jpg" width="150" height="98" /></div>'},
init:function(pid){
var thisObj=this;
var $pid=$("#"+pid).empty();
$.each(thisObj.fields,function(i,n){
var $wrap=$('<div class="outer"></div');
var $rating=$('<div class="rating" id="field_'+n.field+'_rating">5</div');
var $inner=$('<div class="inner" id="field_'+n.field+'_ceiling"></div');
$wrap.mouseout(function(){thisObj.moveout(i);}); //鼠标移出此field选择区
thisObj.fields[i].stars=[];//预先放入要操作的图片引用以提高效率,this.paint() 方法会用到
thisObj.fields[i].rating=5;//默认5分
//放入底层图片
$.each([0,0,0,0,0],function(j){
var $img1=$(thisObj.star.ceiling);
var $img2=$(thisObj.star.floor);
$img1.click(function(){thisObj.rate(i,j);}).mouseover(function(){thisObj.movein(i,j);});
$img2.click(function(){thisObj.rate(i,j);}).mouseover(function(){thisObj.movein(i,j);});
$inner.append($img1);
$wrap.append($img2);
thisObj.fields[i].stars[j]=$img1;
});
//元素放入该去的地方
$wrap.append($inner).append($rating);
$pid.append($wrap);
});
},
/*
* fieldid: this.fields 的序号; index当前field中五个star中第几个, 下同
*/
movein:function(fieldid,index){
this.paint(fieldid,index);
},
moveout:function(fieldid){//this.fields[index].rating:存放评分结果
if(!this.fields[fieldid]){alert('system error');return;}
this.paint(fieldid,this.fields[fieldid].rating-1);
$("#msg").empty();
},
rate:function(fieldid,index,field){
this.fields[fieldid].rating=index+1;
},
paint:function(fieldid,index){
$("#msg").html('fieldid='+fieldid+' | index='+index+' | this.fields[fieldid].rating-1='+(this.fields[fieldid].rating-1));
var $stars=this.fields[fieldid].stars;//初使化时预存入的
var nowrating=this.fields[fieldid].rating;
if(!this.fields[fieldid].s) this.fields[fieldid].s=[];
for(var i=0;i<$stars.length;i++){
if(this.fields[fieldid].s[i]==undefined) this.fields[fieldid].s[i]=1;
if(i<=index){if(this.fields[fieldid].s[i]==0){$stars[i].show();this.fields[fieldid].s[i]=1;}}
else{if(this.fields[fieldid].s[i]==1){$stars[i].hide();this.fields[fieldid].s[i]=0;}}
}
$('#field_'+this.fields[fieldid].field+'_rating').html(index+1);
}
}
RatingKiller.init("ratingarea");
</script>
</body>
</html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<style type="text/css">
body{font-size:12px;}
#ratingarea{position:absolute;left:100px;top:50px; width:900px; border:solid 1px #666;}
.wrap{margin:20px;}
.outer{height:98;border:solid 1px #666; overflow:hidden;position:relative;z-index:1; margin-top:10px;}
.inner{position:absolute;left:0;top:0;z-index:2;cursor:pointer;}
.rating{position:absolute;right:10px;top:38px; width:20px; height:20; line-height:20px; border:solid 1px #999; text-align:center;}
.red{background-color:#f60;width:150px;height:20px;float:left;border-right:solid 1px gray;}
.gray{background-color:gray;width:150px;height:20px;float:left;border-right:solid 1px gray;}
</style>
</head>
<body>
<div id="msg"></div>
<div id="ratingarea"># 您现在无法评分</div>
<script>
var RatingKiller={
fields:[{name:'气质好',field:'qizhi'},{name:'身材苗条',field:'shencai'},{name:'声音甜美',field:'shengyin'},{name:'皮肤细腻',field:'pifu'}],
star:{ceiling:'<div class="red"><img src="e1.jpg" width="150" height="98" /></div>',floor:'<div class="gray"><img src="e2.jpg" width="150" height="98" /></div>'},
init:function(pid){
var thisObj=this;
var $pid=$("#"+pid).empty();
$.each(thisObj.fields,function(i,n){
var $wrap=$('<div class="outer"></div');
var $rating=$('<div class="rating" id="field_'+n.field+'_rating">5</div');
var $inner=$('<div class="inner" id="field_'+n.field+'_ceiling"></div');
$wrap.mouseout(function(){thisObj.moveout(i);}); //鼠标移出此field选择区
thisObj.fields[i].stars=[];//预先放入要操作的图片引用以提高效率,this.paint() 方法会用到
thisObj.fields[i].rating=5;//默认5分
//放入底层图片
$.each([0,0,0,0,0],function(j){
var $img1=$(thisObj.star.ceiling);
var $img2=$(thisObj.star.floor);
$img1.click(function(){thisObj.rate(i,j);}).mouseover(function(){thisObj.movein(i,j);});
$img2.click(function(){thisObj.rate(i,j);}).mouseover(function(){thisObj.movein(i,j);});
$inner.append($img1);
$wrap.append($img2);
thisObj.fields[i].stars[j]=$img1;
});
//元素放入该去的地方
$wrap.append($inner).append($rating);
$pid.append($wrap);
});
},
/*
* fieldid: this.fields 的序号; index当前field中五个star中第几个, 下同
*/
movein:function(fieldid,index){
this.paint(fieldid,index);
},
moveout:function(fieldid){//this.fields[index].rating:存放评分结果
if(!this.fields[fieldid]){alert('system error');return;}
this.paint(fieldid,this.fields[fieldid].rating-1);
$("#msg").empty();
},
rate:function(fieldid,index,field){
this.fields[fieldid].rating=index+1;
},
paint:function(fieldid,index){
$("#msg").html('fieldid='+fieldid+' | index='+index+' | this.fields[fieldid].rating-1='+(this.fields[fieldid].rating-1));
var $stars=this.fields[fieldid].stars;//初使化时预存入的
var nowrating=this.fields[fieldid].rating;
if(!this.fields[fieldid].s) this.fields[fieldid].s=[];
for(var i=0;i<$stars.length;i++){
if(this.fields[fieldid].s[i]==undefined) this.fields[fieldid].s[i]=1;
if(i<=index){if(this.fields[fieldid].s[i]==0){$stars[i].show();this.fields[fieldid].s[i]=1;}}
else{if(this.fields[fieldid].s[i]==1){$stars[i].hide();this.fields[fieldid].s[i]=0;}}
}
$('#field_'+this.fields[fieldid].field+'_rating').html(index+1);
}
}
RatingKiller.init("ratingarea");
</script>
</body>
</html>
4450
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
