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

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

在这里插入图片描述

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

http://www.lryc.cn/news/129269.html

相关文章:

  • 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类型
  • 优测云服务平台|【压力测试功能升级】轻松完成压测任务
  • UseEffect中使用setState更新后获取的值为何依然是更新前
  • 去掉鼠标系列之一: 语雀快捷键使用指南
  • 【Linux】Reactor模式
  • 【LeetCode 算法】Merge Two Binary Trees 合并二叉树
  • 系统架构设计师---2017年下午试题1分析与解答(试题五)
  • el-table实现静态和动态合并单元格 以及内容显示的问题
  • STM32F40X系列FSMC8路驱动LCD显示屏(LY-TFT30-39P-1509 芯片hx8352)
  • 小象课堂在线授课教育系统
  • Android 电池容量获取
  • 无涯教程-Perl - tell函数
  • 【论文综述】Transformer 综述