携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第12天，点击查看活动详情 >>
https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js
获取页面中元素到文档区域document的横向、纵向坐标的两种方法及其比较 在js控制元素运动的过程中，对于页面元素坐标位置的获取是经常用到的，这里主要总结下两种方法：
因为js是单线程的，所以有js写贪吃蛇可以少考虑很多东西，感觉非常方便。今天给大家介绍一个非常简单的贪吃蛇写法。我说的非常简单勒，就是指没有游戏结束，也不会变长。哈哈，反正就是非常简单了。
分享一个用原生JS实现的可拖拽照片墙，效果如下： 实现代码如下： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type"
给大家分享一个用原生JS实现拖拽元素时与另个一元素碰撞检测的小Demo，效果如下：
分享一款基于js的图片排序效果。鼠标拖动图片，重新排列图片的排列顺序。该插件适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下：
•问题标注 Q:(question)•答案标注 R:(result)•注意事项标准：A:(attention matters)•详情描述标注：D:(detail info)•总结标注：S:(summary)•分析标注：Ana:(analysis)•提示标注：T:(tips)
不知各位遇到特别长的图片时是怎么处理的？ 是 截取符合长宽的部分做临时展示？ 还是 硬要长宽100%模糊（啥也看不清）展示？ 还是 先拿一个压缩的图片做占位，在鼠标移入或点击时放大预览？
携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情 >>
效果： 需求： 1.记录循环滚动； 2.每组记录之间不能有留白； 3.每条记录上移到容器的顶部时要停顿一下； 4.鼠标移入容器时停止滚动，移出时继续滚动。 曾想用的实现方法： 1.使用Marquee：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>打飞机</title> <style> #gamePanel{width:900px;height:500px;background:Black;position:absolute;left:100px;top:100px;} #gamePanel .score{font-size:12px;color:White;position:absolute;left:0;top:0;z-index:9999;} #gamePanel .bullet{width:5px;height:15px;position:absolute;background:url(img/bullet.png);overflow:hidden; _background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/bullet.png");} #gamePanel .flyer{width:48px;height:54px;position:absolute;background:url(img/flyer1.png); _background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/flyer1.png");} #gamePanel .enemy1{width:29px;height:32px;position:absolute;background:url(img/enemy1.png); _background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/enemy1.png");} #gamePanel .enemy2{width:26px;height:26px;position:absolute;background:url(img/enemy2.png); _background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/enemy2.png");} #gamePanel .enemy3{width:48px;height:48px;position:absolute;background:url(img/enemy3.png); _background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/enemy3.png");} #gamePanel .enemy4{width:48px;height:48px;position:absolute;background:url(img/enemy4.png); _background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/enemy4.png");} #gamePanel .bingo{width:18px;height:18px;position:absolute;background:url(img/bingo.png); _background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/bingo.png");} #gamePanel .change{width:40px;height:40px;position:absolute;background:url(img/change.png); _background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/change.png");} #startBtn{border-width:20px;border-style:solid;border-color:Black Black Black Green; po
今天在做页面UI改版的时候发现，我之前使用的是dom.scrollIntoView(); 使得点击右侧题目编号的时候，让左侧题目滚动到页面可视区域。
offsetWidth 和 offsetHight：获取元素的宽高 + padding + border，不包括margin。如下：
引用JS文件的代码： vardelta=0.15 varcollection; functionJavaScript
------------------------------------盒子模型常用的八个属性--------------------------------- Js盒子模型 Js盒子模型指的是通过js提供的一系列的属性和方法，获取页面中元素的样式信息值 client系列(当前元素的私有属性) clientWidth/clientHeight:内容的宽度/高度+左右/上下填充，（和内容溢出没有关系） clientLeft:左边框的宽度(borderLeftWidth) clientTop:上
使用requestAnimationFrame代替setTimeout和setInterval：
一、飞机大战代码 1、今天我来分享一个飞机大战的代码,代码是用html+css+js写成的，还有一个img的文件夹，也就是放照片的，image文件夹链接放在下面。废话不多说代码在下面，大家自行观看！！！ 2、 由于各种原因我们无法将image文件夹放在博文上，非常的抱歉！你们可以加我微信进群拿照片，我的微信号: y27724611159，大加加完好友之后我就把照片发个你们！！！真的不好意思 3、注意：请把放照片的文件夹务必命名为image ！！！有兴趣的小伙伴们可以去http://haiyong.site
上篇文章有介绍一些小程序的自定义组件语法，这篇文章就不多做赘述，重点介绍组件的实现逻辑。
分享一个由原生JS实现的苹果菜单栏效果，效果如下： 实现的代码如下： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Ty
定义游戏页面 通过HTML定义一个游戏页面。代码如下： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <meta http-equiv="content" content="text/html" charset="utf-8"/> <link rel="stylesh
在js中，offsetParent 属性表示最近的上级定位元素。要获取相对父级元素的位置，可以先判断 offsetParent 属性是否指向父元素，如果是，则直接使用 offsetLeft 和 offsetTop 属性获取元素相对于父元素的距离；否则分别获得当前元素和父元素距离窗口的坐标，然后求差。
在做网站开发的时候，经常会用到悬浮的侧边栏，让一些信息一直显示在当前的屏幕下，如联系方式与分享，下面给大家分享一个小Demo，实现效果如下：
分享一个用原生JS实现的特效导航条，效果如下： 实现代码如下： <!DOCTYPE html> <head> <meta charset="utf-8" /> <title>原生J
我入职第二家公司接到的第一个需求就是修复之前外包做的滚动吸顶效果。我当时很纳闷为何一个滚动吸顶会有 bug，后来我查看代码才发现直接用的是 offsetTop 这个属性，而且并没有做兼容性处理。
随着技术不断更新与用户审美不断提升，一些App中/浏览器中的常用交互也在对用户更加友好，在某些数据展示较多页面或者导航栏页面，为了将栏目划分，使得视图模块更加明显，吸顶效果便在此背景下孕育而生。 那么，我们如何在web端来做一个吸顶效果呢？
在部分android机型上测试点击靠下的输入框时遇到弹出的软键盘挡住输入框问题，ios可自身弹起（ios自身的调整偶尔也会出问题，例如第三方键盘会遮挡，原因是第三方输入法的tool bar或者键盘也被当做可视区域，这里不做讨论）
需要做一个导出PDF的功能，网上找有很多，但是一般导出来的都是比较模糊的那种，下面这个是高清版的，导出的PDF都是几M，跟正常手动导出的差不多，很清晰。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>照片墙一多实
作者：汪娇娇 日期：2016.12.8 在现在这个公司呆了4个多月，也是研究了canvas将近4个月，前两周心里就痒痒的想写这方面的博客，但一直没时间。可一直拖着也不是个办法，就这样抽抽空来写吧。 c
在现在这个公司呆了4个多月，也是研究了canvas将近4个月，前两周心里就痒痒的想写这方面的博客，但一直没时间。可一直拖着也不是个办法，就这样抽抽空来写吧。
想要实现图片持续滚动，既然使用js,就千万不要加css动画、过渡等相关样式，如果想要滚动的平滑一下，可以一像素一像素的感动，则很平滑，如果加了过渡动画，当图片重置为0时，会有往回倒的动画效果，跟预期不符。
功能介绍： 可以实现锁定表格的行和列的功能，效果和Excel里的冻结窗格类似，当然没有Excel那么强大了，只是类似。 问题： 当一个table太大而导致在屏幕里显示不下的时候，IE会出现滚动条，但是这时候就不好看了，对用户的操作也不是很方便。于是我们就想给他加一个限制，在制定的范围内滚动。 如何实现呢？网上也有不少实现方法了，效果如何就不发表意见了，这里主要是想说一下我的思路。 思路： 1、其实思路很简单，div有一个“功能”，给他的style 加上 "CLEAR: non
$("#tab-a-" + options.menuID).click(); // 选中打开的tab
js 实现拖拽，主要使用元素的 onmousedown、onmousemove、onmouseup 三个事件实现。
最近在学习的过程中发现了我之前未曾了解过的一些特性，发现有些很有趣并且在处理一些问题的时候可以给我一个新的思路。
先放个图看看滑动固顶是啥效果： image.png 中间那个 tab 条，平常的时候是固定的，等到页面滑上去的时候，又像 fixed 一样贴在顶部。 position: sticky 就是用来实现这个效果的，元素不脱离文档流，仍然保留高度，所以这个属性真是人畜无害啊，而且效果如丝般润滑，堪比原生。 事实上，很多看起来人畜无害的东西，其背后都有一个大坑。 我们的 html 结构是这样的： <body ontouchstart=""> 06
client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列 的相关属性可以动态的得到该元素的边框大小、元素大小等。
在用JS编写动画的时候，经常用会到布局转换，即在运动前将相对定位转为绝对定位，然后执行动画函数。下面给大家分享一个运用原生JS实现的布局转换的Demo，效果如下:
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/117400.html原文链接：https://javaforall.cn
一、测试1：无滚动条时，dom对象的offsetWidth、clientWidth和scrollWidth
这次的案例稍微有一点难度，在css和js上都需要多加思考，话不多说，让我们来开始吧~
前端 ：Nuxt.js/vue-router/ Vuex/ ELement-ui 后端 ：Node.js/Koa2/Koa-router/Nodemailer/Passport HTTP通讯 ：Axios 数据支撑 ：Mongoose/Redis/高德地图web服务api接口
随着Markdown越来越流行，Markdown编辑器也越来越多，除去所见即所得的实时预览编辑器外，通常其他Markdown编辑器都会采用源代码和预览双栏显示的方式，就像这样：
是不是觉得不可思议，js已经强大到这个地步？ 是的，js日新月异，它在不断的进步。只要稍不留神，那我们都只能望尘莫及了。
给大家分享一个拖拽元素时添加预览的小Demo，效果如下： 以下是代码实现，欢迎大家复制粘贴及吐槽。 <!DOCTYPE html> <html> <head> <meta http-equ
我们有时需要获得鼠标在某盒子中的位置，或者是随意移动某盒子的位置，在这些场景中我们可能经常需要用到clientWidth、offsetWidth、offsetTop啊等等。但是对于初学者来说（包括我），看到这些就头疼，因为感觉意思都相近，但作用却不同，所以今天天我就来捋一捋，搞清楚，后面好干活。好吧，废话不多说，开始吧。
现在jquery越来越没落了，但是我们的老项目还在用jquery，要更换就必须了解哪些和jquery等效的js方法。
纯JavaScript模仿微信打飞机游戏，做网页小游戏的借鉴下，界面设计是竖长形仿手机屏幕风格，游戏效果流畅。具有分数统计，里面的JS封装类中包括有创建飞机类、飞机移动行为控制，创建子弹类，产生min到max之间的随机数，判断本方飞机是否移出边界,如果移出边界,则取消mousemove事件,反之加上mousemove事件，为暂停界面的继续按钮添加暂停事件，创建敌方飞机类、碰撞判断、完成界面的初始化，敌方小飞机一个，我方飞机一个。 //获得主界面 var mainDiv=document.getElem
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
