<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery鼠标星级打分特效 - 站长素材</title>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{ font: 12px/180% Arial, Helvetica, sans-serif, "新宋体"; }
/* starbox */
.fl{float:left;display:inline;}
.star_ul{background:url(images/star.png) no-repeat 0 -150px;width:132px;z-index:10;position:relative;height:25px;}
.star_ul li{float:left;margin-right:1px;width:25px;height:25px;}
.star_ul li a{display:block;height:25px;position:absolute;left:0;top:0;text-indent:-999em;}
.star_ul li .active-star{background:url(images/star.png) no-repeat;}
.star_ul li .one-star{width:25px;background-position:0 -120px;z-index:50;}
.star_ul li .two-star{width:51px;background-position:0 -90px;z-index:40;}
.star_ul li .three-star{width:79px;background-position:0 -60px;z-index:30;}
.star_ul li .four-star{width:105px;background-position:0 -30px;z-index:20;}
.star_ul li .five-star{width:129px;margin-right:0;background-position:0 0;z-index:10;}

</style>
</head>

<body>

<script type="text/javascript" src="js/jquery.1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('.star_ul a').click(function(){
$(this).addClass('active-star').parents("li").siblings().find("a").removeClass('active-star');
},function(){
$(this).removeClass('active-star');
});
})
</script>

<ul class="star_ul fl">
<li><a class="one-star" href="#"></a></li>
<li><a class="two-star" href="#"></a></li>
<li><a class="three-star" href="#"></a></li>
<li><a class="four-star" href="#"></a></li>
<li><a class="five-star" href="#"></a></li>
</ul>

</body>
</html>

引用图片：

jquery购物评分的更多相关文章

  1. HTML5商城开发三 jquery 星星评分插件

    展示:

  2. JQuery版评分控件

    Hi All, 分享一个学习JQuery做的一个评分控件. 需求:当鼠标移动到 ‘☆’ 上时,该字符左边的 ‘☆’ 变成 '★',该字符右边仍然是 ‘☆’, 并显示相应星星数的评价结果:当鼠标推出 ‘ ...

  3. jQuery星级评分插件

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Con ...

  4. jQuery 五角星评分

    五角星打分 我用的是搜狗输入法上带的特殊符号打出来的  空五角星:☆  实五角星:★ 1.html <ul class="comment"> <li>☆&l ...

  5. jQuery购物数量数字加减运算效果

    <a href="###" id="add" value="+">+</a> <input type=&quo ...

  6. jQuery动态星级评分效果实现方法

    本文实例讲述了jQuery动态星级评分效果实现方法.分享给大家供大家参考.具体如下: 这里的jQuery星级评分代码,是大家都很喜欢的功能,目前广泛应用,本星级评分加入了动画效果,注意,如果要真正实现 ...

  7. 第一次写jquery插件，来个countdown计时器吧

    之前同学做个购物商城秒杀活动需要计时器的功能,在用jquery提供的countdown插件时,一直报错,貌似还需要依赖除jquery之外的其他插件,搞了半天也没搞成功,就叫我帮忙写个.然而我并没有写过 ...

  8. jQuery用户数字评分效果

    效果预览:http://hovertree.com/texiao/jquery/5.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...

  9. jQuery动态五星评分

    效果 css .star ul, .star li { list-style: none; } .star { position: relative; width: 600px; height: 24 ...

随机推荐

  1. matlab-变量类型-数组-矩阵

    1 变量类型 1.1基本 1.2 特殊变量 ans •i,j: complex number •Inf: 无穷大 •eps: 2.2204e-016 •NaN: not a number •pi:pa ...

  2. Redis安装过程：

  3. Linux-c给线程取名字

    https://blog.csdn.net/jasonchen_gbd/article/details/51308638 #define wtm_set_thread_name(n) ({ \ ] = ...

  4. webapp中<meta>与css代码部署

    1.页面头部标签申明 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" id="te ...

  5. List -- 列表的一些操作

    1,基本操作 2,内建函数 3,方法Method

  6. 快速傅里叶变换（FFT）学习

    首先,在写这篇博客之前,我还没有完全学会FFT. 先把会的部分打好,加深一下记忆(也可以说是做笔记吧). 初三了,还不会FFT,要退役喽-- 多项式乘法 点开这篇博客之前,你就应该知道,FFT是用来求 ...

  7. 使用 QuickBI 搭建酷炫可视化分析

    随着各行各业大数据的渗透,BI 类数据分析需求与日俱增,如何让可视化更好的展现数据的价值,是 BI 类产品一直努力的方向.对此国内外的BI产品都有自己的方法,如国外大牌的 PowerBI.Tablea ...

  8. Java操作Mysql笔记

    第一步,需要下载JDBC驱动, 点我.然后选择合适的版本即可. 下载完成之后解压,然后将mysql-connector-java-5.1.6-bin.jar文件放到java的安装目录下面. 这里每个人 ...

  9. SQL Server代码如何快速格式化，sqlserver代码

    在SQL Server中我们经常需要编写各种SQL脚本,例如存储过程和函数等,由于在编写过程中,经常会进行调整,有些关键字我们用的大写,有的我们用的小写,有的后面结束用:分割有的又没有.对于有强迫症的 ...

  10. Shell 语法之信号与作业

    Linux 使用信号与系统上运行的进程进行通信. Linux 编程中最常见的 Linux 系统信号 信号 值   描述 1  SIGHUP  挂起进程 2  SIGINT  中断进程 3  SIGQU ...