HTML5
Jouryjc
Slowly, more quickly.
展开
-
canvas动画效果之星球守护
代码文件如题,我取了个比较炫酷的名字——星球守护。其实呢,也就是一个简单的射击小游戏。作者并不是我,具体的效果可以去这里体验。我对代码做了部分修改与注释,并且添加了爆炸音效,和游戏结束音效。ok!接下来我们就来一步一步的介绍这个游戏完成过程。1.文件结构及静态资源介绍文件结构简单到令人发指--css //c转载 2016-08-31 18:27:35 · 3591 阅读 · 0 评论 -
LS存储类库
移动端保证正常地引入库函数原创 2018-01-23 16:52:42 · 955 阅读 · 0 评论 -
解决type=file中获取不到value值
做前端开发的童鞋肯定会遇到这样的需求,获取表单里面全部input的值。但是也不难发现这样的bug,给type=“file”的input标签赋值value,然后再通过js去获取value的时候,发现根本拿不到想要的那个值,拿到的是空字符串。通过zepto或者jquery的源码也可以看出来,form表单的参数序列化方法serialize$.fn.serializeArray = function() {原创 2017-09-16 10:44:53 · 16702 阅读 · 1 评论 -
网站页面性能优化的34条黄金守则
雅虎团队经验:网站页面性能优化的34条黄金守则 1、尽量减少HTTP请求次数 终端用户响应的时间中,有80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少HTTP请求的次数。这是提高网页速度的关键步骤。 减少页面组件的方法其实就是简化页面设计。那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的转载 2017-08-14 15:42:33 · 559 阅读 · 0 评论 -
-webkit-touch-callout禁止长按菜单
微信浏览器如果js中的点击事件,长按会弹出一个javascript提示的菜单栏,有打开和取消两个选项。IOS要取消这一个默认事件,可以在父元素使用-webkit-touch-callout:none;来禁止掉这个菜单弹出。该CSS样式有两个可以取的值:default:此值表示显示默认的callout none:此值表示禁用callout`安卓不支持这个css样式,安卓就直接使用HTML5提出的co原创 2017-07-26 10:25:21 · 6679 阅读 · 0 评论 -
微信浏览器阻止页面拖动
经常开发H5的童鞋一定会遇到这样的问题,当你的页面中有滑动或者拖拽事件时,整个网页也会随着移动。然后还能够看到域名信息。这是非常崩溃的体验!但是这个问题非常好解决,只要在body标签添加禁止滑动或者拖拽事件即可。这样的话,即使是其他子事件的滑动或者拖拽也会在这里给阻止掉。document.body.addEventListener('touchmove' , function(e){ e.p原创 2017-02-20 13:01:21 · 18179 阅读 · 9 评论 -
带你跳出H5 video的坑
出坑之video原创 2016-12-15 15:35:23 · 8874 阅读 · 0 评论 -
Gulp开发教程(翻译)
对网站资源进行优化,并使用不同浏览器测试并不是网站设计过程中最有意思的部分,但是这个过程中的很多重复的任务能够使用正确的工具自动完成,从而使效率大大提高,这是让很多开发者觉得有趣的地方。Gulp是一个构建系统,它能通过自动执行常见任务,比如编译预处理CSS,压缩JavaScript和刷新浏览器,来改进网站开发的过程。通过本文,我们将知道如何使用Gulp来改变开发流程,从而使开发更加快速高效转载 2016-12-15 11:38:40 · 601 阅读 · 0 评论 -
Web性能优化:图片优化
HTTP Archieve有个统计,图片内容已经占到了互联网内容总量的62%,也就是说超过一半的流量和时间都用来下载图片。从性能优化的角度看,图片也绝对是优化的热点和重点之一,Google PageSpeed或者Yahoo的14条性能优化规则无不把图片优化作为重要的优化手段,本文覆盖了Web图片优化的方方面面,从基本的图片格式选择、到尚未被广泛支持的响应式图片均有所提及。Google转载 2016-12-15 10:12:49 · 493 阅读 · 0 评论 -
移动H5前端性能优化指南
概述1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB5. Mobile侧因手机配置原因,除加载外渲染速度也是优化重点6. 基于第五点,要合理处理代码减少渲染损耗7. 基于第二转载 2016-12-15 10:08:11 · 367 阅读 · 0 评论 -
带你跳出width=640的坑
<meta name="viewport" content="width=640,user-scalable=no">的坑原创 2016-10-20 10:34:39 · 1487 阅读 · 2 评论 -
Bower介绍
1. bower介绍Bower 是用于 web 前端开发的包管理器。对于前端包管理方面的问题,它提供了一套通用、客观的解决方案。它通过一个 API 暴露包之间的依赖模型,这样更利于使用更合适的构建工具。bower 没有系统级的依赖,在不同 app 之间也不互相依赖,依赖树是扁平的。Bower 运行在 Git 之上,它将所有包都视作一个黑盒子。任何类型的资源文件都可以打包为一转载 2016-09-21 18:08:05 · 1048 阅读 · 0 评论 -
带你跳出H5输入框input的坑
移动网页开发中input触发的手机键盘压榨页面布局的解决办法。原创 2016-09-06 18:31:07 · 22484 阅读 · 2 评论 -
带你跳出DIV内overflow:scroll的坑
-webkit-overflow-scrolling: touch原创 2016-09-18 12:21:12 · 12477 阅读 · 0 评论 -
H5系列之“神测试,这些你看过的《还珠格格》”
给大家分享一个H5小游戏,趣味性十足的问答。够胆就来挑战吧!建议使用手机打开游戏链接原创 2016-09-05 12:40:32 · 814 阅读 · 0 评论 -
type=number和type=tel的区别
众所周知,HTML5加入了新的input类型 number,这是方便数量输入的。如果是在移动端中,属性type=”number”和type=”tel”会唤起系统的数字键盘,这对于交互还是挺友好的。 浏览器兼容性大部分浏览器还是非常支持这个属性的。就算这样,这里面也有一个坑:不把我们可爱的小数点当作输入。我通过监听input事件然后查看事件对象的data属性(识别当前输入字符): 这数据和视图原创 2018-01-07 14:31:28 · 45673 阅读 · 3 评论