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. SQL基础试题

    第3章  关系数据库标准语言SQL 一.选择题 1.SQL语言是                    的语言,易学习. A．过程化    B．非过程化    C．格式化    D．导航式    答案 ...

  2. Shell与Bash

    1:Shell编程的本质 Shell的意思是“壳程序”,它是一个视窗,供我们交互. 系统中有许多负责不同功能的可执行文件,他们被添加到PATH变量后,我们就可以在Shell中通过命令行调用.这些这些可 ...

  3. Linux文件压缩、打包、备份

    1:Linux常见的压缩文件 2:gzip压缩指令 3:bzip2压缩指令(比gzip更高压缩比) 同理,可以用bzcat\bzmore\bzless读取被压缩后文件内容. 4:xz压缩指令(比bzi ...

  4. Android 内存泄漏总结（转）

    Android 内存泄漏总结 内存管理的目的就是让我们在开发中怎么有效的避免我们的应用出现内存泄漏的问题.内存泄漏大家都不陌生了,简单粗俗的讲,就是该被释放的对象没有释放,一直被某个或某些实例所持有却 ...

  5. Multitenant Architecture---PDB与CDB

    一.多租户框架 多租户技术(英语:multi-tenancy technology)或称多重租赁技术,是一种软件架构技术,它是在探讨与实现如何于多用户的环境下共用相同的系统或程序组件,并且仍可确保各用 ...

  6. oracle 判断字符串是否包含指定内容

      1.情景展示 如何将表中的包含特殊字符的脏数据查出来? 2.instr()函数 语法: instr(string, substring[, start_position[, th_appearan ...

  7. urllib2特点--urllib2.build_opener对象接口

    # -*- coding: cp936 -*- #python 27 #xiaodeng #urllib2特点--urllib2.build_opener对象接口 import urllib2 imp ...

  8. python之模块contextlib 加强with语句而存在

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #python之模块contextlib,为加强with语句而存在 #特别注意:python3和python2 ...

  9. code vs 2597 团伙

    题目描述 Description 1920年的芝加哥,出现了一群强盗.如果两个强盗遇上了,那么他们要么是朋友,要么是敌人.而且有一点是肯定的,就是: 我朋友的朋友是我的朋友: 我敌人的敌人也是我的朋友 ...

  10. 第一个go的web程序；调用七牛云存储的音频api问题解决；条件搜寻文件中的内容,字符串拼接+在上一行

    package main import ( "html/template" "io" "io/ioutil" "log" ...