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

标签:demo

【实战】捣鼓一只自定义的video组件(目前只能在Mobile中使用)

这是一只只能在Mobile下使用的Video自定义组件。

为什么只能在Mobile下使用?。。。因为我将鼠标事件都换成了Touch事件。。。等我有空了再添加兼容手势库吧。…

+ 阅读更多

JavaScript用户交互:移动物体

交互动画的一个主要目标是创建出流畅的用户体验,其中大多数的用户交互都是通过鼠标和触摸屏实现的。

在这篇博文中,我想分享一些JS对于物体移动的常见用法,包括拖拽和投掷效果。…

+ 阅读更多

JavaScript动画详解(三) —— 弹动动画

缓动和弹动都是那对象从已有位置移动到目标位置的方法。但是缓动是指物体滑动到目标点就停下来;而弹动是指物体来回反弹一段时间后,最终停在目标点的运动。…

+ 阅读更多

JavaScript动画详解(二) —— 缓动动画

最普通的动画就是匀速的动画,每次增加固定的值。但是生活中很多运动并不是匀速运动的,而是有加速度改变的运动。在Web动画中,缓动动画有时候会让网站增色不少。…

+ 阅读更多

环形进度条的实现方法总结和动态时钟绘制(CSS3、SVG、Canvas)

缘由:

在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度【效果如下图所示】,且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”。当时第一想法是用SVG,因为SVG在画弧线方面是行家呀,另外Canvas也是极好的选择。但是规定了不能用SVG和Canvas,我想还可以使用CSS3的clip和rotate属性,但当时脑抽的我竟记不起clip的语法袅(囧~)。笔试结束后,便去查clip属性的使用,总结了实现环形进度条的方法,于是便有了下文。…

+ 阅读更多

瀑布流布局的实现步步升级(原生JS)

瀑布流实现其实已经不是什么新鲜的玩意了,国内外多个展示性网站如花瓣网百度图片等都早已采用了瀑布流的页面布局方式。瀑布流布局巧妙地重排元素并填补了容器的所有空间,适合小数据块,每个数据块内容相近且没有侧重。通常,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。所以,我们给这样的布局起了一个形象的名字…

+ 阅读更多