jquery购物评分
<!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购物评分的更多相关文章
- HTML5商城开发三 jquery 星星评分插件
展示:
- JQuery版评分控件
Hi All, 分享一个学习JQuery做的一个评分控件. 需求:当鼠标移动到 ‘☆’ 上时,该字符左边的 ‘☆’ 变成 '★',该字符右边仍然是 ‘☆’, 并显示相应星星数的评价结果:当鼠标推出 ‘ ...
- jQuery星级评分插件
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Con ...
- jQuery 五角星评分
五角星打分 我用的是搜狗输入法上带的特殊符号打出来的 空五角星:☆ 实五角星:★ 1.html <ul class="comment"> <li>☆&l ...
- jQuery购物数量数字加减运算效果
<a href="###" id="add" value="+">+</a> <input type=&quo ...
- jQuery动态星级评分效果实现方法
本文实例讲述了jQuery动态星级评分效果实现方法.分享给大家供大家参考.具体如下: 这里的jQuery星级评分代码,是大家都很喜欢的功能,目前广泛应用,本星级评分加入了动画效果,注意,如果要真正实现 ...
- 第一次写jquery插件，来个countdown计时器吧
之前同学做个购物商城秒杀活动需要计时器的功能,在用jquery提供的countdown插件时,一直报错,貌似还需要依赖除jquery之外的其他插件,搞了半天也没搞成功,就叫我帮忙写个.然而我并没有写过 ...
- jQuery用户数字评分效果
效果预览:http://hovertree.com/texiao/jquery/5.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...
- jQuery动态五星评分
效果 css .star ul, .star li { list-style: none; } .star { position: relative; width: 600px; height: 24 ...
随机推荐
- HTML5定位功能，实现在百度地图上定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HZOI20190906模拟38 金，斯诺，赤
题面:https://www.cnblogs.com/Juve/articles/11479415.html T1:高精度gcd,其实不用写高精度取模,gcd还有一种求法 int gcd(int a, ...
- LUOGU P4113 [HEOI2012]采花
传送门 解题思路 莫队题卡莫队...莫队只能拿到100分,满分200.正解主席树??发个莫队100分代码. 代码 #include<iostream> #include<cstdio ...
- 文件上传 - Commons FileUpload介绍
概述 FileUpload能够以多种不同的方式使用,具体取决于应用程序的要求.在最简单的情况下,调用单个方法来解析servlet请求,然后处理解析出来的Item集合.此外也可以自定义FileUploa ...
- [转]SQLserver字符串分割函数
一.按指定符号分割字符串,返回分割后的元素个数,方法很简单,就是看字符串中存在多少个分隔符号,然后再加一,就是要求的结果. CREATE function Get_StrArrayLength ( ) ...
- KOA 学习（三）
请求(Request) Koa Request 对象是对 node 的 request 进一步抽象和封装,提供了日常 HTTP 服务器开发中一些有用的功能. req.header 请求头对象 requ ...
- ECMAScript 5 新增 Object 接口
对象 构造器 说明 Object getPrototypeOf 返回对象的原型 Object getOwnPropertyDescriptor 返回对象自有属性的属性描述符 Object getOwn ...
- 第03章 科学计算库Numpy
016.Numpy数据结构 关于矩阵运算的库 矩阵 017.Numpy基本操作 判断每一个元素的 018.Numpy矩阵属性 019.Numpy矩阵操作 020.Numpy常用函数 按列拼接就用 ...
- Docker（二）安装及常用命令
1.安装 1.安装虚拟机VMWare 链接:https://pan.baidu.com/s/1Xl7ENUm2gapPOFs-iXHpRQ 提取码:eubm 2.下载centos,我下的是这个版本的 ...
- 转载：腾讯与新浪的通过IP地址获取当前地理位置（省份）的接口
腾讯的接口是 ,返回数组 http://fw.qq.com/ipaddress 返回值 var IPData = new Array("61.135.152.194"," ...