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 ...
随机推荐
- idea怎么打war包
1.上方导航栏粥找到 Buid——> Bild Artifacts... 2.弹出框中选择 3.war包打好啦,一般放在编译的 target目录下
- Jqgrid 序号列宽度调整
// 遍历jqgrid 使其序号列宽度为45 function setwidth() { $("table[role='grid']").each(function () {//j ...
- WPF 导出Excel 导出图片
/// <summary> /// 导出Excel /// </summary> private void ExportExcel(DataTable ExcelDt) { / ...
- locate,find,df,mount,du命令
1.locate找数据的时候,相当于去这个数据库里面查(locate查找的时候不扫描磁盘)查找图标文件:locate .icolocat -i 不区分大小写创建一个文件,该文件没有在数据库中,要想在数 ...
- conda、pip换源以及conda、pip命令比较
conda换源: conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/ conda ...
- 善用 NuGet 程序包管理器控制台
每种集成开发环境都会提供扩展包的下载与安装,VS (微软可视化集成开发环境) 下的叫程序包管理控制台,我们把他叫做<牛干 程序包管理控制台>. 在 工具=>NuGet 程序包管理器= ...
- jeecmsv8.1怎么修改项目后台访问地址
将jeeadmin/jeecms/index.do 改为admin/index.do为例 1.修改WebContent\WEB-INF\web.xml <servlet-mapping> ...
- 【DM642】H.264源代码在DM642上的移植
TI公司提供了用于C语言开发的CCS(Code Composer Studio),该平台包括了优化的ANSI编译器,使之可以使用C语言开发DSP程序.这种方法不仅使DSP开发的速度大大加快,而且DSP ...
- 访问hbase的内部大致流程
hbase 访问表过程.Client(客户端)----->访问ZK(拿到meta表的region位置)----->访问meta 表的region------>拿到user表的regi ...
- 矩阵快速幂求Fibonacci
原理 我们取矩阵A 则 F1=F2=1;则可以轻易求出F(i) #define maxn 2 #define mo 1000000007 struct Matrix{ long long a[maxn ...