jQuery带文字评论的动态星星评分效果代码

来源:https://www.sucaihuo.com/js/2683.html 2017-08-09 23:58浏览(1123) 收藏

一款jQuery带文字评论的动态星星评分效果代码,鼠标悬停在星星上面时,除了有对应的分值信息外,下面还会有多个文字评论内容供选择,整体效果还时挺不错的,喜欢的童鞋请收下吧。
jQuery带文字评论的动态星星评分效果代码
分类:导航菜单 > 图标导航 难易:初级
查看演示 下载资源: 26

手机扫码访问:

下载资源 下载积分: 20 积分

页面的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>
<!--代码结束-->
评论6
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 3007547952

  • 头像 5楼
    03-29 16:01
    h***x
    感谢分享,拿来就能用
  • 头像 4楼
    12-28 17:40
    宅***总
    有半个星星就更好
  • 头像 3楼
    11-12 10:25
    f***r
    要是有半个星星就更好了
    1
    病***猫:

    嗯呢

  • 头像 板凳
    08-11 08:57
    胡***胡
    自从来了素材火就爱上这里了,变相打广告呢哈哈
  • 头像 椅子
    08-10 23:04
    一***泉
    这个平台太棒了
  • 头像 沙发
    08-10 15:07
    1***2
    网上的都敢不上这里全
1 2