javascript淘宝评星简版

---

【实例演示】

　　你对我人品的评价:

　　【程序源码】

　　这个效果主要体现在CSS和javascript的配合上

　　CSS代码

ul,　li　{margin:　0;　padding:　0;　border:　0;}
.shop-rating　{
　　　　height:　25px;
　　　　overflow:　hidden;
　　　　zoom:　1;
　　　　padding:　2px　0;
　　　　position:　relative;
　　　　z-index:　999;
　　　　font:12px　Arial;
　　　　color:#000;
　　　　line-height:1.2em
}
.shop-rating　span　{
　　　　height:　23px;
　　　　display:　block;
　　　　line-height:　23px;
　　　　float:　left;
}
.shop-rating　span.title　{
　　　　width:　125px;
　　　　text-align:　right;
　　　　margin-right:　5px;
}
.shop-rating　ul　{
　　　　float:　left;
}
.shop-rating　.result　{
　　　　margin-left:　20px;
　　　　padding-top:　2px;
}
.shop-rating　.result　span　{
　　　　color:　#ff6d02;
}
.rating-level,
.rating-level　a　{
　　　　　background:　url(http://images.cnblogs.com/cnblogs_com/bluedream2009/201609/o_star.png)　no-repeat　scroll　1000px　1000px;
}
.rating-level　{
　　　　background-position:　0px　0px;
　　　　width:　120px;
　　　　height:　23px;
　　　　position:　relative;
　　　　z-index:　1000;
}
.shop-rating　.result　em　{
　　　　color:　#f60;
　　　　font-family:　arial;
　　　　font-weight:　bold;
}
.rating-level　li　{
　　　　display:　inline;
}
.rating-level　a　{
　　　　line-height:　23px;
　　　　height:　23px;
　　　　position:　absolute;
　　　　top:　0px;
　　　　left:　0px;
　　　　text-indent:　-999em;
　　　　*zoom:　1;
　　　　outline:　none;
}
.rating-level　a.one-star　{
　　　　width:　20%;
　　　　z-index:　6;
}
.rating-level　a.two-stars　{
　　　　width:　40%;
　　　　z-index:　5;
}
.rating-level　a.three-stars　{
　　　　width:　60%;
　　　　z-index:　4;
}
.rating-level　a.four-stars　{
　　　　width:　80%;
　　　　z-index:　3;
}
.rating-level　a.five-stars　{
　　　　width:　100%;
　　　　z-index:　2;
}
.rating-level　.current-rating,　.rating-level　a:hover　{background-position:0　-28px}
.rating-level　a.one-star:hover,.rating-level　a.two-stars:hover,.rating-level　a.one-star.current-rating,.rating-level　a.two-stars.current-rating{background-position:0　-116px;}
.rating-level　.three-stars　.current-rating,.rating-level　.four-stars　.current-rating,.rating-level　.five-stars　.current-rating{background-position:0　-28px;}

HTML结构

<div　class="shop-rating">
　　　　<span　class="title">你对我人品的评价:</span>
　　　　<ul　class="rating-level"　id="stars2">
　　　　　　　　<li><a　href="javascript:void(0);"　class="one-star"　star:value="20">20</a></li>
　　　　　　　　<li><a　href="javascript:void(0);"　class="two-stars"　star:value="40">40</a></li>
　　　　　　　　<li><a　href="javascript:void(0);"　class="three-stars"　star:value="60">60</a></li>
　　　　　　　　<li><a　href="javascript:void(0);"　class="four-stars"　star:value="80">80</a></li>
　　　　　　　　<li><a　href="javascript:void(0);"　class="five-stars"　star:value="100">100</a></li>
　　　　</ul>
　　　　<span　id="stars2-tips"　class="result"></span>
　　　　<input　type="hidden"　id="stars2-input"　name="b"　value=""　size="2"　/>
</div>

　　Javascript代码

var　TB　=　function()　{
　　　　var　T{$selection}nbsp;=　function(id)　{　return　document.getElementById(id)　}
　　　　var　T$　=　function(r,　t)　{　return　(r　||　document).getElementsByTagName(t)　}
　　　　var　Stars　=　function(cid,　rid,　hid,　config)　{
　　　　　　　　　　　　var　lis　=　T$(T$(cid),　'li'),　curA;
　　　　　　　　　　　　for　(var　i　=　0,　len　=　lis.length;　i　<　len;　i++)　{
　　　　　　　　　　　　　　　　lis[i]._val　=　i;
　　　　　　　　　　　　　　　　lis[i].onclick　=　function()　{
　　　　　　　　　　　　　　　　　　　　T$(rid).innerHTML　=　'<em>'　+　(T$(hid).value　=　T$(this,　'a')[0].getAttribute('star:value'))　+　'分</em>　-　'　+　config.info[this._val];
　　　　　　　　　　　　　　　　　　　　curA　=　T$(T$(cid),　'a')[T$(hid).value　/　config.step　-　1];
　　　　　　　　　　　　　　　　};
　　　　　　　　　　　　　　　　lis[i].onmouseout　=　function()　{
　　　　　　　　　　　　　　　　　　　　curA　&&　(curA.className　+=　config.curcss);
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　lis[i].onmouseover　=　function()　{
　　　　　　　　　　　　　　　　　　　　curA　&&　(curA.className　=　curA.className.replace(config.curcss,　''));
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　}　
　　　　};
　　　　return　{Stars:　Stars}
}().Stars('stars2',　'stars2-tips',　'stars2-input',　{
　　　　　　　　　　　　'info'　:　['人品极差',　'人品不咋地',　'人品一般吧',　'人品不错',　'人品极好啊'],
　　　　　　　　　　　　'curcss':　'　current-rating',
　　　　　　　　　　　　'step':　20
　　　　　　　　});

本文示例源代码或素材下载

---

« 
» 

---