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.mzph.cn/news/663209.shtml

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

相关文章

幻兽帕鲁社区服务器搭建架设开服教程(LINUX)

幻兽帕鲁社区服务器搭建架设开服教程(LINUX) 大家好我是艾西,上一期我给大家分享了windows系统版本的幻兽帕鲁服务器搭建教程。因为幻兽帕鲁这游戏对于服务器的配置有一定的要求很多小伙伴就思考用linux系统搭建的话占用会不会小一点&#x…

华为云CodeArts Snap荣获信通院优秀大模型案例及两项荣誉证书

2024年1月25日,中国人工智能产业发展联盟智能化软件工程工作组(AI for Software Engineering,下文简称AI4SE)在京召开首届“AI4SE创新巡航”活动。在活动上,华为云大模型辅助系统测试代码生成荣获“2023AI4SE银弹优秀案…

代码随想录算法训练营第二十四天| 77. 组合。

77. 组合 题目链接:组合 题目描述: 给定两个整数 n 和 k,返回范围 [1, n] 中所有可能的 k 个数的组合。 你可以按 任何顺序 返回答案。 解题思路: 本题是经典的回溯法解决的组合问题,回溯问题搞清楚纵向递归横向遍历即…

混乱字母排序——欧拉路数论

题目描述 小明接到一个神秘的任务:对于给定的 n 个没有顺序的字母对(无序代表这两个字母可以前后顺序颠倒,区分大小写)。请构造一个有 (n1) 个字母的混乱字符串使得每个字母对都在这个字符串中出现。 输入输出格式 输入格式 第…

KVM虚拟机MAC地址冲突,引发服务器对xshell说:Go away!

转载说明:如果您喜欢这篇文章并打算转载它,请私信作者取得授权。感谢您喜爱本文,请文明转载,谢谢。 开场白 最近在机房的服务器上装kvm虚拟主机。 不经意间,上演了一场由MAC地址异常而引发的服务器与xshell之间的血案…

宠物商业数据分析

一、宠物热销品类分布 欧睿国际更有一份数据表明,宠物食品在所有“它经济”中占比是最大,仅仅是猫狗食品就达到了59.1%,增速也远高于其他宠物用品。 2018年,中国就已经有超7700万独居成年人口,国内养宠主力军中90后占…

c++阶梯之auto关键字与范围for

auto关键字&#xff08;c11&#xff09; 1. auto关键字的诞生背景 随着程序的逐渐复杂&#xff0c;程序代码中用到的类型也越来越复杂。譬如&#xff1a; 类型难以拼写&#xff1b;含义不明确容易出错。 比如下面一段代码&#xff1a; #include <string> #include &…

nginx无法启动,win10占用80端口 (注册表方式解决)

参考&#xff1a;https://blog.csdn.net/qq_39523111/article/details/128853509 改为4 重启后 不再占用 pid 不是4了 已经变为nginx了 改为0 没起作用 发现 80端口还是被 4占用 可以 把 服务中的 SQL Server Reporting Services关掉

2024年美赛B题思路分析 - 搜索潜水器

# 1 赛题 问题B&#xff1a;搜索潜水器 总部位于希腊的小型海上巡航潜艇&#xff08;MCMS&#xff09;公司&#xff0c;制造能够将人类运送到海洋最深处的潜水器。潜水器被移动到该位置&#xff0c;并不受主船的束缚。MCMS现在希望用他们的潜水器带游客在爱奥尼亚海底探险&…

【疑问】为什么声明和定义要分离

前言 我们在学习的时候接触过一个话&#xff1a;编写自定义函数的时候 要做到声明和定义分离 那么为什么呢 今天就来简单的了解一下 疑问&#xff1a;错误的发生 下面给出两个源文件和一个头文件以及报错信息 text.cc文件 #include"head.h"int main() {int a 1…

Pytroch 自写训练模板适合入门版 包含十五种经典的自己复现的一维模型 1D CNN

