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 ...
随机推荐
- Neo4j-Cypher语言语法
Neo4j-Cypher语言语法 梦飞扬 2018-03-15 264 阅读 Neo4j 本文是记录Neo4j图数据库中实用的Cypher语言语法. Cypher是什么 "Cypher&qu ...
- vue生成条形码/二维码/带logo二维码
条形码:https://blog.csdn.net/dakache11/article/details/83749410 //安装 cnpm install @xkeshi/vue-barcode / ...
- kafka offset manage
kafka low api:fetch数据从topic partition offset buffsize长度. 提交一般两个维度:时间维度,满多少条提交(0.8X之前是没这参数) 在0.8.2.2版 ...
- iOS 更新日志 - 持续更新中
本文只是为了简单记录一下每个正式版本发布时间和更新内容,只有这个初衷,从2019年9月25日开始,将会持续更新. iOS 13.1 - 2019年9月25日 iOS 13.1 iOS 13.1 包括错 ...
- 使用ResponseEntity进行返回json数据
在最近的项目中,与上位机进行数据传输时,上位机需要服务器的响应得知服务器是否正常运行,数据是否正常发送 在最近的调试中我使用ResponseEntity<Map<String,Object ...
- R语言建立回归分析,并利用VIF查看共线性问题的例子
R语言建立回归分析,并利用VIF查看共线性问题的例子 使用R对内置longley数据集进行回归分析,如果以GNP.deflator作为因变量y,问这个数据集是否存在多重共线性问题?应该选择哪些变量参与 ...
- python多进程，进程池，数据共享，进程通信，分布式进程
一.操作系统中相关进程的知识 Unix/Linux操作系统提供了一个fork()系统调用,它非常特殊.普通的函数调用,调用一次,返回一次,但是fork()调用一次,返回两次,因为操作系统自动把当前 ...
- java 实现文件内容的加密和解密
package com.umapp.test; import java.io.FileInputStream; import java.io.FileOutputStream; import java ...
- LINUX查询登录主机的用户工具：w 、who 、users
w.who和users工具,是查询已登录当前主机的用户:另外finger -s 也同样能查询:侧重点不一样:请自己对比着看:毕竟简单,这里只是介绍 : [beinan@localhost ~]$ w ...
- c#多线程通信之委托（事件）
在研究c# 线程之间通信时,发现传统的方法大概有三种 ①全局变量,由于同一进程下的多个进程之间共享数据空间,所以使用全局变量是最简单的方法,但要记住使用volatile进行限制. ②线程之间发送消息( ...