首页 专题 H5案例 前端导航 UI框架

酷炫的轮番效果是如何实现的

关于轮番插件,网上已经有N多种了,比如:swiperSuperSlide等,因此我也不打算完整的开发一个,这里简单的搞一个slide3d,便于介绍轮番的实现原理。

点击这里看实例:简单轮番例子

可到Github上下载:https://github.com/IronPans/slide3D

阅读 2001 · 评论 0 · 喜欢 1 阅读全文

必须了解的CSS变量(var)

看到文章标题《必须了解的CSS变量(var)》,你是不是感到很奇怪,CSS居然有变量(var)了?

你没看错,CSS真的有变量(var),而且兼容性还不赖:

阅读 2862 · 评论 0 · 喜欢 1 阅读全文

CSS3 object-fit和object-position

最近一直忙于将JavaScript学习的笔记整理成电子书,也没什么空闲时间写新的文章。趁着今天有点空闲,决定再来折腾一下CSS3中的两个属性:object-fitobject-position

这两个奇葩的属性是搞毛的呢?其实它们是为了处理替换元素(replaced elements)的自适应问题,简单的说,就是处理替换元素的变形(这里指长宽比例变形)问题。

阅读 391 · 评论 0 · 喜欢 1 阅读全文

收年之作《JavaScript半知半解》

时间疾驰,转眼2016仅剩两个月左右,思来想去,觉得还是需要在年前有点收年之作。

以什么为题材呢?纠结了很久,有想过CSS3、Canvas游戏动画等,最后权衡了一下,还是决定以JavaScript为题,为什么呢?因为近几年JavaScript框架(react、angular、vue)的火热,node服务器端的火爆,让JavaScript瞬间活跃起来,甚至有很多文章的名字是这样的《抛弃JQuery,拥抱JavaScript》,而且根据在各大前端网站的文章点击率总结,发现只要有JavaScript这个词,伙伴们就会一拥而上,可见JavaScript越来越爆了。
鉴于本人菜鸟一枚,并不打算搞什么高深莫测的东东,也搞不了,还是会以笔记为主,加上最近的疯狂学习总结,不过这一次并不打算以文章的形式发到个人博客(也是此地)上,而是会制作成电子书形式(暂定书名:《JavaScript半知半解》),最后会展示在个人博客上。

已经紧锣密鼓的开工了,预计年前完工,敬请期待!
阅读 586 · 评论 0 · 喜欢 1 阅读全文

聊聊开发富文本编辑器:execCommand方法

在《聊聊开发富文本编辑器:range对象》一章中,我们介绍了如何获取选区内容、保存恢复鼠标位置、鼠标定位到某个位置等方法,既然可获得光标位置和选区内容,那我们就可以对它们进行一些操作,不过,在进行操作之前,我们必须有操作对象,比如:输入框。

阅读 767 · 评论 0 · 喜欢 1 阅读全文

聊聊开发富文本编辑器:range对象

相信前端攻城狮伙伴们都知道富文本编辑器,比如:百度的Ueditor ,基于jQuery的bootstrap-wysiwyg 等等多种操作性丰富的编辑器。在我之前的一篇文章《一个不算成熟的富文本编辑器》中,我介绍了个人搞的一个简单的富文本编辑器。

接下来,我会用两篇文章来聊聊开发富文本编辑器中的关键点

阅读 2251 · 评论 0 · 喜欢 1 阅读全文

浅谈CSS3多列布局

相信大家都看过报纸,报纸上的内容大多数都是分栏显示的,如下图所示:

对于前端攻城狮来说,这种分列布局,在以前虽然可以实现,可是难度却是不小,工作量很大,必须使用JavaScript对内容分段,再配合上绝对定位或浮动等CSS样式来实现多列布局。但现在,强大的CSS3为我们提供了“multi-column”,让我们可以很轻松的实现这样的分列布局。
阅读 613 · 评论 0 · 喜欢 1 阅读全文

响应式图片

“响应式(Responsive)”这个词我想大家没有听过一千遍,也有一百遍了。响应式是指实现不同屏幕分辨率的终端上浏览网页的不同展示方式。网上介绍响应式的文章也有很多了,比如:《自适应页面设计》。在这篇文章中,我们不讲页面布局的响应式,我们主要来看看“响应式图片”。
这篇文章主要内容:
  • 为什么要使用响应式图片
  • <picture>元素
  • img的srcset、sizes属性

阅读 676 · 评论 0 · 喜欢 1 阅读全文

canvas动画包教不包会:坐标旋转和斜面反弹

坐标旋转,顾名思义,就是说围绕着某个点旋转坐标系。这一章就来介绍一下如何实现坐标旋转和坐标旋转的作用。
内容如下:
  • 坐标旋转
  • 斜面反弹

阅读 1106 · 评论 0 · 喜欢 1 阅读全文

谈谈CSS3的长度单位(vh、vw、rem)

在CSS3中,新增了很多长度单位,今天就来谈谈:
  • vw、vh、vmin、vmax
  • rem与em

阅读 1375 · 评论 0 · 喜欢 1 阅读全文

canvas动画包教不包会:碰撞检测

碰撞检测是物体与物体之间的交互,其实在前面的边界检测也是一种碰撞检测,只不过检测的对象是物体与边界之间。在本章中,我们将介绍更多的碰撞检测,比如:两个物体间的碰撞检测、一个物体与一个点的碰撞检测、基于距离的碰撞检测等等碰撞检测方法。

阅读 1641 · 评论 0 · 喜欢 1 阅读全文

canvas动画包教不包会:缓动与弹动

到目前为止,《canvas动画包教不包会》系列已经进行了7章,主要讲解了用户交互与基础动画,从本章开始,将进入高级动画篇。这一章主要讲解缓动(比例速度)和弹动(比例加速度)。

1、比例运动
比例运动 是指运动与距离成比例的运动。

缓动弹动都是比例运动,两者关系紧密,都是将对象从已有位置移动到目标位置的方法。缓动是指物体滑动到目标点就停下来了。弹动是指物体来回地反弹一会儿,最终停在目标点的运动。

阅读 929 · 评论 0 · 喜欢 1 阅读全文

canvas动画包教不包会:移动物体

在第二章《用户交互》中,介绍过鼠标事件和触摸事件,可是到目前为止,我们用到鼠标事件和触摸事件还比较少,在本章中,我们将真正的进入交互动画中,主要介绍下面的内容:
  • 如何判断鼠标是否落在某一个物体上
  • 拖曳物体
  • 投掷物体

阅读 1061 · 评论 0 · 喜欢 1 阅读全文

canvas动画包教不包会:边界与摩擦力

在前面的几章中,我们已经介绍了如何实现用户交互、利用三角函数实现物体旋转、给物体加上速度和加速度,利用这些知识,我们已经能够实现很丰富的动画效果,不过,似乎动画还不够真实,比如:物体可以无限的向左或向右移动、运动没有阻力,这就是这一章要处理的问题:边界和摩擦力。

阅读 819 · 评论 0 · 喜欢 1 阅读全文

canvas动画包教不包会:速度与加速度

在上两章中,我们介绍了数学中三角函数的概念和使用,在这一章中,我们将介绍物理知识:速度向量与加速度。

真是坑爹!学完数学又要学习物理,真的是回到了初中......,不过你放心,这里介绍的都不是深奥的物理知识。

这一章的内容包括:
  1. 速度向量
  2. 加速度
  3. 附录:重要公式

阅读 897 · 评论 0 · 喜欢 1 阅读全文