打分效果学习

sanshizi

浏览: 85624 次
性别:
来自: 南京

最近访客更多访客>>

p645213851

goylsf

q641529

henry2212

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Javascript

html jquery javascript

<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>

2
顶

0
踩

分享到：

复制表单HTML内容, 且同时复制表单的最新值 | Astar 学习

2012-07-02 23:34
浏览 1075
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论