Jquery制作小星星(常用于评价)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
li{
list-style: none;
float: left;
font-size: 36px;
color: blue;
cursor: pointer;
}
</style>
<script src="js/jquery-1.11.0.min.js"></script>
<script>
var stark = "☆";
var stars = "★"
$(function(){
//未点击之前 li标签本身及前面全部添加样式
$("li").on("mouseenter", function () {
$(this).text(stars).prevAll().text(stars);
$(this).nextAll().text(stark);
});
//鼠标离开事件，让所有的星星为空心；
$("li").on("mouseleave", function () {
$("li").text(stark);
//让class 为current的 前面所有的星星为实体，后面的星星为空
$("li.current").text(stars).prevAll().text(stars);
})
//注册点击事件，让当前点击的前面的星星全为实体；
$("li").on("click",function () {
$(this).addClass("current").siblings().removeClass("current");
})
})
</script>
</head>
<body>
<div>
<ul>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</div>
</body>
</html>
Jquery制作小星星(常用于评价)的更多相关文章
- jQuery 的选择器常用的元素查找方法
jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...
- jquery制作论坛或社交网站的每天打卡签到特效
效果:http://hovertree.com/texiao/jquery/50/ 现在许多社区,购物等网站都设置签到功能,打开可以收获经验.虚拟币等,提高用户粘性,增加浏览量,是一个不错的功能.本文 ...
- 如何使用jQuery 制作全屏幕背景的嵌入视频
实际效果查看:http://keleyi.com/keleyi/phtml/jqtexiao/28.htm 请使用支持HTML5的浏览器查看本效果. 完整代码如下: <!doctype html ...
- jquery制作弹出层带遮罩效果，点击阴影部分层消失
jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...
- 使用 CSS3 & jQuery 制作漂亮的书签动画
今天的教程是关于创建使用 CSS 旋转变换和 JavaScript 制作动画书签效果.我们的想法是展现出样书状结构,使单一的色板或列表点击切换.当点击其中一项,我们就会旋转以显示所选择的项目. 在线演 ...
- 使用 CSS & jQuery 制作一款漂亮的多彩时钟
大家可能见过各种各样的时钟效果,比如多年前非常流行的 Flash 制作的各种新奇的动画时钟,现在的 Web 开发者们又开始应用 CSS3 和 Canvas 等最新技术来实现.而今天这里要分享的这款漂亮 ...
- jQuery 制作逼真的日历翻转效果的倒计时
在开发中,一些功能需要用到倒计时,例如最常见的活动开始.结束的倒计时.使用最流行的 JavaScript 库来制作这个效果很简单.下面就是一个 jQuery 制作的逼真的日历翻转效果的倒计时功能. 在 ...
- jQuery制作Web全屏效果
需要的资源 1.jQuery版本库是必不可少的2.jQuery FullScreen plugin如果你下载不方便的话,你可以直接把下面的代码copy到你本地JQuery FullScreen plu ...
- jQuery制作焦点图(轮播图)
焦点图(轮播图) 案例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
随机推荐
- unity Camera第一人称移动,3中方法实现
using System.Collections; using System.Collections.Generic; using UnityEngine; public class Player : ...
- Linux环境下vi/vim编辑器常用命令
使用vi文本编辑器 配置文件是Linux系统中的显著特征之一,其作用有点类似于Windows系统中的注册表,只不过注册表是集中管理,而配置文件采用了分散的自由管理方式.那么如何使用Linux字符操作界 ...
- pycharm的list中append的应用
li = [11,22,33,44] li.append(5) print(li) #输出结果 [11,22,33,44,5] #后面可加字母,列表等字符串
- A - A Secret -扩展KMP
题目大意: 给你两个字符串A,B,现在要你求B串的后缀在A串中出现的次数和后缀长度的乘积和为多少. 题解: 扩展KMP模板题,将A和B串都逆序以后就变成了求前缀的问题了,扩展KMP求处从i位置开始的最 ...
- yum的一些命令使用方法
yum 选项 参数 yum命令是在Fedora和RedHat以及SUSE中基于rpm的软件包管理器,它可以使系统管理人员交互和自动化地更细与管理RPM软件包,能够从指定的服务器自动下载RPM包并且安装 ...
- 操作redis数据库 & 操作Excel & 开发接口
操作redis数据库: string类型 1. 增 set,传俩个参数 key value(只要是字符串就行)2. 删 delete 传一个参数 key3. 修改 set 在目标key重新传参 key ...
- 可视化利器Visdom
可视化利器Visdom 最近在使用Pytorch炼丹,单纯地看命令行输出已经无法满足调试的需求,尝试了facebook开源的visdom,感觉非常优雅,支持numpy和torch 安装 $ pip i ...
- centos7 ping不通 name or service not known
最近打算为centos安装一个界面时,发现不能上网.ping www.baidu.com 报name or service not known. 原来网络配置没设好. 一.选择VMWare的NAT模式 ...
- LeetCode 81 Search in Rotated Sorted Array II [binary search] <c++>
LeetCode 81 Search in Rotated Sorted Array II [binary search] <c++> 给出排序好的一维有重复元素的数组,随机取一个位置断开 ...
- Bypass_Disable_functions_Shell
Bypass_Disable_functions_Shell https://github.com/l3m0n/Bypass_Disable_functions_Shell 一个各种方式突破Disab ...