当前位置： 首页 > news >正文

前端:运用html+css+jquery.js实现截图游戏

news 2026/3/28 13:55:30

在这里插入图片描述

前端:运用html+css+jquery.js实现截图游戏

        • 1. 前言
        • 2. 实现原理
        • 3. 参考代码和运行结果

1. 前言

最近在刷手机视频时，总是能刷到一个这样的视频，视频上是一个截图游戏，当图片上的某个片段正好在图片的正确位置时，暂停视频，截好图发到评论区，显示你很牛逼，哈哈。如果读者觉得小编这篇博客让读者学到了一些关于前端布局的知识，希望读者能点赞支持一下。
请添加图片描述，上述运行结果正好演示这个截图效果。

2. 实现原理

怎样把一张图片分成多个部分呢？个人觉得可以这样做，首先，需要创建对应多的标签元素，对于每一个标签元素，设置相应的宽度和高度，然后css样式中设置背景图片background-image，背景图片位置background-position-x、background-positon-y(经过计算即可)，这样就可以实现把一张图片分成多张小图片。关于这些对应多的标签元素，考虑使用li标签。关于li标签的布局，先把其父标签ul设置为相对定位(position:relative)，然后其子标签li标签使用绝对定位(position:absolute)，然后设置相应的top、left值即可。至于其中一个部分动的画面，使用定时器，定时器内部的函数操作这个部分的top、left值即可。
请添加图片描述
考虑使用原生的js代码实现上述效果，代码量会大一些，于是使用封装的js库jquery.js，关于代码中jquery的一些知识，小编在此讲述一下。

$(‘body ul li’)
上述是查找 html 中标签元素，如果标签元素是单个，使用.attr(属性名称)即可获取这个元素的相关属性，如果标签元素是多个，那么是获取查找的标签元素的第一个元素的相关属性。
.each((ele)=>{})是对查找的元素进行遍历，其中ele是查找的元素中每一个，相当于js中forEach
想了解跟多关于jquery的知识，可以去jquery知识专栏学习，链接为：W3school

3. 参考代码和运行结果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>截图</title><style>*{margin: 0;padding: 0;}body ul{width: 500px;height: 518px;margin: 20px auto;list-style: none;position: relative;}body button{margin:0 auto;width: 30px;height: 25px;display: block;}.margin-top-1px{margin-top: 1px;}body ul li{background-image: url('./1.jpg');width: 125px;height: 172px;position: absolute;text-align: center;line-height: 172px;font-size: 25px;font-weight: bolder;color: red;z-index: 1;}</style><script src="./jquery.js"></script>
</head>
<body>
</body>
<script type="text/javascript">// 图片大小 500 * 518// 500/4 = 125 518/3 = 172 余 2var arr = '鼠牛虎兔龙蛇马羊猴鸡狗猪'.split('');var _str = '';for(let i=0;i<12;i++){if(i >= 4){_str += `<li class="margin-top-1px"></li>`}else{_str += '<li></li>';}}$('body').html(`<ul>${_str}</ul><button>暂停</button>`);$('body ul li').each((index,ele)=>{$(ele).css({'top':parseInt(index/4)*172+'px','left':(index%4)*125+'px','backgroundPositionX': -(index % 4) * 125 + 'px','backgroundPositionY': -parseInt(index / 4) * 172 + 'px'});$(ele).text(arr[index]);});var ele2 = $('body ul li').eq(1);ele2.css('zIndex',2);var flag = 'r'; // 状态 r b l tvar fun1 = ()=>{let top = parseInt(ele2.css('top'));let left = parseInt(ele2.css('left'));// ul 标签样式 宽度 和 高度 为 500 , 518// 500 - 125 = 375 518 - 172 = 346if (top == 0 && left >= 375) flag = 'b';if(left == 375 && top >= 346)flag = 'l';if(top == 346 && left <= 0)flag = 't';if(left == 0 && top <= 0)flag = 'r';if(flag == 'r')left ++;else if(flag == 'b')top ++;else if(flag == 'l')left --;else top --;ele2.css({'top': top + 'px','left': left + 'px'});// console.log(top,left);};var timer2 = setInterval(fun1,10);var flag2 = true;$('body button').click(()=>{if(flag2){let top = parseInt(ele2.css('top'));let left = parseInt(ele2.css('left'));clearInterval(timer2);flag2 = false;$('body button').text('开始');if(top == 0 && left == 125){alert('组图成功！');}}else{flag2 = true;timer2 = setInterval(fun1, 10);$('body button').text('暂停');}});
</script>
</html>

运行结果：

前端:运用html+css+jquery.js实现截图游戏

相关文章：

前端:运用html+css+jquery.js实现截图游戏

