星星打分,今天我们就用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 ...
随机推荐
- laravel5.6上传图片
第一种:修改config里边的filesystems.php文件,在disks中加入下列代码 'local' => [ 'driver' => 'local', 'root' => ...
- cookies相关概念
1.什么是Cookie Cookie实际上是一小段的文本信息.客户端请求服务器,如果服务器需要记录该用户状态,就使用response向客户端浏览器颁发一个Cookie.客户端浏览器会把Cookie保存 ...
- 解决PLSQL Developer 插入中文 乱码问题
https://blog.csdn.net/guowd/article/details/50989109 PLSQL Developer 插入中文 乱码问题,如图 这个是由于oracle服务器端字符编 ...
- celery(一) application
Application application celery在使用之前,必须首先实例化.e.g. app = Celery() app 是线程安全的,即:不同配置.组件和任务的多个app可以共存在同一 ...
- 红黑树(red-black tree)实现记录
https://github.com/xieqing/red-black-tree A Red-black Tree Implementation In C There are several cho ...
- 初步了解Spring
1.了解“控制反转” 控制反转也称为依赖注入,是面向对象编程中的一种设计理念,用来降低程序代码之间的耦合度. 下面是一个最简单的打印机实例 纸张接口,纸张有大小 继承它的有两个类,两种纸张大小的类 A ...
- vue环境项目启动后因为eslint语法限制报错
报错太多,截取了一部分. 解决方法找到项目根目录的build 找到webpack.base.conf.js 打开js文件找到下图的位置 再重新启动项目就好了
- 从零开始学spring cloud(七) -------- Spring Cloud OpenFegin
一.OpenFegin 介绍 Feign是一个声明性的Web服务客户端. 它使编写Web服务客户端变得更容易. 要使用Feign,请创建一个界面并对其进行注释. 它具有可插入的注释支持,包括Feign ...
- 微信小程序记账本进度三
//index.jsvar util = require("../../utils/util.js"); //获取应用实例 var app = getApp(); Page({ d ...
- python requests库网页爬取小实例:百度/360搜索关键词提交
百度/360搜索关键词提交全代码: #百度/360搜索关键词提交import requestskeyword='Python'try: #百度关键字 # kv={'wd':keyword} #360关 ...