js评价五星

1、图片（star.png）：

2、图片和html文件在同级目录

<html>

<head>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $('.difficulty i').click(function(){$(this).nextAll().removeClass('s');$(this).prevAll().addClass('s');$(this).addClass('s');});

  $('.difficulty i').mouseenter(function(){$(this).nextAll().removeClass('h');$(this).prevUntil('.s').addClass('h');$(this).addClass('h');}).mouseleave(function(){$(this).siblings().removeClass('h');$(this).removeClass('h');});

});

</script>

<style  type="text/css">

.difficulty { width:80px; height:14px; float:left; margin:7px 30px 0 0;}

.difficulty i{ width:15px; height:14px; float:left; background:url(star.png) no-repeat -30px 0; margin:0 1px 0 0; cursor:pointer;}

.difficulty i.h{ background:url(star.png) no-repeat -15px 0;}

.difficulty i.s{ background:url(star.png) no-repeat 0 0;}

</style>

</head>

<body>

<div class="difficulty"><i></i> <i></i> <i></i> <i></i> <i></i></div>

</body>

</html>

js评价五星的更多相关文章

超简单的js评价小星星
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
Node.js初探之hello world
昨天公司内部培训,主讲人王老板对Node.js评价很高,连用几个“变态”来形容,恰好今天周末,有时间来认识下Node.js,对一门新语言最好的认识,是让其输出“hello world”,今天我就利用N ...
nodebeginer
最近对node开始感兴趣,知乎上朴灵推荐入门书籍,goddy翻译的node beginner. 貌似大家对深入浅出node.js评价都不错,以后可以考虑入手看看. 一口气看完了node beginne ...
js 实现仿淘宝五星评价 demo
<style> @font-face { font-family: 'iconfont'; /* project id 247957 */ src: url('//at.alicdn.co ...
jquery 五星评价(图片实现)
1111 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...
五星评分效果原生js
五星评分在很多地方都可以用到,网上也有插件或者相应的代码,在这里我给大家提供一款我自己写的超级简单实用的五星评分代码,连图片都不需要  <ul> ...
前端js调用七牛制作评价页面案例
一.需求公司所有的上传页面都用七牛,前端不免要直接调用七牛的代码进行上传,以下是一个实现七牛上传的案例,制作一个常见的商品评价页面,页面需求很常见当上传到第五章图片的时候,上传按钮消失,上传需要显示 ...
JS实现星级评价
说明: 本方法采用了Jquery库,暂时检测兼容IE8版本.本示例的2种颜色的星星都是放入了一张png图片当中,当然还有其他的一些实现思路.本示例展示的情况是当前页面只有一个星级评价的情况. 思路: ...
js五星好评
一般我们在一些购物以及美食的网站都会看到五星好评之类的,一下是使用js制作的五星好评! <!DOCTYPE html> <html lang="en"> & ...

随机推荐

js instanceof 实现原理
function instanceof(left, right) { // 获得类型的原型 let prototype = right.prototype // 获得对象的原型 left = left ...
Android设备广告投放解决方案——大量网络图片、多个网络视频的轮播、缓存与更新
转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/7742996.html 一:业务场景基于Android系统的设备上投放广告,诸如:地铁广告屏.自助服务机器上的 ...
Struts2学习笔记三：深入Action
一:Action中获取参数值在Servlet中,我们通过doGet()/doPost()方法中的参数,获取request/response对象,然后提取参数值: 处理请求结束后,有数据需要携带返回客 ...
使用tar+pigz+ssh实现大数据的高效传输
以前我们跨主机拷贝大数据的时候,比如要拷贝超过100GB的mysql原始数据,我们通常的做法如下: 在源端打包压缩为tar.gz文件采用scp或者rsync等方式拷贝到目标主机在目标主机解压文件 ...
Java RSA （SHA1withRSA）签名和验签
static { try { SIGNATURE = Signature.getInstance("SHA1withRSA", "BC"); } catch ( ...
J2EE开发时的包命名规则，养成良好的开发习惯
代码编写规范目的:能够在编码过程中实现规范化,为以后的程序开发中养成良好的行为习惯.代码编写规范使用范围:J2EE项目开发.包命名规范:目的:包的命名规范应当体现出项目资源良好的划分 servlet类 ...
【php正则】php正则匹配UTF-8格式的中文汉字和【,】【，】【。】等符号
1.php正则匹配UTF-8格式的中文汉字和 [,][,][.]等符号 if (preg_match_all("/([\x{4e00}-\x{9fa5}]+((,)?)+((,)?)+(( ...
一行Python
只要理解了函数式编程,使用神奇的Lambda, 配合列表推导以及复杂一点的判断语句,任何的python 代码都可以转换成一行代码 1.打印九九乘法表 # 打印九九乘法表 print('\n'.join ...
JavaScript Math Object 数字
JavaScript Math Object Math Object The Math object allows you to perform mathematical tasks. Math is ...
【Linux】数据流重导向（后篇）
1)/dev/null 垃圾桶黑洞装置与特殊写法想象一下,如果我知道错误信息会发生,所以要将错误信息忽略掉而不显示或储存呢? 这个时候黑洞装置 /dev/null 就很重要了!这个 /dev/nul ...

js评价五星

js评价五星的更多相关文章

随机推荐

热门专题