前端:运用htmlcssjquery.js实现截图游戏 1. 前言2. 实现原理3. 参考代码和运行结果 1. 前言 最近在刷手机视频时&#xff0c;总是能刷到一个这样的视频&#xff0c;视频上是一个截图游戏&#xff0c;当图片上的某个片段正好在图片的正确位置时&#xff0c;暂停视频&#xff0c;…...

编程日记 2023/8/19 2:27:51

Maven之JDK编译问题

IDEA Maven 默认使用 JDK 1.5 编译问题 IDEA 在「调用」maven 时&#xff0c;IDEA 默认都会采用 JDK 1.5 编译&#xff0c;不管你安装的 JDK 版本是 JDK 7 还是 JDK 8 或者更高。这样一来非常不方便&#xff0c;尤其是时不时使用 JDK 7/8 的新特性时。如果使用新特性&#xff…...

编程日记 2023/8/19 2:26:50

开发测试框架一 - 创建springboot工程及基础操作

一、创建及运行方式 1. 从官网导入&#xff1a; 注意&#xff1a;由于我的java版本是1.8&#xff1b;所以选中了spring2.7.14&#xff1b;如果你的java版本是9及以上&#xff0c;选中spring3相关的同时Java 版本也要对应起来 2. 创建第一个get请求 创建Controller package及…...

编程日记 2023/8/19 2:25:48

【IMX6ULL驱动开发学习】08.马达驱动实战：驱动编写、手动注册平台设备和设备树添加节点信息

目录 一、使用设备树 1.1 修改设备树流程 二、手动创建平台设备 三、总结&#xff08;附驱动程序&#xff09; 前情提要&#xff1a;​​​​​​​【IMX6ULL驱动开发学习】07.驱动程序分离的思想之平台总线设备驱动模型和设备树_阿龙还在写代码的博客-CSDN博客 手动注册…...

编程日记 2023/8/19 2:24:47

直方图均衡化和自适应直方图均衡化

前言&#xff1a; Hello大家好&#xff0c;我是Dream。 均衡化是数字图像处理中常用的一种技术&#xff0c;用于增强图像的视觉效果和对比度。&#xff0c;今天我们将实现对同一张图像的直方图均衡化和自适应直方图均衡化处理&#xff0c;学习一下两者的的基本原理和实现过程&a…...

编程日记 2023/8/19 2:23:46

京东门详一码多端探索与实践 | 京东云技术团队

本文主要讲述京东门详业务在支撑过程中遇到的困境&#xff0c;面对问题我们在效率提升、质量保障等方向的探索和实践&#xff0c;在此将实践过程中问题解决的思路和方案与大家一起分享&#xff0c;也希望能给大家带来一些新的启发 一、背景 1.1、京东门详介绍 1.1.1、京东门…...

编程日记 2023/8/19 2:22:44

数据挖掘 | 零代码采集房源数据，支持自动翻页、数据排重等

1 前言 城市规划、商业选址等应用场景中经常会对地区房价、地域价值进行数据分析&#xff0c;其中地区楼盘房价是分析数据中重要的信息参考点&#xff0c;一些互联网网站上汇聚了大量房源信息&#xff0c;通过收集此类数据&#xff0c;能够对地区房价的分析提供参考依据。 如何…...

编程日记 2023/8/19 2:20:37

迪米特法则

迪米特法则&#xff0c;也称为最少知识原则&#xff08;Law of Demeter&#xff09;&#xff0c;是面向对象设计中的一个原则&#xff0c;旨在降低对象之间的耦合性&#xff0c;提高系统的可维护性和可扩展性。该原则强调一个类不应该直接与其它不相关的类相互交互&#xff0c;…...

编程日记 2023/8/19 2:19:35

云积天赫｜AIGC+营销的排头兵

AIGC生成式人工智能&#xff0c;正逐渐成为人们关注的焦点。AIGC的出现&#xff0c;标志着人工智能已经进入了一个全新的时代。AIGC的出现&#xff0c;也为营销行业带来了新的活力。那么企业该怎么利用这次AIGC浪潮&#xff0c;成为AIGC营销的排头兵呢&#xff1f; 　　 　　“…...

编程日记 2023/8/19 2:17:29

Oracle 数据库备份

1、使用管理员账号创建对应的directory目录 登录数据库 sqlplus / as sysdba 创建directory create or replace directory dumpdir as F:\container; 2、给用户赋予使用该目录的权限 grant read,write on directory dumpdir to Scott; 查看创建的目录位置 select * fro…...

编程日记 2023/8/19 2:16:28

【C++】模板template

&#x1f525;&#x1f525; 欢迎来到小林的博客&#xff01;&#xff01;       &#x1f6f0;️博客主页&#xff1a;✈️林 子       &#x1f6f0;️博客专栏&#xff1a;✈️ C       &#x1f6f0;️社区 :✈️ 进步学堂       &#x1f6f0;️欢…...

