星星打分，今天我们就用Jq代码来实现，看看究竟是如何实现的 其中有两个重要的事件mouseenter和mouseleave效果如下图
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
ol {
list-style: none;
}
li {
float: left;
cursor: pointer;
}
</style>
<script src="jquery/jquery-1.9.1.js"></script>
<script type="text/javascript">
var isSave = false;
$(function () {
//鼠标移到某个li标签上面,他以及他之前的都变成实心星星
$("#olStar li").mouseenter(function () {
//修改标识变量
isSave = false;
//自己变实心s
$(this).html("★").prevAll().html("★");
$(this).nextAll().html("☆");
//前面的兄弟变实心
})
//鼠标离开li标签 全部还原
$("li").mouseleave(function () {
//判断是否保存结果
if (!isSave) { $("li").html("☆"); }
})
//点击li标签 保存分数
$("li").click(function () {
isSave = true;
})
})
</script>
</head>
<body>
<ol id="olStar">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ol>
</body>
</html>
星星打分，今天我们就用Jq代码来实现，看看究竟是如何实现的 其中有两个重要的事件mouseenter和mouseleave效果如下图的更多相关文章
- 【原创】用JQury来制作星星打分特效功能
前言 常常我们看到一些评论,星星打分,今天我们就用Jq代码来实现,看看究竟是如何实现的 其中有两个重要的事件mouseenter和mouseleave效果如下图 代码 <!DOCTYPE htm ...
- 简单的jQ代码
简单的jQ代码 /* * Lazy Load - jQuery plugin for lazy loading images * * Copyright (c) 2007-2012 Mika Tuup ...
- Android代码中设置字体大小，字体颜色，显示两种颜色.倒计时效果
Android代码中设置字体大小,字体颜色,显示两种颜色 在xml文件中字体大小用的像素 <TextView android:id="@+id/uppaid_time" an ...
- js点亮星星评分并获取参数的js代码
点亮星星评分后,点击按钮,立即获得分数参数值,方便不想使用ajax传参的朋友 http://demo.jb51.net/js/2014/jsxxdf/demo2.html <!DOCTYPE h ...
- mpvue 星星打分组件
上图: <template> <div class="container"> <div v-for="(star,index) in sta ...
- jquery模仿淘宝星星打分
今天做论坛页面有星星评分功能,以下是代码.用的时候引入jquery <span> <ul class="hs_df_xx"> <li><i ...
- 页面加载时执行JQ代码
$(function () { //jq加载时执行的这里面是 $("#ss").append("<strong>这是新加的</strong>&qu ...
- django模板中使用JQ代码实现瀑布流显示效果
settings中的配置不再详细说明 一.路由代码 from django.contrib import admin from django.conf.urls import url from app ...
- banner轮播无缝滚动 jq代码
HTML: <div class="box"> <ul> <li>11111</li> <li>22222</li ...
随机推荐
- SVN命令行操作
参考 https://wenku.baidu.com/view/511a7d29ed630b1c59eeb5f3.html 1, 将文件checkout到本地目录 svn check out http ...
- Android Studio添加aar依赖的两种方式
1 android{ repositories { flatDir { dirs 'libs' } } } dependencies { implementation fileTree(include ...
- 2018-2019-2 20175213实验一 《Java开发环境的熟悉》实验报告
第一部分实验要求:1 建立“自己学号exp1”的目录2 在“自己学号exp1”目录下建立src,bin等目录3 javac,java的执行在“自己学号exp1”目录4 提交 Linux或Window或 ...
- 输入一段字符串，统计其中的数字，字母，空格，其他字符的方法 ----python---
1.以简单的循环分支实现字符统计 str1 = input("输入字符串:") num=0;word=0;space=0;other=0; for i in str1: if i. ...
- 利用linux curl爬取网站数据
看到一个看球网站的以下截图红色框数据,想爬取下来,通常爬取网站数据一般都会从java或者python爬取,但本人这两个都不会,只会shell脚本,于是硬着头皮试一下用shell爬取,方法很笨重,但旨在 ...
- WEBLOGIC because another WebLogic Server instance is already using this directory
错误提示:because another WebLogic Server instance is already using this directory 原因:ldap目录数据库文件被锁定,可能是w ...
- 关于逻辑回归是否线性？sigmoid
from :https://www.zhihu.com/question/29385169/answer/44177582 逻辑回归的模型引入了sigmoid函数映射,是非线性模型,但本质上又是一个线 ...
- DDB---查询与优化
摘要:分布式数据库(Distributed DB)是数据库中非常重要的一个部分,随着要处理的数据越来越多,分布式逐渐成为了一种策略.主要有:分布式操作系统,分布式程序设计语言,分布式文件系统,分布式数 ...
- html转化为图片下载
业务需求:按照客户要求把排课表转化为图片下载到本地.一个月到排课有很多.所以图片会很大 <!DOCTYPE html> <html lang="en"> & ...
- Centos6安装和配置etcd3
etcd 是一个高可用的 Key/Value 存储系统,主要用于分享配置和服务发现.etcd 的灵感来自于 ZooKeeper 和 Doozer,侧重于: 简单:支持 curl 方式的用户 API ( ...