<!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效果如下图的更多相关文章

  1. 【原创】用JQury来制作星星打分特效功能

    前言 常常我们看到一些评论,星星打分,今天我们就用Jq代码来实现,看看究竟是如何实现的 其中有两个重要的事件mouseenter和mouseleave效果如下图 代码 <!DOCTYPE htm ...

  2. 简单的jQ代码

    简单的jQ代码 /* * Lazy Load - jQuery plugin for lazy loading images * * Copyright (c) 2007-2012 Mika Tuup ...

  3. Android代码中设置字体大小，字体颜色，显示两种颜色.倒计时效果

    Android代码中设置字体大小,字体颜色,显示两种颜色 在xml文件中字体大小用的像素 <TextView android:id="@+id/uppaid_time" an ...

  4. js点亮星星评分并获取参数的js代码

    点亮星星评分后,点击按钮,立即获得分数参数值,方便不想使用ajax传参的朋友 http://demo.jb51.net/js/2014/jsxxdf/demo2.html <!DOCTYPE h ...

  5. mpvue 星星打分组件

    上图: <template> <div class="container"> <div v-for="(star,index) in sta ...

  6. jquery模仿淘宝星星打分

    今天做论坛页面有星星评分功能,以下是代码.用的时候引入jquery <span> <ul class="hs_df_xx"> <li><i ...

  7. 页面加载时执行JQ代码

    $(function () { //jq加载时执行的这里面是 $("#ss").append("<strong>这是新加的</strong>&qu ...

  8. django模板中使用JQ代码实现瀑布流显示效果

    settings中的配置不再详细说明 一.路由代码 from django.contrib import admin from django.conf.urls import url from app ...

  9. banner轮播无缝滚动 jq代码

    HTML: <div class="box"> <ul> <li>11111</li> <li>22222</li ...

随机推荐

  1. 用word发CSDN blog，免去插图片的烦恼

    目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...

  2. 吴裕雄 python 机器学习——ElasticNet回归

    import numpy as np import matplotlib.pyplot as plt from matplotlib import cm from mpl_toolkits.mplot ...

  3. scapy基础之一 ----简单命令

    前言 scapy是python写的一个功能强大的交互式数据包处理程序,可用来发送.嗅探.解析和伪造网络数据包,常常被用到网络攻击和测试中.下面介绍简单命令. ls() List all availab ...

  4. Analysis Services 中的服务器属性配置

    Analysis Services 中的服务器属性配置: https://docs.microsoft.com/zh-cn/sql/analysis-services/server-propertie ...

  5. 关于微信小程序appsecret保护的问题

    本地后端代码中通常会配置 appid 和 appsecret,直接 push 到 公有 git 库会导致所有人可见.但其他人由于不是开发者有了别的项目的 secret 用处不大.但仍建议采用某种方法加 ...

  6. Linux(centos)下安装JDK

    安装 JDK是运行java程序必不可少的环境,服务器上跑程序也不例外.首先在安装之前,要知道Linux下安装软件有两种,一种是使用yum等命令直接下载,一种是使用上传下载工具,上传至Linux下使用, ...

  7. thinkphp 响应对象

    <?php namespace app\admin\controller; use think\Request; class Index{ public function index(Reque ...

  8. java redispool测试类保存

    这两天睡眠不足,今晚吃完饭,肚子烦躁的很,迟迟进入不了代码的状态,强打精神,又赶上处理了几个编辑器的报错,等到真正面对问题的时候又是晚上十一点, 晚上十一点是幸运点,到这个点无关问题都能解决完毕进入调 ...

  9. strcat的用法

    原型: char *strcat(char *str1,char *str2); strcat的实现: char* MyStrcat(char *dst, const char*src) { if ( ...

  10. linux 学习之路：mkdir命令使用

    linux mkdir 命令 在当前目录下创建文件夹,当前账号需要保证目录下有写到权限. 1.命令格式 mkdir[选项]文件名 mkdir  创建目录文件 语法:mkdir [ -m Mode ] ...