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. 使用Laya引擎开发微信小游戏

    在支持微信小游戏的游戏引擎中,Cocos,Egret,Laya都对小游戏的开发提供了很多强大的支持.前段时间正好抽空研究了一下这块的内容,现做一个总结,针对如何使用Laya引擎开发微信小游戏给大家做一 ...

  2. MongoDB numa系列问题一：[initandlisten] connection refused because too many open connections:

    1:Mongod日志有很多这样的报错: [initandlisten] connection refused because too many open connections: 2:查看系统的限制 ...

  3. React-Native视频组件react-native-video使用（安卓版）

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/7366019.html 一:安装 在IDE中打开你的项目,然后在IDE的terminal,输入: npm i - ...

  4. SpringMVC学习笔记六：使用Formatter解析或格式化数据

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6832903.html      Converter可以将一种类型转换成另一种类型,是任意Object之间的类型 ...

  5. VIM自定义快捷键 abort

    "在选择模式下系统级复制 vmap ,c "+y<ESC>vmap ,C "+Y<ESC>"在选择模式下系统级剪切vmap ,x x:l ...

  6. Citrix Port（常用端口）

    组件 类型 端口 描述 CitrixLicenseServer       许可管理器守护程序 TCP 27000 处理初始接触点的许可证要求(Lmadmin.exe) 思杰供应商守护程序 TCP 7 ...

  7. gnu screen的用法

    在使用ssh或者telnet登录远程主机后执行一些耗时的命令, 如果此时ssh或者telnet中断, 那么远程主机上正在执行的程序或者说命令也会被迫终止. screen能够很好地解决这个问题, scr ...

  8. 转: 在Ogre中使用Havok物理引擎(源码)

    作者:CYM 众所周知Ogre则是评价很高的一款图形渲染引擎,Havok则是世界一流的物理引擎,今天花了点时间将两者结合在了一块,做了个Demo 由于国内对Havok的研究似乎很少,网上也找不到多少资 ...

  9. 《数字图像处理原理与实践（MATLAB版）》一书之代码Part5

    <数字图像处理原理与实践(MATLAB版)>一书之代码Part5 本文系<数字图像处理原理与实践(MATLAB版)>一书之代码系列的Part5.辑录该书第225至第280页之代 ...

  10. shell脚本逐个杀死k8s中某个应用的pod

    #!/bin/bash pod01=`kubectl get pod -o wide -n weifeng-system|grep official-ui-node-prod|awk -F : 'NR ...