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

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

news 2026/5/13 5:10:03

在这里插入图片描述

前端:运用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实现截图游戏

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

1. 前言

2. 实现原理

3. 参考代码和运行结果

相关文章：

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

Maven之JDK编译问题

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

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

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

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

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

迪米特法则

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

Oracle 数据库备份

【C++】模板template

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

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

LVGL学习笔记 28 - 键盘keyboard

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

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

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

HTML详解连载（7）

一文打通redis中的String类型

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

Windows本地AI开发环境搭建：OpenClaw与Ollama集成指南

光子储层计算在无人机动态补偿中的创新应用

芯片入门必看：CPU、MCU、SoC、GPU、TPU、NPU

基于开关电容器的级联多电平逆变器，使用布尔PWM控制技术研究（Simulink仿真实现）

量子计算采购策略与技术路线比较

革命性AI图像生成工具Fooocus：让创意触手可及的完整解决方案

模拟工程师必备：口袋参考指南的实战价值与核心应用

基于 JTT1078MediaServer 的集群方案实践（Nginx + 溯源模式）轻量级车联网音视频集群

Windows安卓子系统终极指南：从基础配置到专业开发全流程

京东自动评价终极指南：如何用Python脚本轻松完成批量评价