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评价五星的更多相关文章

  1. 超简单的js评价小星星

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. Node.js初探之hello world

    昨天公司内部培训,主讲人王老板对Node.js评价很高,连用几个“变态”来形容,恰好今天周末,有时间来认识下Node.js,对一门新语言最好的认识,是让其输出“hello world”,今天我就利用N ...

  3. nodebeginer

    最近对node开始感兴趣,知乎上朴灵推荐入门书籍,goddy翻译的node beginner. 貌似大家对深入浅出node.js评价都不错,以后可以考虑入手看看. 一口气看完了node beginne ...

  4. js 实现仿 淘宝 五星评价 demo

    <style> @font-face { font-family: 'iconfont'; /* project id 247957 */ src: url('//at.alicdn.co ...

  5. jquery 五星评价(图片实现)

    1111 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  6. 五星评分效果 原生js

    五星评分在很多地方都可以用到,网上也有插件或者相应的代码,在这里我给大家提供一款我自己写的超级简单实用的五星评分代码,连图片都不需要 <!-- 评分start --> <ul> ...

  7. 前端js调用七牛制作评价页面案例

    一.需求 公司所有的上传页面都用七牛,前端不免要直接调用七牛的代码进行上传,以下是一个实现七牛上传的案例,制作一个常见的商品评价页面,页面需求很常见当上传到第五章图片的时候,上传按钮消失,上传需要显示 ...

  8. JS实现星级评价

    说明: 本方法采用了Jquery库,暂时检测兼容IE8版本.本示例的2种颜色的星星都是放入了一张png图片当中,当然还有其他的一些实现思路.本示例展示的情况是当前页面只有一个星级评价的情况. 思路: ...

  9. js五星好评

    一般我们在一些购物以及美食的网站都会看到五星好评之类的,一下是使用js制作的五星好评! <!DOCTYPE html> <html lang="en"> & ...

随机推荐

  1. Cocos开发小游戏如何实现微信排行榜

    当游戏开发进入尾声,要引入微信数据的时候,需要了解和微信相关的接口了. 关系数据链 开放数据域 相关接口如下: wx.getFriendCloudStorage() 获取当前用户也玩该小游戏的好友的用 ...

  2. Webwork【08】结合实战简析Controller 配置

    虽然现在 MVC 框架层出不穷,但做为 Struts 前身的 webwork. 其经典程度不亚于贝利之于足球,双 11 之于淘宝特卖. 本篇将结合 webwork controller 配置文件 xw ...

  3. 基于内容的推荐 java实现

    这是本人在cousera上学习机器学习的笔记,不能保证其正确性,慎重參考 看完这一课后Content Based Recommendations 后自己用java实现了一下 1.下图是待处理的数据,代 ...

  4. django之创建第8-1个项目-数据库之增删改查/数据库数据显示在html页面

    1.为test.DB数据库预先创建下面数据 1    张三    16    2015-01-02    12    李四    17    2015-01-04    13    王五    14  ...

  5. javascript 的 jasmine 的測试语句

    首先建立环境场景: 一般三个文件夹 lib jasmine的系统文件存放文件夹 spec 写測试用例的文件夹 src 存放源码的文件夹(被測对象) specRunner.html 測试入口文件. 入口 ...

  6. chrome配置文件校验初始化隐含參数的逆向

     这篇文章接上一篇文章进一步升华:花了4个小时获得该信息的计算方式 比方在 chrome文件夹下的\Chrome\User Data\Default文件夹下的Secure Preferences,须要 ...

  7. （原）ubuntnu中anaconda的g++提示crtbeginS.o:unrecognized relocation

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6950263.html 自从使用anaconda后,方便是方便了,也遇到了很多蛋疼的问题. 这次使用an ...

  8. hihocoder第220周-一道拧巴的题

    一.220周 题目链接 问题描述 键盘上有N个数字按键,每个按键只能按一次,每次可以按下多个键,请输出所有可能的按键情况. 输入一个整数N(N在1~8之间),输出全部的按键可能.例如:输入3,输出为 ...

  9. Oslo 相机 App

    https://itunes.apple.com/cn/app/osho/id1203312279?mt=8.它支持1:1,4:3,16:9多种分辨率拍摄,滤镜可在取景框的实时预览,拍摄过程可与滤镜实 ...

  10. struct timeval结构体 以及 gettimeofday()函数(转)

    struct timeval结构体 转载地址:http://blog.chinaunix.net/uid-20548989-id-2533161.html 该结构体是Linux系统中定义,struct ...