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 ...
随机推荐
- Jqgrid 序号列宽度调整
// 遍历jqgrid 使其序号列宽度为45 function setwidth() { $("table[role='grid']").each(function () {//j ...
- XStream JavaBean对象转换成XML！
代码实例: 1.javaBean类: package com.hsinfo.web.Demo.XStream; public class City { private String name; pub ...
- 2019-5-21-C#-命令行如何静默调用-del-删除文件
title author date CreateTime categories C# 命令行如何静默调用 del 删除文件 lindexi 2019-05-21 11:32:28 +0800 2019 ...
- Apache SOLR and Carrot2集成
1.环境 下载软件 名称 地址 solr-integration-strategies-gh-pages.zip https://github.com/carrot2/solr-integration ...
- C++与Matlab混合编程之：矩阵数据结构
项目需要将matlab代码写成C++,准备用opencv.opencv中矩阵的存储与matlab有所不同,应注意以下问题: 1.matlab中矩阵是按照列优先存储的.对于n0*n1*...*nn维的矩 ...
- Python爬虫笔记【一】模拟用户访问之设置处理cookie（2）
学习的课本为<python网络数据采集>,大部分代码来此此书. 做完请求头的处理,cookie的值也是区分用户和机器的一个方式.所以也要处理一下cookie,需要用requests模块,废 ...
- Eureka客户端无法连接服务注册中心
转载自:https://my.oschina.net/kousm/blog/2249003 服务端 application.yml配置 spring: application: name: eurek ...
- Promise的源码实现（符合Promise/A+规范）
我们手写一个Promise/A+规范,然后安装测试脚本,以求通过这个规范. //Promise/A+源代码 // new Promise时,需要传递一个executor执行器,执行器立即执行 // e ...
- Liferay 7：Liferay内部博客地址
想要了解Liferay最新功能和特性,可以看一看. 非常实用,都是Liferay开发者写的: https://web.liferay.com/zh/community/blogs/all
- Django项目：CRM(客户关系管理系统)--35--27PerfectCRM实现King_admin编辑复选框
#admin.py # ————————01PerfectCRM基本配置ADMIN———————— from django.contrib import admin # Register your m ...