子匠_Zijor | 前端开发 / 程序媛 / 潜心学艺。

标签:实战

【实战】数字线性变化的动画实现(原生JS || jQuery)

在一些数据展示的专题页里,有时候希望数字能动态从某一个数变化到另一个数,以此来吸引用户眼球,突出数据。

于是有了下文。

在这里,我用了两种方式:一种是原生的JavaScript,另一种是jQuery插件。

数字线性变化的原理很简单,就是让数字增量变化,并循环动画。

原生JS版

首先获取DOM元素。为了兼容到IE6,兼容性方法如下:

var domUtil = {
    // 获取DOM元素
    get: function(query)
+ 阅读更多

【实战】用原生JavaScript封装一个hash路由组件

事起缘由:最近做了不少的活动页面,其中一些页面需要用到单页面的技术做切换。因为常用,所以考虑封装。

虽然市面上有不少路由库,但是如果为了这么简单的一个小功能就去引入一个庞大的库,显然是不优雅的。最优雅的方式是亲手撸一个~(•‾̑⌣‾̑•)~

还好几十行代码就能搞得掂。

组件代码:

/**
 * 路由配置组件
 * 方法:
        @method set(_hash, callback)  # 配置路由信息,
+ 阅读更多

【实战】封装一个audio音频组件

备注:因为懒得去重复些一堆的事件兼容性函数,先用jQuery库快速捣鼓一个audio音频组件。等以后有空了,再干掉jQuery库的依赖,用纯JavaScript重构一下。

这个组件包含进度条拖拽,支持自定制audio的样式。体验如下:

直接上代码:

组件代码:

/*
* 音频组件
* options参
+ 阅读更多