一款jQuery带文字评论的动态星星评分效果代码,鼠标悬停在星星上面时,除了有对应的分值信息外,下面还会有多个文字评论内容供选择,整体效果还时挺不错的,喜欢的童鞋请收下吧。
页面的head部分,需引入CSS样式文件、jQuery库和script.js插件,代码如下:
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
页面的body部分,div容器里放入ul和多个li标签,代码如下:
<!--代码开始-->
<div class="xzw_starSys">
<div class="xzw_starBox">
<ul class="star stars">
<li><a href="javascript:void(0)" title="1" class="one-star">1</a></li>
<li><a href="javascript:void(0)" title="2" class="two-stars">2</a></li>
<li><a href="javascript:void(0)" title="3" class="three-stars">3</a></li>
<li><a href="javascript:void(0)" title="4" class="four-stars">4</a></li>
<li><a href="javascript:void(0)" title="5" class="five-stars">5</a></li>
</ul>
<div class="current-rating showb"></div>
</div>
<!--评价文字-->
<div class="description"></div>
<!--评价选项-->
<div class="option">
<ul class="option-con clearfix">
<li><a href="">全是乱码</a></li>
<li><a href="">标题和内容不符</a></li>
<li><a href="">答案很多错误</a></li>
<li><a href="">没有配图</a></li>
<li><a href="">没有答案</a></li>
</ul>
<ul class="option-con clearfix" style="display:none">
<li><a href="">扫描版有些模糊</a></li>
<li><a href="">图片不清晰</a></li>
<li><a href="">答案不完整</a></li>
<li><a href="">没有解析</a></li>
<li><a href="">教材版本不符</a></li>
</ul>
<ul class="option-con clearfix" style="display:none">
<li><a href="">凑活能用</a></li>
<li><a href="">重复率高</a></li>
<li><a href="">没有排版</a></li>
<li><a href="">解析有错误</a></li>
<li><a href="">资料不够丰富</a></li>
</ul>
<ul class="option-con clearfix" style="display:none">
<li><a href="">不太需要编辑</a></li>
<li><a href="">资料有深度</a></li>
<li><a href="">资料有创新</a></li>
<li><a href="">还不错呦</a></li>
<li><a href="">资料很合适</a></li>
</ul>
<ul class="option-con clearfix" style="display:none">
<li><a href="">完美!</a></li>
<li><a href="">拿来就能用</a></li>
<li><a href="">精心制作</a></li>
<li><a href="">解析非常好</a></li>
<li><a href="">编排精美</a></li>
</ul>
</div>
<div class="prompt">请为资料打星</div>
</div>
<!--代码结束-->
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791