奉化区城乡建设局网站,如何建设一个国外网站,手机软件下载网站,承德网站制作方案前端:运用htmlcssjquery.js实现截图游戏 1. 前言2. 实现原理3. 参考代码和运行结果 1. 前言 最近在刷手机视频时#xff0c;总是能刷到一个这样的视频#xff0c;视频上是一个截图游戏#xff0c;当图片上的某个片段正好在图片的正确位置时#xff0c;暂停视频#xff0c;… 前端:运用htmlcssjquery.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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title截图/titlestyle*{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;}/stylescript src./jquery.js/script
/head
body
/body
script typetext/javascript// 图片大小 500 * 518// 500/4 125 518/3 172 余 2var arr 鼠牛虎兔龙蛇马羊猴鸡狗猪.split();var _str ;for(let i0;i12;i){if(i 4){_str li classmargin-top-1px/li}else{_str li/li;}}$(body).html(ul${_str}/ulbutton暂停/button);$(body ul li).each((index,ele){$(ele).css({top:parseInt(index/4)*172px,left:(index%4)*125px,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运行结果 前端:运用htmlcssjquery.js实现截图游戏
