HTML+CSS实现五角星评分效果

最新推荐文章于 2024-08-22 14:38:51 发布
最新推荐文章于 2024-08-22 14:38:51 发布
阅读量1.9w 收藏 65
点赞数 10
分类专栏： html+css 文章标签： 五角星评分 js分配 js评分 js满意度
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014131617/article/details/90900981
版权

文章目录

1.效果：

在这里插入图片描述

技术栈 H5+CSS3+JQ+Bootstrap

2.HTML

<!DOCTYPE html>
<!--suppress CssUnusedSymbol, JSUnresolvedLibraryURL -->
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
    <title>评价</title>
    <link rel="stylesheet" type="text/css" href="../common/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/star-main.css" media="all" type="text/css"/>
    <script src="../common/js/jquery-1.10.2.js"></script>
<body>
<div class="container">
	
	
    <div class="page-header">
        <h2>开始评价</h2>
    </div>
    <form>
    	<div class="panel panel-default">
		  <div class="panel-heading" style="font-size: 2rem;">满意度&nbsp;<span style="color:red;">*</span>：</div>
		  <div class="panel-body">
		  	  		  <input name="starNum" id="starNum" type="hidden"/>
                      <div class="starability-container">
	                       <fieldset class="starability-slot">
		                        <input type="radio" id="rate_1_0_1_5" name="starLevel" value="5" /> 
		                        <label for="rate_1_0_1_5" title="5星"></label>
		                        <input type="radio" id="rate_1_0_1_4" name="starLevel" value="4" /> 
		                        <label for="rate_1_0_1_4" title="4星"></label>
		                        <input type="radio" id="rate_1_0_1_3" name="starLevel" value="3" /> 
		                        <label for="rate_1_0_1_3" title="3星"></label>
		                        <input type="radio" id="rate_1_0_1_2" name="starLevel" value="2" /> 
		                        <label for="rate_1_0_1_2" title="2星"></label>
		                        <input type="radio" id="rate_1_0_1_1" name="starLevel" value="1" /> 
		                        <label for="rate_1_0_1_1" title="1星"></label>
	                       </fieldset>
                      </div>
                      <span style="font-size: 2rem;line-height: 2.9rem;padding: 1rem;font-style: oblique;" id="starStr"></span>
		  </div>
		</div>

        
		<div class="page-header">
            <h3>备注：</h3>
        </div>
        <textarea id="customerEvaluationComment" name="customerEvaluationComment" 
        	class="form-control" rows="16" style="min-width: 90%;font-size: 3rem;height: 28rem !important;"></textarea>
		
		<br/>
		
		<p class="submit_btn">
			<button type="button" class="btn btn-primary btn-lg btn-block" onclick="evaluation();">
　　　　　　　提交　　　　　　　　
			</button>
			<button type="button" class="btn btn-default btn-lg btn-block"  onclick="closed();">
　　　　　　　关闭　　　　　　　　
			</button>
		</p>
    </form>
</div>
</body>


<script>
	
	
	$('[name="starLevel"]').bind("click",function(){
		console.log($(this)[0].value)
		$("#starNum").val($(this)[0].value)
		var starNum = $(this)[0].value;
		if(starNum == 1) $("#starStr").text("差");
		if(starNum == 2) $("#starStr").text("一般");
		if(starNum == 3) $("#starStr").text("优");
		if(starNum == 4) $("#starStr").text("良");
		if(starNum == 5) $("#starStr").text("满意");
	})
	
	

	// 提交评论
	function evaluation() {
		//评价等级

		var customerEvaluationLevel = $('#starNum').val();
		alert(customerEvaluationLevel);
		
		if (customerEvaluationLevel == undefined || customerEvaluationLevel == null || customerEvaluationLevel == '') {
			alert('请将满意度选好再提交哦！');
			return false;
		}
	}
	
	//关闭
	function closed() {
		window.close();
	}
	
  
</script>



<style>
	.page-header{
		padding-bottom: 1px !important;
    	margin: 18px 0 20px !important;
	}
	.submit_btn{
		width: 100%;
	}
	.textarea.form-control{
		height: 28rem !important;
	}
	h3{
		font-size: 22px;
	}
	
	h2{
		font-size: 19px;
	}
</style>
</html>

3.CSS

star-main.css 已经过压缩，可在
http://tool.chinaz.com/Tools/CssFormat.aspx 进行代码格式化

