分类 其他 下的文章
-
移动端视频转序列图片播放
页面使用视频嵌入的问题： 1.微信支持视频内嵌播放,支持自动播放 2.IOS 10以下safari不支持视频内嵌及自动播放 3.IOS 10及以上safari支持视频内嵌及无音轨视频的自动播放 4.安卓下原生浏览器播放控制栏规范不统一，部分机型无法隐藏，内嵌播放及自动播放规范不统一 5.安卓和IOS的第三方浏览器会弹出小窗口播放视频，无法内嵌显示 解决方案 将视频转化成序列帧，用JS控制img的src进行切换，视觉上达到和播放视频一样的效果。这种方式也是有局限性的，视频不能太大，建议控制在5s以内，本次项目就是5s的视频导出的base64 js达到了3.5M，勉强可以用。所以3s视......
-
滚动视差效果的实现及优化方案
前言 相信大家对页面滚动视差效果都有一定的了解，滚动视差就是利用多层背景加上利用鼠标拖动滚动条来形成一些像动画一样的视觉效果。 项目地址：http://nostos.163.com/ 使用background-attachment:fixed及改变background-position去实现视差效果 接到要做一个视差滚动的效果需求时，脑海中立刻浮现了一个解决方案，通过background-attachment:fixed把背景固定，然后计算滚动条的拖动位置去改变不同背景图的background-position来实现。 然而，事情往往没那么简单，由于这次项目要兼容到2560px宽度......
-
关于使用Koa2的点点滴滴
Koa是基于Nodejs的一个后端框架，算是比较常用的，核心思想就是中间件，Koa实现底层逻辑，其余的就需要自己实现，包括：session、数据库操作、文件上传、路由、模板、静态资源访问等 前言 一直以来都是使用thinkjs这个框架，集成很多功能，基本上就只需要负责写逻辑就OK了，所以想尝试一下Koa这种需要动手逐个实现功能的，类似也有express 这里并不打算写新手教程，可自行百度，只是写使用过程中遇到的一些疑惑 下面代码基于ES6、7 1、安装 官网推荐使用Nodejs >= 7.6的版本，小于这个版本需要采用babel方式曲线救国 实际使用发现，用了babe......
-
有关http缓存的一些请求头的探索
你是否遇到过请求返回statu code：304，你是否注意过状态码为200(from memory cache)，那么让我们好好探索一下它们是怎么出现的吧。 最近在研究http请求的时候接触到一些http与缓存相关的请求头部信息： eTag/if-not-match expires/cache-control:max-age last-modified/ if-modified-since 缓存策略 当浏览器请求资源时，会默认将资源存入缓存中，有两种读取缓存的方式from disk cache 和 from memory cache，当第一请求的时候会在内存和硬盘中同时备......
-
一个简单的移动端视频组件的实现
一个简单的移动端视频组件的实现 据说移动端需要个视频组件，然后自己尝试了一下，不知道能不能用上，有问题希望大家提出来，(>=<) 这里还是采用了标签video的方式来实现的视频播放。 当然video存在一些问题 视频在最顶层的问题，这里需要区分不同的系统和系统版本， ios系统 在ios8以下，video处于最顶层 在ios8以上ios10以下的iphone上视频在不播放时，不会处于最顶层，如果播放，视频就会自动全屏，处于最顶层， 在ios10以上的iphone系统上视频不播放和播放时，都不会自动全屏，并处于最顶层。 android系统 在安卓系统下，video处于最顶......
-
ECMAScript 2016 Language Specification (5)
语义 ##5.1 句法和语法 5.1.1 上下文无关语法 一个上下文无关的语法包含一系列产生式productions。每个产生式都有一个叫做非终端符的抽象符号作为左位，然后一系列零个或者多个非终端符或者终端符作为右位。对于每个语法来说，每个终端符都来源于一张特殊的符号表。 一个链式生产式的右位有切仅有一个非终端符加上另个或多个终端符。（2016单独加的） 当从一个叫做 目标符goal symbol 的特殊非终端符组成的句子起始，那么给出的上下文无关文法就表示 语言 language，即，将产生式右边序列的非终结符当作左边，进行反复替换的结果就成为可能的终结符序列集合可能无限。 5.......
-
安卓微信下video最顶层
问题：页面video在安卓微信下最顶层 一般我们做页面视频时，都是点击视频按钮弹出一个遮罩层再播放视频。然而当页面本身有一个视频video时，再点击另外的按钮弹层的时候又是怎样的状况？原先页面如下图： 点击下面的 往期视频按钮 后是弹层播放视频，然而在安卓微信下的打开是这样的。 打开方式错了吧？跟想象不一样哦，页面上的视频在遮罩层上面。。。那么我们第一反应应该是页面上video层级太高了吧，但是发现遮罩层的层级z-index:9999;已经是最高了。what? 但在自带浏览器以及苹果机能够正常显示（页面video在遮罩层下面）。 页面体验链接： https://test.n......
-
ECMAScript 2016 Language Specification (4)
自娱自乐系列，求不黑 4.3 术语和定义 以下术语和定义应用于本文档。 4.3.1 类型 在本声明条款6中所定义的一系列数据值。 4.3.2 初始类型 在条款6中定义的未定义(Undefined)，空(Null)，布尔(Boolean)，数字(Number)，符号(Symbol)，或者字符串(String)。 特别注意 一个初始数据是直接代表在语言实现中国最低级别的数据。 4.3.3 对象 对象数据类型 特别注意 一个对线工时有一个大度的原型对象和一系列原型的集合。原型可以为空值 4.3.4 构造体 一个函数对象用来创建和初始化对象 特别注意 构造体的“原型”原型是一个用来实现......
-
屏幕尺寸、分辨率、倍率到底是什么鬼
目前我们做移动端项目几乎不需要考虑为什么要这样写样式，为什么设计稿上100px我们直接写成1rem，移动端的屏幕尺寸那么多变，为什么能轻松兼容？那我们得从移动端的屏幕尺寸来探索一下其中的原理，首先就得了解这些费解的概念。 我在网上收集了很多资料，众说纷芸，我按自己的理解整理了这篇文章，如果有理解不当的地方，请指正。 屏幕尺寸 即我们通常说的尺寸是多少多少英寸啦，指的是屏幕对角线的长度。比如iphone6的屏幕尺寸是4.7英寸 设备像素DP(device-pixels) 很多地方又叫设备屏幕尺寸、设备物理像素、屏幕分辨率等等，我感觉是一个概念。比如iphone6是1334*7......
-
canvas学习案例之简单的物理运动
这次主要写2种简单的运动效果，包括匀速直线运动、匀加速直线运动。在码代码之前先了解下canvas动画效果的基本实现原理，其核心思想是先定义一个初始状态，然后定义一个定时器，定时器内执行一个方法，在这个方法中要清除当前的画面，然后重新绘制需要变化的效果。由于人眼存在残影，所以短时间内的中断的变化可以看成是连续的变化。 以下代码都是基于下面的html结构 <canvas id="canvas" width="728" height="400"> 你的浏览器不支持canvas，请跟换其他浏览器试一试 </c......
-
CORS跨域资源共享
前言：最近在后期优化梦幻西游手游图库项目的时候，遇到一个H5跨域请求接口的需求。 CORS-Orign Resource Sharing（CORS）既跨域资源共享，众所周知，浏览器有个同源策略，为了处理跨域请求，一般用JSONP，设置documet.domain降域，CORS等方式。 跨域资源共享协议标准通过声明一系列http标准头，让服务器能声明哪些来源可以通过浏览器范围服务器的资源。特别那些会对服务器数据造成影响的方法，标准要求浏览器要先以OPTION方法去发送一个预请求去获知服务器对跨源请求所支持的HTTP方法。以下就会分两种请求进行讨论。 1.简单请求 简单来说，就是一些请......
-
解决thinkjs开发jsonp接口返回Unicode时的问题
前言 第一次使用thinkjs写后端，踩了不少坑，其中有一个坑想了很久，无奈网上关于thinkjs的教程还是偏少，问了不少人，耗时很久，所以在这里mark下。 问题 需求很简单，后端返回通过接口把数据返回给前端，因为考虑到跨域问题，接口选择采用jsonp形式。其实就是平台平时提供给我们的那些接口，想想自己也能写接口，还是很激动的！类似下面的接口： 然后前端通过ajax请求接口，搞定！thingjs的controller本身就提供各种数据格式返回的封装。 比如，你要返回json格式，直接在controller里使用 async byrefererAction(self){ ......
-
ECMAScript 2016 Language Specification (3)
4.2.1对象 尽管Js包括对类的定义语法，Js对象并不是和C++，Smalltalk，或者java一样功能上功能上基于类。取而代之的是对象可以通过多种方式被创建，包括通过一个声明或者通过创造对象然后把初始值分配到对应的原型来执行初始化所有或者部分的构造体。每个构造体都是一个函数，该函数有一个叫做“protoytpe”的性质，被用来实现基于原型继承和原型共享。对象用构造体通过new创建成，比如 new Date(2009,11)创建了一个新的日期对象。不使用new调用构造体后的结果取决于构造体本身。比如，Date()善成一个表示当前日期和时间的字符串而不是一个对象。 每个通过构造体......
-
使用swiper组件，小注意项总结
1、swiper切换，html代码不可见情况下，就执行swiper组件脚本，切换有bug。 swiper切换， html代码display:none;情况下，就已经执行了swiper组件脚本，当显示时，进行切换操作时有bug，bug表现为，鼠标拖动多少像素，swiper-wrapper的transform:translate3d(xxxpx, 0px, 0px)就移动多少像素。 常见为弹层情况 解决方法：swiper html代码显示后，再执行swiper组件脚本。 2、swiper组件 参数loop:true时，initialSlide指定的slide索引，与mySwi......
-
uc浏览器某元素消失了
先对比上面两张图，显而易见，第一张图 预约按钮上面的输入框不见了，但是在其他浏览器都正常显示。到底它在UC浏览器都经历了些什么，找来测试机子本地调试，但本地调试显示正常，这就尴尬了，给找出问题所在增加了阻碍。 嗯，那为什么我说在uc浏览器某元素消失了而不是说输入框消失了，可见uc玩消失的不是针对输入框，而是被某些属性或什么影响到了。 先看看在uc其他输入框能正常的页面，对比一下，少了value属性，type属性也不一样，那改成一样试试，结果不尽人意，接着就剩class类名不一样了，万万没想到真的是用名不慎。还是组长机智！ 怎么回事呢？这里是一个输入电话号码的输入框，类名便简单为p......
