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"> & ...

随机推荐

Linux安装nginx并设置https（openssl
一.安装依赖包 1.$sudo apt-get install openssl 或者$sudo apt-get install libssl-dev 2.$sudo apt-get instal ...
【AIX】查看当前目录下文件与文件夹大小
使用命令: du –sg ./* #以G为单位 du –sm ./* #以M为单位 du –sk ./* #以k为单位
VTK中获取STL模型点的坐标以及对其进行变换
VTK是一个基于面向对象的开源三维绘图软件包,和其它的的三维绘图引擎如OSG.OGRE不同之处在于,VTK可视化对象主要是各种数据,更加注重对数据分析处理后的可视化,可视化的内容是人们无法直接感受到的 ...
python之模块contextlib 加强with语句而存在
# -*- coding: utf-8 -*- #python 27 #xiaodeng #python之模块contextlib,为加强with语句而存在 #特别注意:python3和python2 ...
python之模块chunk，了解即可
# -*- coding: utf-8 -*-#python 27#xiaodeng#python之模块chunk# chunk模块专用于读取TIFF格式的文件,打开应当使用二进制模式 #TIFF:标 ...
CentOS7 下配置Docker远程访问与 windows下使用maven构筑Spring Boot 的 Docker镜像到远程服务端
1.设置Docker服务端,以支持远程访问: 修改docker服务端配置文件,命令: vim /usr/lib/systemd/system/docker.service 修改后: [Unit] De ...
Windows在cmd杀掉进程
问题描述: 在windows根据pid杀进程问题解决: tasklist查看当前系统中的进程列表,然后针对你要杀的进程使用taskkill命令 #根据服务名taskkill /im nginx.ex ...
Dockerfile 构建后端springboot应用并用shell脚本实现jenkins自动构建
Dockerfile 文件构建docker镜像 FROM centos MAINTAINER zh*****eng "z*******ch.cn" ENV LANG en_US.U ...
git difftool 详解
一.如何比较两个版本之间的差异 1.显示版本得到版本的commit id 2.执行difftool命令按Y进行比较,我用的是DiffMerge这个软件对代码进行比较的二.比较当前所修改的内容 gi ...
Python验证码识别处理实例深度学习大作业
转载自:http://python.jobbole.com/83945/ http://www.pyimagesearch.com/2014/09/22/getting-started-deep-le ...

js评价五星

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

随机推荐

热门专题