ul,li{list-style:none}a{text-decoration:none;color:#666}a:hover{text-decoration:none}.icon{width:30px;height:30px}.hover{background:#0f6c8d}.clickMask{position:absolute;left:0;top:0;right:-1px;bottom:0;z-index:999;display:none}.alarm{position:fixed;top:240px;margin-left:627px;font-size:26px;color:#f90}.clearFix:after{content:'';display:block;clear:both}i{font-style:normal}#active{font-size:12px;color:#289cd5;font-weight:700}.course_main{width:100%;height:100%}.top{width:100%;height:90px;background:#fff;color:#000}.top_nr{width:1200px;margin:0 auto}.top_left{height:90px;float:left}.top_left i{width:180px;height:90px;display:block;float:left;background:../images/student/logo.png) no-repeat center;}.top_left h1{line-height:100px;display:block;float:left;font-size:28px;}.top_right{height:90px;float:right;line-height:90px;padding-right:10px;}.top_right a{padding:0 10px;color:#000;font-size:14px;display:block;float:left;}.top_right a span{padding-right:5px;display:block;float:left;}.top_right a i{color:#f00;padding:0 5px;display:block;float:left;}.top_right a b{display:block;float:left;}.top_right a img{margin-top:30px;display:block;float:left;}.nav{width:100%;height:50px;background:#389fc3;margin-top:15px;}.nav_nr{width:1200px;height:50px;line-height:50px;margin:0 auto;font-size:14px;}.nav_nr ul{display:block;margin:0;}.nav_nr ul li{height:50px;display:block;float:left;}.nav_nr ul li a{color:#fff;display:block;height:50px;float:left;padding:0 20px;}.nav_nr ul li a:hover{text-decoration:none;}.nav_nr i{color:#fff;display:block;float:left;}.fy{width:100%;height:50px;margin-left:15px;margin-top:10px;float:left;}.easyPieChart{position:relative;text-align:center;}.easyPieChart canvas{position:absolute;top:0;left:0;}.foot{width:100%;height:50px;clear:both;}.test_main{width:1320px;margin:15px auto 0;overflow:hidden;}.nr_nav{width:120px;height:1px;float:left;}.nr_nav1{width:120px;position:fixed;top:16px;z-index:1000;overflow:hidden;}.ceping_title{height:45px;line-height:45px;font-size:16px;font-weight:bold;background-color:#FFF;text-align:left;}.ceping_students{text-align:left;line-height:30px;}.ceping_students span{display:block;border-top:1px solid #F5F5F5;}.nr_left{width:900px;height:100%;float:left;position:relative;}.test{width:100%;border:1px solid #e4e4e4;text-align:left;float:left;}.test_title{width:900px;height:45px;line-height:45px;background-color:#f7f7f7;position:fixed;bottom:0;z-index:1000;}.title_icon{float:left;height:45px!important;}.first_title{float:left;}.test_title p{padding:0 20px;display:block;float:left;}.test_time{color:#389FC3;line-height:45px;}.test_time i{font-size:20px;height:45px;line-height:40px;display:block;float:left}.test_time b{font-size:16px;height:45px;display:block;margin-left:10px;}.test_dtk{line-height:45px;}.test_dtk i{font-size:22px;height:45px;line-height:45px;display:block;float:left;color:#389fc3;}.test_dtk span{font-size:14px;height:45px;display:block;float:left;margin-left:10px;}.test_title font{width:80px;height:45px;display:block;float:right;text-align:center;}.test_title font a{background:#389fc3;border:none;display:block;width:80px;height:45px;cursor:pointer;color:#fff;font-size:16px;font-weight:bold;}.test_title font a:active{background:#79aef0;}.test_content_title{background:#F2F6F9;height:45px;line-height:45px;font-size:16px;font-family:黑体;}.test_content{width:100%;height:auto;}.test_content_title h2{padding:0 30px;font-size:16px;font-weight:normal;display:block;float:left;}.test_content_title p{padding:0 10px;height:40px;line-height:40px;background:#389fc3;color:#fff;border-radius:30px;display:block;float:left;margin-top:5px;margin-left:18px;}.test_second_title{padding:0 30px;font-size:16px;font-weight:normal;display:block;height:45px;line-height:45px;border-bottom:1px solid #f1efef;color:#389Fc3;}.test_content_nr{width:100%;}.test_content_nr>ul>li{width:100%;border-bottom:5px solid #efefef;padding-top:10px;}.test_content_nr_tt{width:85%;height:auto;line-height:32px;margin:0 auto;border-bottom:1px solid #e4e4e4;}.test_content_nr_tt i{width:25px;height:25px;line-height:25px;text-align:center;display:block;float:left;background:#5d9cec;border-radius:50%;margin-left:-50px;color:#fff;margin-top:8px;font-size:16px;}.test_content_nr_tt span{padding:0 8px;}.test_content_nr_tt font{font-size:14px}.test_content_nr_tt b{display:block;float:right;margin-right:-50px;color:#f48c27;font-size:20px;}.test_content_nr_main{width:85%;margin:0 auto;padding:10px 0;height:auto;}.option{line-height:32px;display:block;background:#fff;color:#666;}.option:hover{background:#e4e4e4;}.option input{width:20px;height:20px;display:block;float:left;margin:7px 10px 0 0;}.option label{height:auto;display:block;}.test_more_nr_main{width:85%;margin:0 auto;padding:10px 0;}.multiple{width:100%;height:40px;line-height:40px;display:block;background:#fff;margin-bottom:3px;}.multiple:hover{background:#e4e4e4;}.multiple dd input{width:20px;height:20px;display:block;float:left;margin:10px 10px 0 0;}.multiple dd label{width:725px;height:40px;display:block;float:left;}.test_click{background:#7aaff3;}.test_click a{color:#fff;}.nr_right{width:280px;height:100%;float:right;}.nr_rt_main{width:100%;height:auto;}.rt_nr1{width:280px;position:fixed;top:15px;z-index:1000;}.rt_nr1_title{width:280px;height:45px;line-height:45px;background:#f3f3f3;}.rt_nr1_title h1{width:50%;height:45px;background:#389fc3;text-align:center;font-size:14px;display:block;float:left;color:#fff;}.rt_nr1_title h1 i{padding:0 5px;font-size:14px;font-weight:normal;}.rt_nr1_title p{width:130px;height:43px;padding-right:8px;border:1px solid #e4e4e4;border-left:0;display:block;float:right;}.rt_nr1_title p i{margin-left:10px;}.rt_content{width:278px;height:100%;border:1px solid #e4e4e4;border-top:0;}.rt_content_tt{width:95%;height:40px;line-height:40px;margin:0 auto;border-bottom:1px solid #e4e4e4;}.rt_content_tt h2{width:100%;font-size:14px;display:inline-block;text-align:left;}.rt_content_tt p{width:100px;display:inline-block;}.rt_content_tf{width:95%;height:30px;line-height:30px;margin:0 auto;text-align:left;}.answerSheet ul{padding:10px;text-align:left;}.answerSheet li{display:inline-block;margin-bottom:5px;height:30px;width:30px;line-height:30px;text-align:center;border:1px solid #e4e4e4;margin-right:5px;}.answerSheet li a{display:block;}.answerSheet li:hover{color:#389fc3;border-color:#389fc3;}.rt_more{width:278px;height:100%;border:1px solid #e4e4e4;border-top:0;}.rt_more_tt{width:95%;height:40px;line-height:40px;margin:0 auto;border-bottom:1px solid #e4e4e4;}.rt_more_tt h2{width:150px;font-size:14px;display:inline-block;}.rt_more_tt p{width:100px;display:inline-block;}.rt_more_nr ul{padding:10px;text-align:left;}.rt_more_nr ul li{display:inline-block;margin:5px;height:30px;width:30px;line-height:30px;text-align:center;border:1px solid #e4e4e4;}.star_content{margin:5px 0;padding:5px 0;border-top:1px solid #f5f5f5;border-bottom:1px solid #f5f5f5;background:#F5F5F5;}.textarea textarea{width:100%;min-width:100%;max-width:100%;height:80px;border:none;font-size:14px;outline:none;padding:10px 0;}.description{color:#47cbff;}.hasBeenAnswer{background:#5d9cec;color:#fff;}.item{width:150px;height:150px;float:left;position:relative;margin:20px;margin-left:0;}.addImg{width:150px;height:150px;position:absolute;left:0;top:0;z-index:2;cursor:pointer;}.preview,.preBlock{position:absolute;display:block;width:150px;height:150px;left:0;top:0;}.delete{width:30px;position:absolute;right:-30px;top:-15px;cursor:pointer;display:none;}.preBlock img{display:block;width:150px;height:150px;}.upload_input{display:block;width:0;height:0;-webkit-opacity:0.0;-moz-opacity:0.0;-khtml-opacity:0.0;opacity:.0;filter:alpha(opacity=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);}.image_title{font-size:16px;}.starability-slot{display:block;position:relative;width:150px;min-height:35px;padding:0;border:none}.starability-slot>input{position:absolute;margin-right:-100%;opacity:0}.starability-slot>input:checked~label,.starability-slot>input:hover~label{background-position:0 -30px;transition:background-position .7s}.starability-slot>label{position:relative;display:inline-block;float:right;width:30px;height:30px;color:transparent;cursor:pointer;background-image:url(../img/icons.png);background-repeat:no-repeat}.starability-title,.starability-container{float:left;}.starability-title{height:35px;line-height:35px;margin:0 10px;font-size:16px;}.hide{display:none;}.show{display:block;}}

4.图片

icons.png

在这里插入图片描述
右键保存，放到img目录下让css读取的到即可!

5.另一种样式

在这里插入图片描述

代码：

<!DOCTYPE html>
<!--suppress CssUnusedSymbol, JSUnresolvedLibraryURL -->
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
    <title>评价</title>
    <link rel="stylesheet" type="text/css" href="../common/css/bootstrap.min.css">
    <link rel="stylesheet" href="../common/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/star-main.css" media="all" type="text/css"/>
    <script src="../common/js/jquery-1.10.2.js"></script>
<body>
<div class="">
	
	
    <div class="page-header" style="text-align: center;">
        <h2>开始评价</h2>
    </div>
    <form>
    	
    	<div class="evalBody">
    		
    		<div class="manyidu">
    			 <span style="font-size: 2rem;line-height: 2.9rem;padding: 1rem;" id="starStr">满意度</span>
    			 <div class="panel-body" style="text-align: center; margin-left: 23%;">
		  	  		  <input name="starNum" id="starNum" type="hidden"/>
                      <div class="starability-container">
	                       <fieldset class="starability-slot">
		                        <input type="radio" id="rate_1_0_1_5" name="starLevel" value="5" /> 
		                        <label for="rate_1_0_1_5" title="5星"></label>
		                        <input type="radio" id="rate_1_0_1_4" name="starLevel" value="4" /> 
		                        <label for="rate_1_0_1_4" title="4星"></label>
		                        <input type="radio" id="rate_1_0_1_3" name="starLevel" value="3" /> 
		                        <label for="rate_1_0_1_3" title="3星"></label>
		                        <input type="radio" id="rate_1_0_1_2" name="starLevel" value="2" /> 
		                        <label for="rate_1_0_1_2" title="2星"></label>
		                        <input type="radio" id="rate_1_0_1_1" name="starLevel" value="1" /> 
		                        <label for="rate_1_0_1_1" title="1星"></label>
	                       </fieldset>
                      </div>
		  		 </div>
    		</div>
    		
    		
    		<!--备注输入框-->
    		<div class="beizu">
			   	<textarea class="beizu-text" id="customerEvaluationComment" 
			   		name="customerEvaluationComment"
			   		placeholder="写点备注吧..."
	        	class="form-control" rows="16" style=""></textarea>
    		</div>
    		
    		
    		<!--按钮-->
    		<div class="anniu">
    				<button type="button" class="btn btn-primary btn-lg btn-block" 
    					style="margin-bottom: 0.8rem !important;"
    					onclick="evaluation();">提交
    				</button>
    				
					<button type="button" class="btn btn-default btn-lg btn-block"  
						onclick="closed();">关闭</button>
		    		</div>
    		</div>
		<div class="evalDe1"></div>
		<div class="evalDe2"></div>
		
    </form>
</div>
</body>
<script src="../utils/conmmonConfig.js"></script>
<script src="../utils/btwsdk.js"></script>
<script src="../utils/btwApiUtil.js"></script>
<script>
	
	
	$('[name="starLevel"]').bind("click",function(){
		$("#starNum").val($(this)[0].value)
		var starNum = $(this)[0].value;
		if(starNum == 1) $("#starStr").text("差");
		if(starNum == 2) $("#starStr").text("一般");
		if(starNum == 3) $("#starStr").text("优");
		if(starNum == 4) $("#starStr").text("良");
		if(starNum == 5) $("#starStr").text("满意");
	})
	
	
	var urlString = window.location.href;
	//当前会话id
	var sessionId = urlString.split('?sessionId=')[1];
	
	// 提交评论
	function evaluation() {
		//评价等级
		var customerEvaluationLevel = $('#starNum').val();
		if (customerEvaluationLevel == undefined || customerEvaluationLevel == null || customerEvaluationLevel == '') {
			alert('请将满意度选好再提交哦！');
			return false;
		}
	
	}
	
	//关闭
	function closed() {
		window.close();
	}
  
</script>



<style>
	
	
	body{
		background-color: rgba(246, 246, 246, 0.16) !important;
	}
	
	/*底部效果*/
	.evalDe1{
		border: 1px solid white;
	    height: 0.7rem;
	    width: 70%;
	    margin: 0 auto;
	    z-index: -5;
	    opacity: 0.8;
	    box-shadow: 0px 0px 7px -2px grey;
	    background-color: white;
	}
	.evalDe2{
		border: 1px solid white;
	    height: 0.5rem;
	    width: 60%;
	    margin: 0 auto;
	    z-index: -5;
	    opacity: 0.9;
	    box-shadow: 0px 0px 30px 3px #e2e2e2;
    	background-color: white;
	}
	/*按钮颜色*/
	.btn-block{
		width: 80% !important;
		margin: 0 auto !important;
	}
	/*满意主体*/
	.evalBody {
	    width: 29rem;
	    height: 44rem;
	    border: 1px solid white;
	    margin: auto;
	    margin-top: 3rem;
	    box-shadow: 1px 0px 21px -8px grey;
	}
	/*满意度*/
	.manyidu {
	    text-align: center;
	    font-size: 21px;
	    margin-top: 3rem;
	}
	/*备注文本*/
	.beizu-text{
		font-size: 1.7rem;
	    height: 12rem !important;
	    width: 79%;
	    border: 1px solid #f0eaea;
	    box-shadow: 4px 1px 22px -5px #909090;
	    margin-top: 1rem;
	    margin-left: 3rem;
	    margin-bottom: 2rem;
	    opacity: 0.9;
	    border-radius: 1rem;
	    outline: none;
	    padding: 0.9rem;
	}

	.page-header{
		padding-bottom: 1px !important;
    	margin: 18px 0 20px !important;
	}
	.submit_btn{
		width: 100%;
	}
	.textarea.form-control{
		height: 28rem !important;
	}
	h3{
		font-size: 22px;
	}
	h2{
		font-size: 19px;
	}
	.panel-body{
		padding: 8px;
	}
</style>
</html>
coder阿龙
关注
专栏目录
HTML星级评价JS
10-16
这个星级评价类似于美团外卖或者淘宝的评价，总五星评价。运用JS技术编写
html点击五角星评分,CSS3 星星打分
weixin_29607637的博客
06-21 347
cssbody {text-align: center;background-color: #34495e;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}h1 {color: #FFF;font-weight: 500;padding: 30px;text-shadow: 0 3px 3px #2b3c4e;}input ...
css3实现五角星，超级简单
最新发布
周金鱼啊
08-22 131
【代码】css3实现五角星，超级简单。
进阶篇之纯css+字体实现五角星（半颗星）评分
ai09855的博客
07-28 305
1.前言之前写了一篇实现五角星打分效果的demo。这个demo用来实现打分效果绰绰有余，那么有时候我们在统计评分的时候，就会有半颗星或者1/3颗星星这样的那要如何实现呢？来来来，纯字体+css实现！2.详情1.下载字体webFontIcon我不会把压缩文件上传，会的童鞋可以教教我，感谢赐教，这样我就可以把字体上传以供大家下载了。2.css样式 .clea...
css+html+js实现五角星评分
weixin_43833100的博客
02-23 467
效果图： css： <style> .evaluation { text-align: center; } .title_15mhc { font-size: 26px; color: #252a30; } .stars { margin: auto; width: 54%;
html五角星代码,五角星评分系统.html
weixin_29410959的博客
06-10 1198
五角星评分案例* {padding: 0;margin: 0;}.comment {font-size: 80px;color: orangered;margin-left:600px;margin-top:200px;}.comment li {float: left;cursor: pointer;}ul {list-style: none;}//鼠标放上去当前的li和之前的所有li内容全变成...
用 HTML 和 CSS 制作的五角星评分小部件
qq_25503949的博客
05-22 680
使用 HTML & CSS 制作左侧滑动导航条
html点击五角星评分,如何基于jQuery实现五角星评分
weixin_29712031的博客
06-21 375
1. 鼠标经过li的时候，当前的位置是实心五角星，前面的是实心。当前位置后面的是空心。注意此处不能完全用链式编程写到底2. 鼠标离开，comment的所有孩子变为空心五角星。额外，找到current, 让current和它的前面都是实心。3. 点击li的时候，当前的位置增加个current的class, 其余位置移除current代码如下五角星评分案例* {padding: 0;margin: 0...
php 星星评级,详解JavaScript实现星星等级评价功能
weixin_39752215的博客
03-10 347
这篇文章主要为大家详细介绍了JavaScript实现星星等级评价功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下本文实例为大家分享了js星星等级评价的具体代码，供大家参考，具体内容如下效果图：Document.container{float:left;}.score{float: left;position: relative;width: 100px;margin-top: 5px;mar...
css实现五角星评分
weixin_43066287的博客
07-04 392
css实现五角星评分
html评价星星,javascript 星星评价(转)
weixin_35726374的博客
06-16 239
星星打分.evalInfo{font-size: 13px;font-family: '宋体';margin: 3 5px;}/** 用星星的方式来打分， **/function evalSorce(rootEle, oEvent, targetObjId,attitudeTitleId) {var imgs = rootEle.getElementsByTagName("img");//var ...
js+html星级评分（支持半星）
11-21
javascript+html星级评分（支持半星）,通过一个下拉选择框控制星星的多少。
简易 js星星评分html代码
03-09
打开index就可以看到效果，引用boostrap是因为用了他的图标！！！
打分五角星html制作,css简单实现五角星评分、点赞收藏、展示评分（半颗星、1/3颗星）...
weixin_31011587的博客
07-07 3209
css简单实现五角星评分、点赞收藏、展示评分(半颗星、1/3颗星)1. 前言之前做的好几个项目中，都会遇到打分，评分，点赞这样的需求，写了很多次，每次需要再写的时候，就会翻出之前写过的代码，然后 copy 过来。总觉得这样的话没有进步，没有把知识放进脑袋里，所以，自己花了 2 个小时，把这三种类型的需求自己写了 demo 并做了演示，这样的话，感觉一字一字敲出来的代码，确实是到了脑袋里了。之前一直...
怎么在html写五角星,html怎么显示五角星 几分给几个五角星
weixin_35910782的博客
06-18 498
#star-five{margin:50px0;position:relative;display:block;color:red;width:0px;height:0px;border-right:100pxsolidtransparent;border-bottom:70pxsolidred;border-left:100pxsolidtranspar...
php做五星评价系统,js实现五星评价功能的实例
weixin_35943776的博客
03-10 538
本文主要介绍了js实现五星评价功能和印象评价功能的实例，具有很好的参考价值。下面跟着小编一起来看下吧效果图：代码如下：五星评价@font-face {font-family: 'iconfont'; /* project id 247957 */src: url('//at.alicdn.com/t/font_wkv6intmx8cnxw29.eot');src: url('//at.alicdn...
五颗星评论效果实现：jquery+css
weixin_30576859的博客
10-29 226
今天说要做个星星评论的效果，想想不难吧，就试着写下； 通过网上搜索加自己想法，得到的思路是： 首先是排列好五个星星啦，接着则是css建立两个li的class分别表示选取与未选取（这样表述貌似不大对）； 主要是在未确定打分前，鼠标移到那颗星星，前面的跟本星星一起被亮了，其它的继续黯淡； 然后一旦确定点击，该情形将一直保持着直到下一个点击产生才改变亮与暗的情况。不过现在遇到的问题是一旦点击了之...
用html css实现五角星,用CSS画五角星
weixin_42442653的博客
06-16 1775
五角星#star-five {margin: 50px;position: relative;display: block;color: red;width: 0;height: 0;border-right: 100px solid transparent;border-bottom: 70px solid red;border-left: 100px solid transparent...
html评价星星,jq实现星星评价
weixin_29536515的博客
06-16 184
htmljqcssjq源码$(function () {// 小星星$(".appr_start span").click(function () {$(this).addClass("on");$(this).prevAll().addClass("on");$(this).nextAll().removeClass("on");var sta_index = $(this).index();i...
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

coder阿龙

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值