jQuery前段开发--星级评价和图形跟随指针移动

一、实验原理:

当鼠标移入某个星星,前面的星星都会被点亮;当鼠标移出,星星将会变暗,单击某个星星后,即可完成评论,此时鼠标移出后,被单击星星前面的星星都会被点亮,后面的星星变暗。

二、操作步骤:

(1)HTML结构:定义一个ul列表,ul中包含5个li元素,每个li元素对应一个星星的位置,通过css代码为li元素设置背景图来完成星星的展示,点亮和变暗的星星都在一张图片上,通过切换背景图的显示位置,可以实现星星点亮和变暗的效果。

(2)jQuery特效:需要为li元素注册3个事件,分别为鼠标移入、鼠标单击和鼠标移出,这3个事件的处理函数中分别需要实现的功能。

   1)鼠标移入星星:为当前的li元素和它前面所有的li元素添加一个预定义的css样式“li”,通过将background-position设置为0px -29px实现点亮星星的特效;

   2)鼠标单击星星:获得当前星星位置b并设置flag=0用于表明实现单击操作;

   3)鼠标移出星星:获取flag判断鼠标是否单击星星,然后通过改变当前的li的background-position设的位置实现星星变暗的效果;

框架代码部分:

1)星级评价关键代码

2)图形跟随指针移动关键代码

1、实验中出现过的问题或错误分析

1)在进行鼠标移入星星变亮操作时因为对css相关属性的把握不清楚代码书写成

$(this).css('background-position','0 29px');导致星星不能正常变亮;

2)在进行指针跟随时应为对offset的相关功能以及用法不够了解导致图片不能跟随鼠标;

3)自己对于CSS知识遗忘过多导致开始时的页面框架不能清楚的设计;

4)自己直接书写代码没有事先进行逻辑分析导致代码的书写一波三折;

2、保证实验成功(或程序运行正确)的关键问题

1)在进行鼠标移入星星变亮操作时将29px前面加上“-”即$(this).css('background-position','0 -29px');

2)应该将自己的基础知识打牢固,熟练的掌握JQuery相关知识以便后续操作;

3)将指针跟随代码更改成$('img').offset({'top':e.pageY,'left':e.pageX})然后更好的进行下步操作;

4)在进行星级评价设计时要有清晰的逻辑构思才能方便后续代码的书写;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/449899.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ES6-let

一、基本语法 ES6 中的 let 关键字用于声明变量,并且具有块级作用域。 - 语法:let 标识符;let 标识符初始值; - 规则:1.不能重复声明let不允许在相同作用域内重复声明同一个变量2.不存在变量提升在同一作用域内,必须先声明才能试…

Mac电脑连接linux远程桌面

起因 家庭中的内网下有一台ubuntu虚拟机,只能通过ssh终端操作或者通过实体机进行操作实在有些不方便。所以便想着通过linux远程桌面的方式进行连接,由于家庭内网,延迟还是非常低的。 步骤 首先在ubuntu虚拟机上安装xrdp(可能已…

深度解析源码,Spring 如何使用三级缓存解决循环依赖

目录 一. 前言 二. 基础知识 2.1. 什么是循环依赖? 2.2. 三级缓存 2.3. 原理执行流程 三. 源码解读 3.1. 代码入口 3.2. 第一层 3.3. 第二层 3.4. 第三层 3.5. 返回第二层 3.6. 返回第一层 四. 原理深度解读 4.1. 什么要有三级缓存? 4.2.…

ToF传感器在移动机器人中的作用

原创 | 文 BFT机器人 在日新月异的机器人技术领域,技术的无缝整合正引领着人类与机器交互方式的革新潮流。ToF传感器作为变革性创新的一个例子,对移动机器人更好地感知周围环境起到了决定性的作用。 ToF传感器与激光雷达技术在创建深度图方面有着异曲同…

Vue3学习记录(一)--- 组合式API之基础概念和变量声明

一、组合式API基础 1、简介 ​ 组合式 API (Composition API) 是Vue3和Vue2的v2.7之后版本中的全新特性,是一系列API的的集合(响应式API、生命周期钩子、依赖注入等等),其风格是基于函数的组合,以一种更直观、更灵活…

python+django+vue高校学生社团管理系统euw84

社团管理系统是一个B/S模式系统,采用django框架,MySQL数据库设计开发,充分保证系统的稳定性。在系统的测试环节,主要通过功能测试的方式,验证系统的功能设计是否符合要求,能否满足使用需求。本社团管理系统…

论文阅读-在分布式数据库环境中对哈希算法进行负载均衡基准测试

论文名称:Benchmarking Hashing Algorithms for Load Balancing in a Distributed Database Environment 摘要 现代高负载应用使用多个数据库实例存储数据。这样的架构需要数据一致性,并且确保数据在节点之间均匀分布很重要。负载均衡被用来实现这些目…

springboot并mybatis入门启动

pom.xml,需要留意jdk的版本&#xff08;11&#xff09;和springboot版本要匹配&#xff08;2.7.4&#xff09;&#xff0c;然后还要注意mybatis启动l类的版本&#xff08;2.2.2&#xff09; <?xml version"1.0" encoding"UTF-8"?> <project xm…

用免费软件分流抢票Bypass辅助购买火车票的亲测可用方法

本文介绍基于分流抢票&#xff08;Bypass&#xff09;软件&#xff0c;协助购买预售、已开售或候补等各类状态的火车票的方法。 最近几天一直没有顾得上看过年回家的火车票&#xff0c;导致错过了回家车票的开售时间&#xff0c;所以当时就直接去12306的官方网站候补了&#xf…

vite打包原理

vite 工程化开发&#xff1a;打包工具 启动速度很快 核心原理还是webpack 把webpack封装了&#xff0c;把webpack对象封装了 和vue2整体结构几乎一致 webpack两种模式&#xff1a;开发&生产 代码打包编译&#xff0c;本地起一个web服务器实时预览编译后的结果 build 命令模…

爱快安装和双宽带叠加

文章目录 一、爱快安装二、爱快使用1. 配置WAN12. 配置WAN23. 配置LAN14. 配置DHCP5. DNS设置6. 多线负载7. 基础设置 三、通过交换机拨号1. 交换机设置2. 配置WAN1 一、爱快安装 &#xff08;1&#xff09;下载爱快路由ISO版本 爱快路由系统下载 &#xff08;2&#xff09;IS…

1894_透明性以及可显性

1894_透明性以及可显性 全部学习汇总&#xff1a; g_unix: UNIX系统学习笔记 (gitee.com) 这是一个透明性以及可显性的基本描述。 这个是对透明性以及可显性的功能作用的一个基本描述。 做一个简单的小结&#xff0c;从一个软件工程师的角度来看看透明性以及可显性的概念和作用…