js实现星级评分效果（非常规5个li代码）

1. 前言

此方案受到JS单行写一个评级组件启发，自己写了一个简单Demo。

功能有正常滑动，动态显示实心星星个数；当点击确认，则保持当前的实心星星个数；再移动时未点击，则离开后还是保持之前的状态。

此demo没有文字信息等提示，可以根据需要自行添加使用。

2. 代码

<!DOCTYPE html>
<html>
<head><title>Star Rating</title><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script type="text/javascript">var lastStarNum =0;function mOut(obj){obj.innerHTML="★★★★★☆☆☆☆☆".slice(5-lastStarNum,10-lastStarNum);}function mOver(){var obj = document.getElementById("starRate");var offsetTopVal  = obj.offsetTop;var pos=getPos(event);//star width is 13.2px,first star is offset 8px from left, near half of star, the star will just become black.//6 is adjust parametervar i = Math.floor((pos.x + 6)/13.2);　　　　　　　　　 //star height is 21pxif(i <= 5 & i > 0&& pos.y < offsetTopVal + 21 && pos.y > offsetTopVal){obj.innerHTML="★★★★★☆☆☆☆☆".slice(5-i,10-i);//console.log("MousePage(x,y)=("+pos.x+" ,"+pos.y+") starNumber="+Math.floor((pos.x+6)/13.2));$(obj).click(function(){lastStarNum = i;})}      }$('*').mousemove(function(){mOver();});function getPos(ev){var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;  return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};     }</script>
</head>
<body>
<div>Star Rating:</div>
<div id="starRate" οnmοuseοver="mOver()"  οnmοuseοut="mOut(this)" style="width:66px;height:21px">☆☆☆☆☆</div></body>
</html>

3.效果

4. 总结

亮点在于"★★★★★☆☆☆☆☆".slice(5-lastStarNum,10-lastStarNum) 的使用，而不需要网上大多数的星级评分系统那样是5个li元素，然后加个class来控制。

转载于:https://www.cnblogs.com/fanbi/p/7596102.html

js实现星级评分效果（非常规5个li代码）相关推荐

移动端星级评分效果的实现
星级评分在网页当中是经常用到的,今天特地用原生的JS实现了在移动端中的星级评分效果.由于在移动端中是没有鼠标事件的,所以在移动端中的星级评分效果的实现方式要与pc端稍微有点不同,就是要把相应的事件转成 ...
php mysql 星级评分_jQuery+PHP实现星级评分效果
码农公社 210.net.cn 210= 1024 10月24日一个重要的节日--码农(程序员)节 jQuery+PHP实现星级评分效果,评分功能比较常用,例如商城平台就会有个评分功能,本实例就 ...
用css实现星级评分效果
以前看到其他网站实现的实现的星级评分效果,没在意那么多,直到昨天做一个页面需要这个功能效果时,发现自己实现起来还是这么困难,折腾了半天才弄出来. 1. 其实主要是利用背景图片的切换位置来实现星级的效果 ...
html css星级评分,纯css实现星级评分效果
效果效果图如下星级评分实现思路: 5个类型为radio的input,abel标签修改样式背景图为星星 label标签给每个星星鼠标停留时加注名字点击星星有放大旋转的动画 dom结构用form ...
原生js实现星级评分
今天来实现下星级评分,后边并跟有评价文字. html代码如下: <span class="star"><b class="ct-star ic-star ...
js版星级评分入门级原生js实现
先理思路: 第一部分:HTML 第二部分:CSS 1.常规部分通配符 2.居中盒子部分 3. li标签(星星载体)部分 4.满意度盒子部分 5.评语盒子部分 6.星星改变位置部分第 ...
html 评分星级显示,星级评分效果.html
jquery鼠标滑过星星区域显示评论信息.评论星星打分jquery特效|jsfoot网页特效演示 @charset "utf-8"; /* reset */ *{margin:0 ...
星级评价的代码php,JavaScript_使用jQuery实现星级评分代码分享，前面有一篇原生js实现星级评 - phpStudy...
使用jQuery实现星级评分代码分享前面有一篇原生js实现星级评分 .可能覆盖面不是很广,现在给出一个jquery实现的星级评分. http://s.thsi.cn/js/jquery-1.7.2. ...
android自定义控件（星级评分）
一.背景视觉过来提了一个需求,要求完成一个星级评分控件,该控件中的星星的颜色需要实现渐变的效果,并且没有渐变的规律,也就是说各个星星的颜色需要不一样,效果如下: 二.问题分析星星控件对应的控件是a ...

js实现星级评分效果（非常规5个li代码）

js实现星级评分效果（非常规5个li代码）相关推荐

最新文章

热门文章