上回说到js css点亮星星 换种方式来点亮

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rating</title>
</head>
<style >
*{margin:0;padding: 0}
div{width:500px; padding:100px;padding:0 auto;} </style> <body>
<div class="rating" id="rating">
<img class="rating-item" src="http://images.cnblogs.com/cnblogs_com/tonnytong/769928/o_off.png" alt="" title="很差">
<img class="rating-item" src="http://images.cnblogs.com/cnblogs_com/tonnytong/769928/o_off.png" alt="" title="差">
<img class="rating-item" src="http://images.cnblogs.com/cnblogs_com/tonnytong/769928/o_off.png" alt="" title="一般">
<img class="rating-item" src="http://images.cnblogs.com/cnblogs_com/tonnytong/769928/o_off.png" alt="" title="好">
<img class="rating-item" src="http://images.cnblogs.com/cnblogs_com/tonnytong/769928/o_off.png" alt="" title="极好">
</div>
</body>
</html>
<script type="text/javascript" src="https://files.cnblogs.com/files/tonnytong/___jquery-1.12.0.min.js"></script>
<script type="text/javascript">
(function($){
var ratingFunc = function(elWrap,options){
this._opts = {
num:1
};
this._opts = $.extend(this._opts,options);
this._el = $(elWrap);
this._ratingItems = this._el.find(".rating-item"); this._lightOn(this._opts.num);
this._bindEvent();
}; $.extend(ratingFunc.prototype,{
_lightOn: function(num){
var that = this;
that._ratingItems.each(function(index){
var $this = $(this)
, intNum = parseInt(num);
$this.attr("src","http://images.cnblogs.com/cnblogs_com/tonnytong/769928/o_off.png");
if((index +1) <=num)
{
$this.attr("src","http://images.cnblogs.com/cnblogs_com/tonnytong/769928/o_on.png");
if(intNum != num){
if(index +1 == intNum){
$this.attr("src","http://images.cnblogs.com/cnblogs_com/tonnytong/769928/o_half-on.png");
}
}
}
})
},
_calculateNum: function(obj,eventObj)
{
var that = this; var imgWith = obj.width()
, offset = obj.offset();
if((eventObj.pageX-offset.left) < (0.5*imgWith)){
that._opts.num = obj.index()+1+0.5;
}else{
that._opts.num = obj.index()+1;
}
},
_bindEvent: function(){
var that = this;
that._ratingItems.on("click",function(e){
that._calculateNum($(this),e);
that._lightOn(that._opts.num);
}).on("mousemove",function(e){
that._calculateNum($(this),e);
that._lightOn(that._opts.num);
})
}
}) $.ratingFunc = function(el,options){
return new ratingFunc(el,options);
};
})(jQuery); $.ratingFunc("#rating",{num:3.5}); </script>

  

粘贴代码

js css div 点亮半颗星星(二)的更多相关文章

  1. js+css+div的点击后显示或者隐藏

    <html ><head><meta charset=utf-8 /><title>JS Bin</title></head>  ...

  2. 系列文章--精通CSS.DIV网页样式与布局学习

    精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布 ...

  3. 进阶篇之纯css+字体实现五角星(半颗星)评分

    1.前言 之前写了一篇实现五角星打分效果的demo.这个demo用来实现打分效果绰绰有余,那么有时候我们在统计评分的时候,就会有半颗星或者1/3颗星星这样的那要如何实现呢?来来来,纯字体+css实现! ...

  4. css简单实现五角星评分、点赞收藏、展示评分(半颗星、1/3颗星)

    1.前言 之前做的好几个项目中,都会遇到打分,评分,点赞这样的需求,写了很多次,每次需要再写的时候,就会翻出之前写过的代码,然后copy过来.总觉得这样的话没有进步,没有把知识放进脑袋里,所以,自己花 ...

  5. JS/CSS缓存杀手——VS插件

    背景 前些天去考科目二,感觉经历了一场不是高考却胜似高考的考试(10年前的5分之差, 还是难以释怀)!    一行八人,就我学的时间最少(4天,8人一辆车),教练都觉得我肯定还得再来一次! 靠着运气和 ...

  6. js 控制Div循环显示 非插件版

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

  7. 勤能补挫-简单But易错的JS&CSS问题总结

    错误频率较高的JS&CSS问题 勤能补拙,不管是哪门子技术,在实践中多多总结,开发效率慢慢就会提升.本篇介绍几个经常出错的JS&CSS问题,包括事件冒泡.(使用offset.scrol ...

  8. CSS+DIV两栏式全屏布局

    在网上找了很久,发现大部分都是固定宽度设置两栏,全屏情况下的布局很少.最后终于完成了,写出来备查,也供大家参考. <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  9. JS控制DIV隐藏显示

    转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...

随机推荐

  1. jquery表单数据反序列化为字典

    .前台代码 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1 ...

  2. Web API集成Azure AD认证

    1.声明的介绍 基于角色的授权管理,适用于角色变化不大,并且用户权限不会频繁更改的场景. 在更复杂的环境下,仅仅通过给用户分配角色并不能有效地控制用户访问权限. 基于声明的授权有许多好处,它使认证和授 ...

  3. What’s the Difference Between a Value Provider and Model Binder?

    ASP.NET MVC 3 introduced the ability to bind an incoming JSON request to an action method parameter, ...

  4. PostgreSQL 速查、备忘手册 | PostgreSQL Quick Find and Tutorial

    PostgreSQL 速查.备忘手册 作者:汪嘉霖 这是一个你可能需要的一个备忘手册,此手册方便你快速查询到你需要的常见功能.有时也有一些曾经被使用过的高级功能.如无特殊说明,此手册仅适用于 Linu ...

  5. C# 的 Task、Thread、ThreadPool 之间有什么异同?

    Thread就是Thread,需要自己调度,适合长跑型的操作. ThreadPool是Thread基础上的一个线程池,目的是减少频繁创建线程的开销.线程很贵,要开新的stack,要增加CPU上下文切换 ...

  6. CentOS 用户/组与权限

    useradd:添加用户 useradd abc,默认添加一个abc组 vipw:查看系统中用户 groupadd:添加组groupadd ccna vigr:查看系统中的组 gpasswd:将用户a ...

  7. angular 样式属性绑定

    <button (click)="onClick($event)">点我</button> <input type="> <ta ...

  8. 从头开始学eShopOnContainers——Visual Studio 2017环境配置

    一.安装和配置Docker环境 1.安装Docker CE for Windows 从官方网站下载并安装,https://docs.docker.com/docker-for-windows/inst ...

  9. IEnumerable、GetEnumerator、IEnumerator之间的关系。

    了解了这些也就明白了遍历的原理,晚安. using System; using System.Collections; public class Person { public Person(stri ...

  10. 解决低版本Xcode不支持高版本iOS真机调试的问题

    1.现象截图 Could not locate device support files. This iPhone 6s is running iOS 11.1 (15B93), which may ...