注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

幽狼De博客

记录成长中的点点滴滴

 
 
 

日志

 
 

很酷的星级评分效果  

2011-03-25 09:46:35|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
<!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>
<title>中国站长天空-网页特效-综合特效-很酷的星级评分效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
.user_rate{font-size:14px;position:relative;padding:10px 0;}
.user_rate p{margin:0;padding:0;display:inline;height:40px;overflow:hidden;position:absolute;top:0;left:0px;margin-left:145px;}
.user_rate p span.s{font-size:36px;line-height:36px;float:left;font-weight:bold;color:#DD5400;}
.user_rate p span.g{font-size:22px;display:block;float:left;color:#DD5400;}
.big_rate_bak{width:140px;height:28px;overflow:hidden;text-align:left;position:absolute;top:0px;left:0px;display:inline-block;background:url(http://www.zzsky.cn/effect/images/201101232200_star.gif) left -32px repeat-x;}
.big_rate_bak b{display:inline-block;width:28px;float:left;height:28px;position:relative;z-index:1000;cursor:pointer;overflow:hidden;}
.big_rate_up{width:140px;height:28px;position:absolute;top:0;left:0;background:url(http://www.zzsky.cn/effect/images/201101232200_star.gif) left top;}
</style>
<script type="text/javascript" src="http://www.zzsky.cn/effect/images/jquery.js"></script>
</head>
<body>
预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了;当然,在实际使用中,不会出现这样的问题。<br>
<!--把下面代码加到<body>与</body>之间-->
<div class="user_rate">
    <div class="big_rate_bak">
        <b rate="2" onclick="javascript:up_rate(20);"> </b>
        <b rate="4" onclick="javascript:up_rate(40);"> </b>
        <b rate="6" onclick="javascript:up_rate(60);"> </b>
        <b rate="8" onclick="javascript:up_rate(80);"> </b>
        <b rate="10" onclick="javascript:up_rate(100);"> </b>
        <div style="width:45px;" class="big_rate_up"></div>
    </div>
    <p><span id="s" class="s"></span><span id="g" class="g"></span></p>
</div>
<script type="text/javascript">
$(function(){
    get_rate(88);
})
function get_rate(rate){
    rate=rate.toString();
    var s;
    var g;
    $("#g").show();
    if (rate.length>=3){
        s=10;    
        g=0;
        $("#g").hide();
    }else if(rate=="0"){
        s=0;
        g=0;
    }else{
        s=rate.substr(0,1);
        g=rate.substr(1,1);
    }
    $("#s").text(s);
    $("#g").text("."+ g);
    $(".big_rate_up").animate({width:(parseInt(s)+parseInt(g)/10) * 14,height:26},1000);
    $(".big_rate_bak b").each(function(){
        $(this).mouseover(function(){
            $(".big_rate_up").width($(this).attr("rate") * 14 );
            $("#s").text($(this).attr("rate"));
            $("#g").text("");
        }).click(function(){
            $("#f").text($(this).attr("rate"));
            $("#my_rate").show();
        })
    })
    $(".big_rate_bak").mouseout(function(){
        $("#s").text(s);
        $("#g").text("."+ g);
        $(".big_rate_up").width((parseInt(s)+parseInt(g)/10) * 14);
    })
}
function up_rate(rate){
    $(".big_rate_up").width("0");
    get_rate(rate);
}
</script>
</body>
</html>
  评论这张
 
阅读(403)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017