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:/ ...
随机推荐
- 使用 Fetch
原文链接:https://css-tricks.com/using-fetch/. 本文介绍了Fetch基本使用方法及zlFetch库的使用 无论用JavaScript发送或获取信息,我们都会用到Aj ...
- 通过zabbix的API接口获取服务器列表
Zabbix API说明 1) 基于Web的API,作为Web前端的一部分提供,使用JSON-RPC 2.0协议 2) 身份认证Token:在访问Zabbix中的任何数据之前,需要登录并获取身份验证令 ...
- 19.3.5日，报关于表单验证和ui-router
今天完成的事情: (1)学习angularJS表单验证 可以验证的内容<input type="text" minlength="2" maxlength ...
- Android应用程序支持不同屏幕（尺寸、密度）
how to build a user interface using Android layouts for all types of devices 使用Android布局设计的UI接口用于不同的 ...
- DW1000 用户手册中文版 附录3：双向测距(Two-Way Ranging)
由于已经在wode中排版无法直接复制到博客中,故本节博客发布使用了图片. 论坛可下载PDF http://bphero.com.cn/forum.php?mod=viewthread&tid ...
- 无线路由WMM，Short GI，AP隔离功能介绍（转）
无线路由器中有开启WMM.开启Short GI和开启AP隔离分别代表什么呢?这是我在我的TP-LINK无线路由器TL-WR841N中的无线高级设置中看到的三个选项,下面三点对这三项无线高级设置做了下解 ...
- BZOJ5335 : [TJOI2018]智力竞赛
二分答案,转化成求最少的路径,覆盖住所有权值$\leq mid$的点. 建立二分图,若$i$的后继为$j$,则连边$i\rightarrow j$,求出最大匹配,则点数减去最大匹配数即为最少需要的路径 ...
- Do-Now—团队 冲刺博客六
Do-Now-团队 冲刺博客六 作者:仇夏 前言 终于从四级的考试中解脱了(不过我觉得可能凉凉,呵呵),我们的APP制作也迎来了最后的两天. 自己觉得自己其实没有干成什么事情,代码什么的大都是队友们写 ...
- Do Now 一个让你静心学习的APP——团队博客
Do Now 一个让你静心学习的APP 来自油条只要半根团队的智慧凝聚的产物! 团队博客总目录: 团队作业第一周 团队作业第二周 Do Now -- 团队冲刺博客一 Do-Now-团队Scrum 冲刺 ...
- 页面的input唤醒软键盘再收起后，页面会出现软键盘高度的空白背景
微信浏览器在版本6.7.4及以上会有这个bug:页面的input唤醒软键盘再收起后,页面会出现软键盘高度的空白背景,触摸到滚动条会消失恢复! 解决代码 后台框架嵌入iframe的情景,iframe内部 ...