“js实例”目录存档

小tips: 纯前端JS读取与解析本地文本类文件

2018年03月27日,星期二

所谓文本类文件,指MIME Type为text/*文件,例如,CSS文件(text/stylesheet),JS文件(text/javascript),HTML文件(text/html),txt文本(text/plain)等等。

在现代浏览器下,我们可以直接对这些文件进行处理,无论是通过type=file表单元素还是从桌面拖拽到网页中都是可以的……

阅读全文…

Web Animations API与动态特性动画实现

2018年03月23日,星期五

用一句话解释Web Animations API就是把CSS3实现的animation动画变成有JS代码实现。

各有优势。CSS3 Animations动画简单,灵活,复用性强,非常适合静态动画效果;Web Animations参数由JS控制,与单个元素绑定,因此非常适合不固定的动态动画效果,例如随机动画……

阅读全文…

小tips: 使用JS检测用户是否安装某font-family字体

2018年02月24日,星期六

下午突发灵感,写了一段JavaScript小脚本,可以用来判断用户的操作系统是否安装了某字体,代码非常简单,使用也非常方便,性能也比较快,兼容性也非常好,在一些特殊的交互场景非常有用。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

CORS ajax跨域请求php简单完整案例一则

2018年02月9日,星期五

CORS是Cross-Origin Resource Sharing的缩写,表示跨域的资源分享,不仅可以跨子域,就算域名长得完全不一样,也可以进行资源获取。

比较常见的应用之一就是Ajax跨域请求数据。

阅读全文…

小tips: 滚动容器尺寸变化子元素视觉上位置不变JS实现

2018年02月2日,星期五

对于一个宽度不固定的滚动容器,如果里面内容已经滚动到了一定的高度,这个时候滚动容器的宽度发生变化,则里面内容的位置会进行重定位,一不留神就不知道刚才的位置是哪里了。

尤其是看小说这种非常考验眼力的场景。于是,就有需求:当滚动容器尺寸发生变化的时候(如宽屏窄屏切换,或者默认尺寸变全屏时候),最上面元素位置要保持不变,这样视觉体验就很好。不会因为突然的尺寸变化而不知道刚才看到哪里了。

那么该如何实现呢?

阅读全文…

瞎折腾:把JS,CSS任意文本文件加密成一张图片

2017年12月24日,星期日

周末在家就是应该放松的,我的放松手段很简单,就是学习前端知识,写写文章,抽个时间去钓鱼,完美。

本文内容就是一个临时起意的折腾,一个对JS,CSS等文本文件加密为图片的想法。介绍了web信息转图片以及本地文件如何转图片,以及如何解密等。

希望本文的内容对您的学习有所帮助。

阅读全文…

鼠标无限移动 JS API Pointer Lock简介

2017年10月18日,星期三

用一句话说明Pointer Lock API的作用就是:Pointer Lock API可以让你的鼠标无限移动,脱离浏览器窗体的限制!

这对于一些需要鼠标控制的应用非常有用。举个例子:某3D VR女友的游戏,你鼠标向上移动,则你的视角就会往下……

阅读全文…

before(),after(),prepend(),append()等新DOM方法简介

2017年09月28日,星期四

接下来要介绍这些新增的DOM API方法,都比较新,其设计目的是可以像jQuery那样,使用非常简单的api,便利的操作dom元素。

这些api包括:before()after()replaceWith()append()prepend()……

阅读全文…

使用canvas实现和HTML5 video交互的弹幕效果

2017年09月10日,星期日

本文展示两个使用canvas实现弹幕效果的案例。其中一个效果是静态的弹幕数据固定的无限循环的效果,适合在个人博客或者运营页面,这种非视频场景使用;另外一个效果是动态的弹幕数据可变的和真实HTML5 <video>交互的弹幕效果,也就是真视频弹幕效果。

阅读全文…

iframe和HTML5 blob实现JS,CSS,HTML直接当前页预览

2017年08月24日,星期四

前端代码效果实时预览的需求实际上是非常常见的,传统做法是这样子的,会新建一个另外的独立页面,专门用来接收传入的前端代码,通过新开窗口或者嵌入iframe页面的方式达到最终效果,然而实际上,对于这个预览效果,如果代码是我们自己控制,而不是全权交给用户编辑的,是没有必要新建一个另外的预览页面,亦或者是在新窗口(新标签页)中浏览的。可以直接在当前页面构建一个文档上下文,实现更加方便快捷的预览。

阅读全文…