Bootstrap
博客内容搜索
Kaysama's Blog

原生JS实现事件委托

事件委托(代理)是什么,有什么好处我就不多赘述了,经过jQuery时代的朋友们一定知道 live、delegate、on这些方法,他们的核心都是利用js事件的冒泡机制。如今的前端越来越依赖Vue、React、Angular等高级框架,似乎不再需要这种远古的事件机制,但是这些重型框架不是所有的场景都使用,或者有时候即使用到了它们,也会有频繁在dom上手动绑定事件的情况,总不能为了这点小功能把更重的jQuery引入进来吧。
话不多说,HERE WE GO !
假设有一个父元素(id=parent)和一个子元素(id=child),中间可能隔了几代dom,我们想把 #child 的事件冒泡到 #parent 上,可以这么做:

继续阅读

前端实现旗帜飘动效果系列(Ⅳ):webgl实现

继续填坑,本文会稍微提一些webgl的基础,不会做过多介绍,看官们请先准备要一定的基础知识。
webgl要实现前面的例子方式有很多,比如
给一个矩形平面添加多个顶点,然后在顶点着色器中,在xy平面上移动顶点位置;
或者移动顶点的z分量,再左乘视图矩阵;
或者只使用四个顶点来创建矩形,然后在片元着色器中对uv进行偏移等等。
我这次只讲第一种,下面几个方法玩个坑以后在填吧~

继续阅读

前端实现旗帜飘动效果系列(Ⅲ):canvas2D实现(2)

本讲我们在上一讲的基础上,给旗子添加高光,使其看起来更加有立体感。我会用两种方式来分别实现这个效果,然后比较一下优劣,还是先讲原理。

方法一:在原来的代码drawImage之后通过 fillRect 函数来增加一个白色蒙层,通过透明度的递增和递减来模拟。具体多少透明度?当然你可以用数学的方法来求导计算出某一点的斜率,根据其大小和正负得出其透明度大小,斜率越大,透明度越小。这里用一种更取巧也效率更高的方法,即保存某一点前一个点的y轴坐标,与该点的y坐标相减,即可得到斜率的相对大小,因为两点之间的x轴上距离都是1px,所以y轴变化越大,|斜率|则越大。

继续阅读

前端实现旗帜飘动效果系列(Ⅱ):canvas2D实现(1)

这里是本系列的第二讲,上一讲不知道大家自己试过了没,虽然整体效果差强人意但是并不算完美。本讲我们先用那个canvas2D把上一讲的效果实现一遍。

还是先讲原理,动手能力强的童鞋可以看了原理自己去鼓捣。
设有三角函数 y = Asin(ωx+φ)

  1. 第一步,我们要先利用高中的三角函数知识来计算出旗帜飘动(类似简谐运动)的第一帧 (设初相φ=0) 的曲线,
    假设我们有一张图片,宽高分别为W、H,该图片包含n个周期,最大振幅为A,可得波长 λ = W / n ,ω = 2π / λ ,即可得出我们的三角函数:y = A · sin( 2π / λ · x )
  2. 第二步,在W次循环中(逐像素),使用drawImage函数 来画出宽度1,高度H 的图片。
继续阅读

前端实现旗帜飘动效果系列(Ⅰ):dom+css实现

hello,民娜桑~~我又来开新坑了( ̄ε(# ̄)☆╰╮o( ̄皿 ̄///),这次尽量保证把这个坑填完~

本系列我会分四篇来完成主题,分别是① DIV+CSS的实现,② canvas2D的简单实现,③ canvas2D的进阶实现,④ webgl+着色器的实现 以及 ⑤ 包装成jquery插件并发布为npm模块 。

继续阅读

iconfont的实现原理及如何使用?

这篇文章还是秉承我的写作习惯,虽然标题是谈iconfont,但是我仍然是想到啥说啥,夹杂一些自己的私货,看官们不要介意。废话不多说,咱们先从阿里巴巴矢量图形库放几个图标到项目中,然后下载项目里的图标,网站会帮你生成一些css、html、js文件以及字体文件,然后咱们看着这些代码慢慢进入本次主题:iconfont。

解压缩阿里图标库下载的文件:

继续阅读

前端对图片进行本地压缩预览并上传实践

she says <h1> is large or she says <h1> is large
相信做过前端的小伙伴们都写过图片上传,最简单的方式是通过表单提交,一个<input type="file">加一个**<button type="submit">**,外面包一层form就搞定了。(button默认的type是submit,这里可以省略,之所以特别写出来,是因为以前碰到过form标签里面写了一个<button>标签,一点击就莫名奇妙地把表单提交了,希望大家引以为戒)

继续阅读

(译)stackoverflow上关于柱形全景与立方体全景转换的讨论

提问:

@ WestLangley:

我正在给某网站开发一个简单的3D全景浏览功能。考虑到移动端的性能,我使用了three.js的CSS3 renderer。它需要一个由六张图组成功立方体贴图。

我用iPhone上的“Google Photosphere”(或其他类似的app)创建了一个2:1的柱形全景图,然后用这个网站(需要Flash)把柱形全景图转换成了立方体全景图。

继续阅读

原生js一步一步实现瀑布流

瀑布流一般的常见的需求有这三种,一是每列固定宽度,这种比较常见,比如花瓣网;另一种是每行固定高度,这种少见一些,典型的例子是百度图片,bing,谷歌图片,还有一种是宽高都不确定,这种需求就比较奇葩了,我们仅讨论第一种瀑布流。

实现这类瀑布流一般的做法是维护一个包含不同列高的数组,先排列第一行,初始化这个数组以后,然后后面的图片(或者是图片的容器)通过绝对定位来排列到最短的列上,并更新数组,随后下一个元素做相同的操作。当窗口尺寸变化怎么办呢?最偷懒的是初始化时就写死容器宽度,当页面太小就出现横向滚动条,这种没啥难度;或者每次修改尺寸就刷新一下页面,可能有些人会嗤之以鼻,还真有大厂这么干,微软的bing搜索的图库就是这么做的;

继续阅读