刚开始接触写星星评价时,哇!估计脑子刚被驴踢了,竟然想到了最笨的办法——手工画五角星。妈呀! css样式都写了好大一串,还沾沾自喜终于画出来了,然后瞅一瞅旁边的妹子写得怎么样了,哇!人家机智的!直接用符号★就解决了! ! !唉,智商捉急呀!
先上图看看吧:
虽然简单,还是有几个注意的地方:
1。未点击时的徘徊效果,星星会随鼠标移动亮起来喔。
2。点击后关闭盘旋效果。
3。点击同一颗星星,星星可以随时换色。
具体代码展示:
& lt; !doctype html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> & lt;/title>
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1,最小规模=1,最大范围=1,user-scalable=不”/比;
& lt;/head>
& lt;风格类型=" text/css "比;
.stars {
空白:nowrap;}
text-align:中心;
margin-top: 20 px;
margin-bottom: 20 px;
}
李.stars {
显示:inline-block;
颜色:# ADADAD;
字体大小:40像素;
}
& lt;/style>
& lt; body>
& lt; ul类="星星"比;
& lt; li>★& lt;/li>
& lt; li>★& lt;/li>
& lt; li>★& lt;/li>
& lt; li>★& lt;/li>
& lt; li>★& lt;/li>
& lt;/ul>
& lt;脚本src=" https://www.yisu.com/js/common/jquery-git.js "祝辞& lt;/script>
& lt; script>
$(函数(){//为星星设置盘旋效果
var那么回事=false;
var beforeClickedIndex=1;
var clickNum=0;//点击同一颗星次数
(‘李’).hover(美元
函数(){
如果(!那么回事){
(美元)。css('颜色',' # F0AD4E ');
var指数=$ ().index ();
(var=0;我& lt;=指数;我+ +){
$('李:nth-child(' +我+ ')')。css('颜色',' # F0AD4E ');
}
}
}，
函数(){
如果(!那么回事){
$(“李”)。css('颜色',' # ADADAD ');
}
}
);//星星点击事件
$(李).click(函数(){
$(“李”)。css('颜色',' # ADADAD ');
那么回事=true;
var指数=$ ().index ();
(var i=1;我& lt;=指数+ 1;我+ +){
$('李:nth-child(' +我+ ')')。css('颜色',' # F0AD4E ');
}
如果(指数==beforeClickedIndex){//两次点击同一颗星星该星星颜色变化
clickNum + +;
如果(clickNum % 2==1) {
$('李:nth-child(' +(指数+ 1)+ ')”)。css('颜色',' # ADADAD ');
其他}{
$('李:nth-child(' +(指数+ 1)+ ')”)。css('颜色',' # F0AD4E ');
}
其他}{
clickNum=0;
beforeClickedIndex=指数;
}
});
});
& lt;/script>
& lt;/body>
& lt;/html>
以上所述是小编给大家介绍的JS实现评价的星星功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留的言,小编会及时回复大家的!
