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 ...
随机推荐
- ichartjs 使用BUG，assign_scale:true 解决
今天纯属灌水,好久没灌水的. 最近使用了flotr2 和 ichartjs进行canvas图标的开发,都不能满足需求. 没办法,先将就用用吧.然后,既然其他大神推荐使用ichartjs,为了统一,我也 ...
- selenium2入门 定位 窗体切换等等 （二）
定位用的html素材有两个 demo.html <html> <head> <title>UI Automation Testing</title> & ...
- 项目笔记---CSharp图片处理
原文:项目笔记---CSharp图片处理 项目笔记---CSharp图片处理 最近由于项目上需要对图片进行二值化处理,就学习了相关的图片处理上的知识,从开始的二值化的意义到动态阀值检测二值化等等,并用 ...
- openwrt的默认/etc/config/network文件是如何生成的？
openwrt的network文件,或者说在/etc/config下的文件,都是动态生成的. 脚本的函数定义在openwrt1407/package/base-files/files/lib/func ...
- 完整的堆栈JavaScript路（十五）HTML5 focus 扩大 (扩展点)
HTML5 加入辅助管理 focus 产品特点, 有办法获得焦点文档; 页面加载,用户输入(通常由tab债券).和 调用代码focus()功能. HTML5新的属性和方法,辅助管理的重点: docu ...
- 由浅入深学习.NET CLR 系列：目录
经过对Android的一阵折腾,些许熟悉了一些Java的东东,又开始转战.NET.我觉得学习最好和工作不要相离太远,才会更加随笔随意,索性整理一些比较系统的.NET的基础知识学习学习.一提起学习.NE ...
- ASP.NET页面生命周期和asp.net应用程序生命周期
作为一个asp.net程序员,不了解ASP.NET页面生命周期和asp.net应用程序生命周期是绝对不行的,那永远只能是菜鸟级别.我很早就学过,可是没次还是得去翻,一些事件还是记不住,还是记在自己的b ...
- Linux Shell 示例精解(第七章 gawk编程）转载
第七章 gawk功能:gawk编程 7.1.1 数字和字符串常量 初始化和类型强制 在awk中,变量不需要定义就可以直接使用,使用一个变量就是对变量的定义.变量的类型可以试数字.字符串,或者 ...
- Javascript多线程引擎(八)
Javascript多线程引擎(八) Javascript 多线程项目, 做到现在已经快3个月了(加上前期准备编译原理和必要的文档), 该项目(js-engine)已经快进入尾声了, 现在该引擎 ...
- 【WCF系列一】WCF入门教程(图文) VS2012
WCF的全称是Windows Communication Foundation,从英文名称上看,WCF就是基于Windows下一种通讯的基础架构.利用WCF能够实现基于Windows下的各种通讯技术的 ...