编程日记 2023/8/19 2:15:26

智能工厂：适应不断变化的制造世界

制造业已经从过去传统的装配线工艺流程中走了很长一段路。随着技术的进步和工业 4.0 的兴起&#xff0c;制造业正在迅速发展&#xff0c;以满足现代世界不断变化的需求。近年来出现的一个关键概念就是“智能工厂”。在这篇文章中&#xff0c;我们将探讨什么是智能工厂、它是如何…...

编程日记 2023/8/19 2:14:25

大数据课程I3——Kafka的消息流与索引机制

文章作者邮箱：yugongshiye@sina.cn 地址：广东惠州 ▲ 本章节目的 ⚪ 掌握Kafka的消息流处理； ⚪ 掌握Kafka的索引机制； ⚪ 掌握Kafka的消息系统语义； 一、Kafka消息流处理 1. Producer 写入消息 流程说明： 1. producer 要向Kafka生产消息，需要先通过…...

编程日记 2023/8/19 2:13:24

LVGL学习笔记 28 - 键盘keyboard

目录 1. 设置关联文本框 2. 设置模式 2.1 LV_KEYBOARD_MODE_TEXT_LOWER 2.2 LV_KEYBOARD_MODE_TEXT_UPPER 2.3 LV_KEYBOARD_MODE_SPECIAL 2.4 LV_KEYBOARD_MODE_NUMBER 2.5 LV_KEYBOARD_MODE_USER_1 ~ LV_KEYBOARD_MODE_USER_4 3. 使能弹窗模式 4. 更改按键布局 5. 事…...

编程日记 2023/8/19 2:12:23

【Microsoft 支持】【数据库-MySql】当您尝试从大于 5000 的 TCP 端口连接时收到错误 WSAENOBUFS (10055)

​ 一、转载原文 When you try to connect from TCP ports greater than 5000 you receive the error ‘WSAENOBUFS (10055)’ Symptoms If you try to set up TCP connections from ports that are greater than 5000, the local computer responds with the following WSAE…...

编程日记 2023/8/19 2:11:21

【学会动态规划】最长湍流子数组（23）

目录 动态规划怎么学&#xff1f; 1. 题目解析 2. 算法原理 1. 状态表示 2. 状态转移方程 3. 初始化 4. 填表顺序 5. 返回值 3. 代码编写 写在最后&#xff1a; 动态规划怎么学&#xff1f; 学习一个算法没有捷径&#xff0c;更何况是学习动态规划&#xff0c; 跟我…...

编程日记 2023/8/19 2:10:20

【网络编程·网络层】IP协议

目录 一、IP协议的概念 二、IP协议的报头 1、四位首部长度 2、16位总长度&#xff08;解包&#xff09; 3、8位协议&#xff08;分用&#xff09; 4、16位首部校验和 5、8位生存时间 6、32位源IP和32位目的IP 7、4位版本/8位服务类型 8、16位标识 9、3位标志 10、1…...

编程日记 2023/8/19 2:09:17

HTML详解连载（7）

HTML详解连载&#xff08;7&#xff09; 专栏链接 [link](http://t.csdn.cn/xF0H3)下面进行专栏介绍 开始喽结构伪类选择器作用 :nth-child&#xff08;公式&#xff09;作用举例 伪元素选择器作用注意&#xff1a; PxCoook作用盒子模型-重要组成部分 盒子模型-边框线属性名属性…...

编程日记 2023/8/19 2:08:16

一文打通redis中的String类型

目录 基本介绍 基本语法 常用命令解读 概述 SETNX key value SETNX key value GETRANGE key start end GETSET key value GETBIT key offset MGET key1 [key2..] STRLEN key 基本介绍 ①String是Redis最基本的类型,一个key对应一个value。 ②String类型是二进制…...

编程日记 2023/8/19 2:07:16

优测云服务平台|【压力测试功能升级】轻松完成压测任务

一、本次升级主要功能如下&#xff1a; 1.多份报告对比查看测试结果 2.报告新增多种下载格式 Word格式Excel格式 3.新增多种编排复杂场景的控制器 漏斗控制器并行控制器事务控制器仅一次控制器分组控制器集合点 4.新增概览页面&#xff0c;包含多种统计维度 二、报告对比…...

编程日记 2023/8/19 2:06:14

如何快速进行.NET Core安全审计：10个关键漏洞扫描技巧

如何快速进行.NET Core安全审计&#xff1a;10个关键漏洞扫描技巧 【免费下载链接】core dotnet/core: 是 .NET Core 的官方仓库&#xff0c;包括 .NET Core 运行时、库和工具。适合对 .NET Core、跨平台开发和想要使用 .NET Core 进行跨平台开发的开发者。 项目地址: https:…...

