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 parameter

		var i = Math.floor((pos.x + 6)/13.2);
　　　　　　　　　 //star height is 21px

		if(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" onmouseover="mOver()"  onmouseout="mOut(this)" style="width:66px;height:21px">☆☆☆☆☆</div>

</body>

</html>

3.效果

4. 总结

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

　　

js实现星级评分效果（非常规5个li代码）的更多相关文章

  1. jQuery动态星级评分效果实现方法

    本文实例讲述了jQuery动态星级评分效果实现方法.分享给大家供大家参考.具体如下: 这里的jQuery星级评分代码,是大家都很喜欢的功能,目前广泛应用,本星级评分加入了动画效果,注意,如果要真正实现 ...

  2. 纯css实现星级评分效果

    效果 效果图如下,纯css实现超酷炫的星级评分动画效果 ​ 实现思路 5个类型为radio的input,label标签修改样式背景图为星星 label标签给每个星星鼠标停留时加注名字 点击星星有放大旋 ...

  3. js 实现星级评分

    最近的项目中有一个星级评分的需求,  自己就写了一下, 由于可能一个页面要用到多个,就采用了面向对象的写法. 用到的png图片也放到这里.    js要用到jquery. css: .sr-star{ ...

  4. js实现星级评分之方法一

    利用一个星级评分的小案例,来逐步封装js星级评分插件. 从最基础的js知识,通过一个小的demo,逐步学习js的面向对象知识. 从浅到深,逐步递进. 图片素材 <!DOCTYPE html> ...

  5. 原生JS实现-星级评分系统

    今天我又写了个很酷的实例:星级评分系统(可自定义星星个数.显示信息) sufuStar.star();使用默认值5个星星,默认信息 var msg = [........]; sufuStar.sta ...

  6. JS实现星级评分

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. js css 点亮 星级评分

    利用css 和 js 实现星级评分 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  8. 原生javascript星级评分

    写个最简单的原生js的星级评分: <div id="rank" class="pingfen"> <ul> <li>< ...

  9. js星级评分点击星级评论打分效果

    html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

随机推荐

  1. [noip][2017]

    Day1T1 30分思路: 倒着枚举答案z,用扩展欧几里得求解,如果能找到两个非负整数x,y使得ax+by=z则继续枚举,直到无解为止 100分: 最适用与考场上的做法,根据30分思路打表找规律. 3 ...

  2. javascript:location.reload()和location.replace()的区别，及对图片缓存的影响。

    有段时间没有清理IE的临时文件(缓存文件),在我清理的时候,我突然发现一个问题. 我打开的一个网站,图片默认缓存一个月的,但我发现,当我上传图片或删除图片之后,图片重新缓存,也就意味着,在我上传新图片 ...

  3. findbugs的使用

    我们通常都会在APP上线之后,发现各种错误,尤其是空指针异常,这些错误对于用户体验来说是非常不好的,但其实大部分的问题,我们都能够提前发现. 在编写代码的过程中,可能不会时时刻刻记得检查空的引用,还有 ...

  4. CentOS 7 系统的初化始配置

    安装好CentOS7系统后我们要进行初始设置来让我们的服务器方便管理与使用,但是发现在7以前的版本都能输入的命令不能输入了,去官网查查才发发生了很大的变化,关于有哪些变化的可以点击这里查看,初始配置的 ...

  5. Scala进阶之路-正则表达式案例

    Scala进阶之路-正则表达式案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 废话不多说,正则大家都很清楚,那在Scala如何使用正则了?我们直接上个案例,如下: /* @au ...

  6. 设计模式---单一职责模式之桥模式（Bridge）

    一:概念 Bridge模式又叫做桥接模式,其实基于类的最小设计原则,通过使用封装,聚合以及继承等行为来让不同的类承担不同的责任他的主要特点是吧抽象与行为实现分离开来,从而可以保持各部分的独立性以及一对 ...

  7. myeclipse设置，提高开发效率

    全局搜索,打开一个文件,却把另外一个给关掉. 解决办法: 在myeclipse中window-preferences-general-search找到第一行的一个选项reuse editors to ...

  8. 03-Windows Server 2016 IIS的安装与配置

    1. 打开服务器管理器,点击[添加角色和功能选项].        2. 进入“添加角色和功能向导”页面,点击下一步. 3. 安装类型选择[基于角色或基于功能的安装],点击下一步. 4. 进入服务器选 ...

  9. C++ 输入输出八进制、十进制、十六进制

    默认进制 cin or cout在默认情况下按照十进制输入输出 八进制 要使输入为八进制数,首先切换至八进制输入 cin >> oct; //接下里就可以输入八进制数了 cin >& ...

  10. Windows 与 Linux下关于端口不能访问的问题

    自己写的一个HTTP文件服务器,在端口 50000上监听HTTP连接请求,在Eclipse里面将程序正常地启动之后,能够在自己的机器上(Eclipse启动该程序的机器上)访问 50000端口,即Fil ...