非常酷的点亮星星进行投票效果

稿源：互联网 2022-04-02 21:43:02 点击： 2024 撤稿纠错

点亮星星进行投票，显示时带缓冲效果。

以下讨论的是和星星投票相关的非常酷的点亮星星进行投票效果教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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=gb2312">
<meta name="keywords" content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>网页特效 很酷的星级评分效果 站长特效网欢迎您。</title>
<style type="text/css">
.www_zzjs_net {font-size:14px; position:relative; padding:10px 0;}
.www_zzjs_net p {margin:0; padding:0; display:inline; height:40px; overflow:hidden; position:absolute; top:0; left:100px; margin-left:140px;}
.www_zzjs_net p span.s {font-size:36px; line-height:36px; float:left; font-weight:bold; color:#DD5400;}
.www_zzjs_net p span.g {font-size:22px; display:block; float:left; color:#DD5400;}
/*rating*/
._zzjs_net {width:140px; height:28px; text-align:left; position:absolute; top:3px; left:85px; display:inline-block; background:url(/img/two_stars.gif) left -32px repeat-x;}
._zzjs_net 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(/img/two_stars.gif) left top;}
</style>
<script type="text/javascript" src="/img/jquery_zzjs.js"></script>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

需要加载js文件，请刷新后看效果。<br>
<div class="www_zzjs_net">
    <div class="_zzjs_net">
        <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);
})//欢迎 来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
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);
 $("._zzjs_net 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();
  })
 })
 $("._zzjs_net").mouseout(function(){
  $("#s").text(s);
  $("#g").text("."+ g);
  $(".big_rate_up").width((parseInt(s)+parseInt(g)/10) * 14);
 })
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
function up_rate(rate){
 $(".big_rate_up").width("0");
 get_rate(rate);
}//欢 迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
</script>
</body>
</html>

关于非常酷的点亮星星进行投票效果的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2010091664737.shtml方便下次再访问哦。

·上一篇： 淘宝网商品展示效果
·下一篇： 带按钮控制的文字定时滚动特效

非常酷的点亮星星进行投票效果

文章分类LIST >>返回首页

最新游戏

最新新闻