jquery代码实现简单的五星评价功能！
实现： 1，鼠标移动到第三个星星，则一二三星星变亮，后两个变暗
2，鼠标点击某个星星后，可以继续选择，但拿开后星星会定格住你点击的位置
<script type="text/javascript">
//★
$(function () {
//由于不好获取点击的span的是何坐标，所以声明一个变量来记录点击的span标签的id
var mark;
$("*").css({ margin: "0px", padding: "0px;" });
$("span")
.css({ fontSize: "20px", color: "yellow" })
.mouseover(function () {
$(this).text("★")
.prevAll().text("★").end()
.nextAll().text("☆").end()
.click(function () {
mark = $(this).attr("id");
})
});
$("div")
.css({ width: "100px", height: "20px", border: "1px solid black" })
.mouseout(function () {
//如果mark内有内容，则在鼠标离开div后，让星星数量变回你最近一次点击的位置
if (mark) {
$("#" + mark)
.text("★")
.prevAll().text("★").end()
.nextAll().text("☆");
}
//mark中没有值，意味着你没有点击任何星星，这时，让所有的星星都黯淡吧
else {
$("span").text("☆");
}
});
});
</script>
</head>
<body>
<div id="div">
<span id="1">☆</span><span id="2">☆</span><span id="3">☆</span><span id="4">☆</span><span id="5">☆</span>
</div>
</body>
jquery代码实现简单的五星评价功能！的更多相关文章
- javascript代码实现简单的五星评价功能！
<script type="text/javascript"> //★ var spans=document.getElementsByTagName("sp ...
- 三行Jquery代码实现简单的选项卡
今晚,我们来用实现一个简单的选项卡切换代码,主要代码只有两行. 效果: 思路:通过切换JQuery控制div的显隐和样式的改变 其中那个一个div显示,其余全隐藏 实现: <!DOCTYPE h ...
- jQuery代码性能小细节
选择器Selector的使用 $("#id")使用id来定位DOM元素无疑是最佳提高性能方式,因为jQuery底层将直接调用本地方法document.getElementbyId( ...
- jquery轮播图详解，40行代码即可简单解决。
我在两个月以前没有接触过html,css,jquery,javascript.今天我却在这里分享一篇技术贴,可能在技术大牛面前我的文章漏洞百出,也请斧正. 可以看出来,无论是div+css布局还是jq ...
- 经验分享：10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...
- 10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库. 今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 1.平滑滚动到 ...
- jQuery实现的简单分页功能的详细解析
分页功能在项目开发中不可或缺,老司机操作起来就和呼吸一样简单,新手恐怕就会吃力一些. 今天我回顾了一下具体的操作步骤,决定详细的分析一下每一步的实现目的及原理. 我们会创建一个简单的json文件来模拟 ...
- 使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能。并且在界面上有radio 的选择内容也要上传
使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能.并且在界面上有radio 的选择内容也要上传 uploadify 插件的 下载和文档地址 ...
- jQuery实现简单的五星好评
最近一直在认真的努力工作,今天工作完成得差不多了,比较轻松点,在工作中有遇到用jq实现五星好评功能,觉得简单又有用,所以空闲时间就想分享出来. css部分: <style> .u_star ...
随机推荐
- shell 批量压缩指定文件夹及子文件夹内图片
shell 批量压缩指定文件夹及子文件夹内图片 用户上传的图片,一般都没有经过压缩,造成空间浪费.因此须要编写一个程序,查找文件夹及子文件夹的图片文件(jpg,gif,png),将大于某值的图片进行压 ...
- SQL点滴30—SQL中常用的函数
原文:SQL点滴30-SQL中常用的函数 该文章转载自http://www.cnblogs.com/jiajiayuan/archive/2011/06/16/2082488.html 别人的总结,很 ...
- PDFBox之文档创建
1.创建一个空的PDF 下面的小例子表示如何使用PDFBox来创建一个新的PDF文档. // 创建一个空的文档 PDDocument document = new PDDocument(); // 创 ...
- SSH简介
一.什么是SSH? Secure Shell(缩写为SSH),由IETF的网络工作小组(Network Working Group)所制定:SSH为一项创建在应用层和传输层基础上的安全协议,为计算机上 ...
- Dotfuscator自定义规则中的元素选择
Dotfuscator是专业的.NET程序代码保护软件.是支持规则自定义的,你可以对重命名.程序控制流.字符串加密等等功能自定义规则.在进行规则自定义过程中,可以通过元素的不同选择,满足自己的程序需要 ...
- HDU2093--考试排名
考试排名 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submissi ...
- Windows 下安装 Oracle 12c 教程
原文 Windows 下安装 Oracle 12c 教程 申明:本文原作者:Jmq 本文给大家带来的是 Oracle 12C 的安装教程. 1.准备 1.1 下载 Oracle 12c 安装程序 ...
- 打开VMware的系统出错
打开VMware系统时,出现错误 “Invalid configuration file. File "I:/My Virtual Machines/Windows XP english P ...
- Tween动画
知识点 Alpha:渐变透明度动画效果 Scale:渐变尺寸伸缩动画效果 Translate:移动效果 Rotate:旋转效果 1. AlphaAnimation(float fromAlpha,fl ...
- Linux下监控磁盘空间的四个命令
无论是运行简单的Linux桌面还是大型Linux服务器,都需要了解可供应用程序使用的空间,并跟踪系统的磁盘使用情况.下面介绍四个核心命令行命令来管理Linux系统上的介质环境. 一.mount命令 m ...