js五角星评分
跑马的汉子睡眠不足 人气:0效果图:
css:
<style> .evaluation { text-align: center; } .title_15mhc { font-size: 26px; color: #252a30; } .stars { margin: auto; width: 54%; } .star { font-size: 30px; color: #FF8000; margin-right: 5px; -webkit-transition: all .3s; cursor: pointer; } .hs { color: #ccc; } </style>
html:
<div class="evaluation"> <div class="title_15mhc" id="myd_box"> 非常满意 </div> <div style=" width:100%;text-align:center;"> <div class="stars"> <span data-value="1" class="star">★</span> <span data-value="2" class="star">★</span> <span data-value="3" class="star">★</span> <span data-value="4" class="star">★</span> <span data-value="5" class="star">★</span> </div> </div> </div>
js:
<script type="text/javascript" src="/jquery-1.9.1.min.js"></script> <script> $(function () { var isclick = false; $(".stars").hover(function () { }, function () { if (isclick) { var level = $("#Level").val(); if (level > 0) { $(".stars span").eq(level - 1).nextAll().addClass('hs'); } } }); $(".stars span").hover(function () { if (isclick) { $(this).removeClass('hs'); } $(this).nextAll().addClass('hs'); }, function () { if (!isclick) { $(this).removeClass('hs'); $(this).prevAll().removeClass('hs'); $(this).nextAll().removeClass('hs'); } }); $(".stars span").click(function () { $(this).removeClass('hs'); $(this).prevAll().removeClass('hs'); var value = $(this).data("value"); $("#Level").val(value); switch (value) { case 1: $("#myd_box").html("非常不满意"); break; case 2: $("#myd_box").html("不满意"); break; case 3: $("#myd_box").html("基本满意"); break; case 4: $("#myd_box").html("满意"); break; default: $("#myd_box").html("非常满意"); break; } isclick = true; }); }); </script>
加载全部内容