编程新知 2026/3/28 13:42:25

手把手教你：FinalShell控制台背景图片自定义替换（无需VIP权限）

1. 为什么需要自定义FinalShell控制台背景&#xff1f; 作为一个每天要和命令行打交道的开发者&#xff0c;我深知一个舒适的开发环境有多重要。FinalShell作为国产SSH客户端的佼佼者&#xff0c;默认的深色背景虽然专业&#xff0c;但看久了难免单调。你可能不知道&#xff0…...

编程新知 2026/3/28 10:55:05

零基础快速入门前端蓝桥杯Web应用开发 DOM 核心知识点（适配省赛/国赛高频考点）(可用于备赛蓝桥杯Web应用开发)

DOM 是蓝桥杯 Web 赛道的必考核心&#xff0c;贯穿所有实操编程题&#xff0c;从基础元素获取到复杂交互、性能优化均有覆盖&#xff0c;以下按考点优先级和模块完整梳理&#xff0c;适配历年真题考情。 一、DOM 基础认知与元素获取&#xff08;所有题的前置基础&#xff0c;1…...

编程新知 2026/3/28 10:20:52

5V低压开环FOC驱动器：低成本实现微型电机流畅控制

1. 5V低压开环FOC驱动器的核心价值 对于很多电子爱好者和小型项目开发者来说&#xff0c;控制微型电机常常会遇到两个难题&#xff1a;要么控制方案太贵&#xff0c;要么效果不够理想。我自己在开发桌面旋转展示台时就深有体会——市面上的驱动器要么价格高昂&#xff0c;要么体…...

编程新知 2026/3/28 9:38:28

日本留学中介避坑指南：免费申请与实体保障，哪种模式更适合你？

摘要随着赴日留学热度持续攀升&#xff0c;市面上的日本留学中介机构也如雨后春笋般涌现。对于计划通过语言学校过渡并升学的学生及家庭而言&#xff0c;如何在‘免费申请’与‘传统收费’、‘线上服务’与‘实体保障’之间做出抉择&#xff0c;往往充满困惑与信息不对称。本文…...

编程新知 2026/3/28 8:23:49

Kimi-VL-A3B-Thinking作品分享：OCR识别模糊手写体+公式识别+LaTeX自动转换

Kimi-VL-A3B-Thinking作品分享&#xff1a;OCR识别模糊手写体公式识别LaTeX自动转换 1. 引言&#xff1a;当AI能看懂你的草稿纸 想象一下&#xff0c;你有一张拍得有点模糊的会议白板照片&#xff0c;上面潦草地写满了讨论要点和几个复杂的数学公式。或者&#xff0c;你翻出一…...

编程新知 2026/3/28 8:03:41

不止于安装：将Helowin Oracle 11g Docker镜像改造为可持续使用的开发数据库

从临时容器到生产级服务&#xff1a;Helowin Oracle 11g Docker镜像深度定制指南 当开发团队决定采用Docker化的Oracle数据库作为开发测试环境时&#xff0c;往往会遇到一个尴尬的现实&#xff1a;大多数现成镜像要么过于臃肿&#xff0c;要么配置不符合项目规范。Helowin的Ora…...

编程新知 2026/3/28 7:33:17

ABAP开发避坑指南：绕过SAP GUI安全弹窗的5种编程方案实测

ABAP开发实战&#xff1a;5种绕过SAP GUI安全弹窗的编程方案深度解析 引言&#xff1a;SAP GUI安全机制的困境与突破 在SAP系统的日常开发与运维中&#xff0c;频繁出现的"系统试图创建文件"安全弹窗堪称ABAP开发者的噩梦。这种设计初衷为保护本地文件安全的机制&…...

编程新知 2026/3/28 6:54:52

2023年VSCode插件开发全指南：从零发布你的第一个扩展（TypeScript版）

2023年TypeScript生态下的VSCode插件开发实战 在当今开发者工具生态中&#xff0c;Visual Studio Code以其轻量化和高度可扩展性占据了绝对领先地位。根据2023年Stack Overflow开发者调查报告&#xff0c;VSCode以74.48%的使用率成为最受欢迎的代码编辑器。而插件系统正是其生态…...

编程新知 2026/3/28 6:34:47

Qwen3-ASR-0.6B与LaTeX集成：学术语音笔记系统

Qwen3-ASR-0.6B与LaTeX集成&#xff1a;学术语音笔记系统 1. 引言 学术研究工作中&#xff0c;记录和整理笔记是每个研究者都要面对的重要任务。无论是参加学术会议、听讲座&#xff0c;还是记录自己的研究思路&#xff0c;传统的手写或打字方式往往效率不高&#xff0c;特别…...

编程新知 2026/3/28 5:42:06