训练模板 在毕业之前&#xff0c;决定整理一下手头的代码&#xff0c;自己做1D-CNN这吗久&#xff0c;打算开源一下自己使用的1D-CNN的代码&#xff0c;包括用随机数生成一个模拟的数据集&#xff0c;到自己写的一个比较好的适合入门的基础训练模板&#xff0c;以及自己复现的…

2020年CSP-J认证 CCF非专业级别软件能力认证第一轮真题--完善程序题

2020 CCF认证第一轮&#xff08;CSP-J&#xff09;真题 三、完善程序题 第一题 质因数分解 给出正整数n&#xff0c;请输出将n质因数分解的结果&#xff0c;结果从小 到大输出。 例如&#xff1a;输入n120程序应该输出2 2 2 3 5,表示1202 X 2 X 2 X 3 X 5输入保2≤n≤10^9提…

个人建站前端篇(二)项目采用服务端渲染SSR

SSR的优点 更好的SEO首屏加载速度更快&#xff0c;用户体验更好可以使用相同的语言以及相同的声明式、面向组件的心智模型来开发整个应用&#xff0c;而不需要在后端模板系统和前端框架之间来回切换。 Vue生态中的SSR通用解决方案 Nuxt是一个构建于 Vue 生态系统之上的全栈框…

springboot 整合 PowerJob实现定时任务调度

最近项目需要使用定时任务&#xff0c;而使用了PowerJob做任务调度模块&#xff0c;感觉这个框架真香&#xff0c;今天我们就来深入了解一下新一代的定时任务框架——PowerJob&#xff01; 简介 PowerJob是基于java开发的企业级的分布式任务调度平台&#xff0c;与xxl-job一样…

10个React状态管理库推荐

本文将为您推荐十款实用的React状态管理库&#xff0c;帮助您打造出高效、可维护的前端应用。让我们一起看看这些库的魅力所在&#xff01; 在前端开发中&#xff0c;状态管理是至关重要的一环。React作为一款流行的前端框架&#xff0c;其强大的状态管理功能备受开发者青睐。…

2.2学习总结

2.2 1.⼀和零 2.零钱兑换II 3.组合总和 Ⅳ 4.零钱兑换 5.完全平⽅数 6.封印 7.杨辉三角形 8.卡牌 9.最大子段和 题1&#xff1a;https://leetcode.cn/problems/ones-and-zeroes/description/ 01背包问题&#xff0c;其中m&#xff0c;n分别是背包的容量&#xff0c;s字符串中…

力扣hot100 二叉树的右视图 DFS BFS 层序遍历 递归

Problem: 199. 二叉树的右视图 文章目录 思路&#x1f496; BFS&#x1f496; DFS 思路 &#x1f469;‍&#x1f3eb; 甜姨 &#x1f496; BFS ⏰ 时间复杂度: O ( n ) O(n) O(n) &#x1f30e; 空间复杂度: O ( n ) O(n) O(n) class Solution {public List<Integer&…

NFT Insider #119:The Sandbox 举办VoxEdit 战士装备设计比赛,周星驰 Nobody NFT开启铸造

引言&#xff1a;NFT Insider由NFT收藏组织WHALE Members &#xff08;https://twitter.com/WHALEMembers&#xff09;、BeepCrypto &#xff08;https://twitter.com/beep_crypto&#xff09;联合出品&#xff0c;浓缩每周NFT新闻&#xff0c;为大家带来关于NFT最全面、最新鲜…

【Android】高仿京东三级类型列表Demo

本demo基于二级分类双列表联动Demo进行了改进&#xff0c;高仿实现了京东的三级类型列表。 京东的如图&#xff1a; 本demo的&#xff1a; 改进之处 实现了三级列表联动&#xff0c;二三级列表之间的滑动监听优化了一下&#xff0c;将二级类型选中交予自身的点击事件&#…

IDEA如何进行远程Debug调试

背景&#xff1a; 使用docker进行CVE漏洞复现的时候&#xff0c;由于只能黑盒进行复现&#xff0c;并不能知道为什么会产生这个漏洞&#xff0c;以及漏洞的POC为什么要这么写&#xff0c;之前我都是通过本地debug来进行源码分析&#xff0c;后来搜了一下&#xff0c;发现可以进…