随笔分类 - html5
摘要：公司为了精准的了解自己产品的用户使用情况，通常会对用户数据进行统计分析，获取pv、uv、页面留存率、访问设备等信息。与之相关的就是客户端的数据采集，然后上报的服务端。为了保证数据的准确性，就需要保证数据上报不会有差错。 常见方案缺陷 数据发回服务器的常见做法是，将收集好的用户数据，放在unload事
阅读全文
摘要：HTML5 <video> 的出现，为浏览器中的视频播放带来了很大的进步，PC 端上表现很好，看看 Youtube 的 H5 播放器就知道了，但在移动端却有各种各样的限制，本篇即是实战之后的小结，主要讲讲那些和 PC 端不同的地方，如果其中有错误的地方，欢迎指正。 自动播放 苹果出于流量损耗的考虑，
阅读全文
摘要：使用姿势 在设计全屏滚动插件的时候，希望开发者几乎： 不用写任何脚本快速生成精致H5 支持PC滚轮和移动触摸 酷炫的转场动效 灵活的时间轴管理 一切皆可配置 但是不写脚本肯定没有灵活性咯？！不是的。这里不仅仅可以通过在HTML配置一些参数，还可通过插件的回调函数进行一些逻辑注入。就拿上面大家扫码看到
阅读全文
摘要：目标：实现对号动画，慢慢画出来的感觉； 原理：外层div的背景是一个对号图片，用一个div做遮罩，让遮罩div层从左到右做运动一次即可实现动画，需要注意的是遮罩div的初始位置应该在外层div的外面； 代码如下：
阅读全文
摘要：原理：使用div模拟输入框，避免手机原生键盘弹出，键盘使用div模拟，点击事件使用js控制，光标闪烁使用css模拟，具体代码如下：
阅读全文
摘要：概述 概述 各种网站往往需要一些相同的模块，比如日历、调色板等等，这种模块就被称为“组件”（component）。Web Component就是网页组件式开发的技术规范。 采用组件进行网站开发，有很多优点。 （1）管理和使用非常容易。加载或卸载组件，只要添加或删除一行代码就可以了。 <link re
阅读全文
摘要：一、IE和Chrome等浏览器与zoom 还在几年前，zoom还只是IE浏览器自己私有的玩具，但是，现在，除了FireFox浏览器，其他，尤其Chrome和移动端浏览器已经很好支持zoom属性了： zoom的字面意思是“变焦”，摄影的时候常用到的一个概念。对于web上的zoom效果，你也可以按照此概
阅读全文
摘要：HTML5 History API提供了一种功能，能让开发人员在不刷新整个页面的情况下修改站点的URL。这个功能很有用，例如通过一段JavaScript代码局部加载页面的内容，你希望通过改变当前页面的URL来反应出页面内容的变化，这时该功能可以派上用场。 举个例子，当用户从首页进入帮助页面时，我们通
阅读全文
摘要：一、移动视频直播发展 大家首先来看下面这张图: 可以看到，直播从 PC 到一直发展到移动端，越来越多的直播类 App 上线，同时移动直播进入了前所未有的爆发阶段，但是对于大多数移动直播来说，还是要以 Native 客户端实现为主，但是 H5 在移动直播端也承载着不可替代的作用，例如 H5 有着传播快
阅读全文
摘要：Velocity.js是一款动画切换的jQuery插件，它重新实现了jQuery的$.animate()方法从而加快动画切换的速度。Velocity.js只有7k的大小，它不仅包含了$.animate()的所有功能，并且还包含了颜色切换、转换(transform)、循环、缓动、CSS切换、Scrol
阅读全文
摘要：插件描述：Hammer.js是一个开源的，轻量级的javascript库，它可以在不需要依赖其他东西的情况下识别触摸，鼠标事件。 使用方法： 还支持jQuery插件的形式调用
阅读全文
摘要：video-js采用的是html5播放器。 在不支持html5的浏览器会自动切换成flash。 video-js的官网http://www.videojs.com/ 看看下载的demo就知道个大概了。 不过在ie9上某些视频流会出问题。 不过加上： <!--[if lt IE 9]><script
阅读全文
摘要：在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。 对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点： 问题： 带着问题，往下看… 在进行具体的分析之前，首先得知道下面这些关键性基本概念(术语)。 一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统
阅读全文
摘要：介绍常见布局的Flex写法。 你会看到，不管是什么布局，Flex往往都可以几行命令搞定。 我只列出代码，详细的语法解释请查阅《Flex布局教程：语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。 一、骰子的布局 骰子的一面，最多可以放置9个点。 下面
阅读全文
摘要：一、Flex布局是什么？ Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 .box{ display: flex; } 行内元素也可以使用Flex布局。 .box{ display: inline-flex; }
阅读全文
摘要：Web 发展了几十个春秋，风起云涌，千变万化。我很庆幸自己没有完整地经历过这些年头，而是站在前人的肩膀上行走。Web 技术发展的速度让人感觉那几乎不是继承式的迭代，而是一次又一次的变革，一次又一次的创造。这几年的前端，更为之甚！我从 12 年底开始接触前端，12 年之前的前端发展情况只能从上一辈的笔...
阅读全文
摘要：1. 页面需求这是要做的页面效果（不要对设计置评，这不是开发人员决定的）：这是尺寸标注图（750*1334）：然后美工在750*1334的设计稿之上，按我的要求提供以下素材的切图：包括两个下载按钮的背景图片，logo，底部梯形的渐变背景和body部分的mobile 背景图。注意这些图片都是在750*...
阅读全文
摘要：1. 问题的引出如果html5要适应各种分辨率的移动设备，可以使用rem这样的尺寸单位，针对各个分辨率范围在html上设置font-size的代码：html{font-size:10px}@media screen and (min-width:321px) and (max-width:375px...
阅读全文
摘要：复选框 Checkbox 是 Web 应用常用控件，随处可见，原生的复选框控件一般就像下面这样：这取决于操作系统和浏览器，有些时候，这种样子并不能满足设计要求，这时需要更为精致的复选框样式。以往只有少数浏览器才支持对这类控件应用样式，比如拿到这样一张设计图：blue.png在过去，想要通过简单地修改...
阅读全文
摘要：meta基础知识H5页面窗口自动调整到设备宽度，并禁止用户缩放页面忽略将页面中的数字识别为电话号码忽略Android平台中对邮箱地址的识别当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari体验demo，解决在主屏幕打开页面后，点击页面链接不会跳转到系统自带的Safari将网站添...
阅读全文
浙公网安备 33010602011771号