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

canvas动画包教不包会:canvas概述和动画基本概念

这篇文章是《canvas动画包教不包会》系列的第一篇文章,也是我们真正进入动画世界的开始!不知道你是不是很兴奋,反正对于爱瞎折腾的我来说,一定会在开发学习中很high!

废话不多说,下面进入主题。

canvas元素是HTML5中新出现的,我们可以将其当做一个像素级的画布,它允许我们绘制直线、圆、矩形等基本形状,以及图像和文字。使用canvas元素,可以实时渲染图形、游戏动画或其他虚拟图像,而且它已经为快速绘图做过优化了。各大主流浏览器都已经支持GPU加速的2D canvas渲染,因此,使用canvas绘制出的游戏动画运行速度会很快。

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

canvas动画包教不包会

《canvas动画包教不包会》是一个系列文章,主要是根据个人学习来总结如何使用简单的数学和物理知识实现酷炫的动画,目前正在筹划中,暂定目录(会有所改变)如下:


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

多年前端3+1系列笔记整理

前端三基础:HTML、CSS、JavaScript,优秀库:jQuery,额外赠送:canvas
阅读 683 · 评论 0 · 喜欢 1 阅读全文

canvas入门基础系列

相信搞前端的同志们都知道HTML5中的canvas,如果你不知道,那你就真的OUT了!不过,俗话说,爱学习的娃永远都是祖国灿烂的花朵。如果你打算学习canvas,你可以扫视一下《canvas入门基础》,这是一系列文章,里面所有的内容都不是高深的,而是简单的canvas绘图API。

目录

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

JQuery学习笔记整理:工具类

jQuery还提供了很多辅助工具方法,使用这些方法可以很方便的进行操作js代码逻辑。

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

JQuery学习笔记整理:AJAX

jQuery中封装了很多与AJAX请求相关的方法,这些方法能够让你更轻松地处理AJAX请求,在这里,并不打算讲解AJAX请求的原理,如需了解:可看这里:《JavaScript学习笔记整理(14):AJAX》。

目录
  1. $.get()、$.post()
  2. load()、$.getScript()、$.getJSON()
  3. $.ajax()

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

JQuery学习笔记整理:动画特效

本章主要讲解jQuery的动画特效。

目录
  1. 基础特效
  2. 滑动动画
  3. 淡入淡出动画
  4. 可定制特效(animate())
  5. 动画队列(queue)
  6. jQuery.fx.off和jQuery.fx.interval

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

CSS3-条件判断(@supports)

这篇文章是关于CSS3条件判断的,你并没有看错,我也没有写错,如果你开发过响应式布局,应该会知道CSS3中的“@media”就是条件判断之一,不过,在这里,并不是去讨论“@media”的,而是来谈谈CSS3的条件判断规范文档中的另一部分:“@supports”规则。

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

JQuery学习笔记整理:事件处理

本章的主题是jQuery事件处理,如果你对事件处理不了解,可以看这篇文章《JavaScript学习笔记整理(10):Event事件》。

目录
1、事件处理
2、事件方法
2.1 document对象事件
2.2 浏览器事件方法
2.3 鼠标事件方法
2.4 表单事件方法
2.5 键盘事件方法
3、jQuery Event对象的属性和方法

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

JQuery学习笔记整理:CSS和属性

这一章主要是记录获取和设置属性、处理样式类和CSS属性、获取和设置元素的HTML或文本内容、关联数据与元素。


目录
1、属性(attr()、removeAttr()、prop()、removeProp()、addClass()、removeClass()、toggleClass())
2、CSS(css())
3、内容(html()、text())
4、关联数据(data()、removeData())

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

JQuery学习笔记整理:操作DOM

在使用jQuery时,改变HTML文档本身的结构(也就是操作DOM)是在所难免的,那么JQuery提供了哪些方法供我们操作DOM呢?


主要有以下几点:

  1. 创建新元素
  2. 添加子元素或后代元素(append()、prepend()、appendTo()、prependTo())
  3. 封装(包裹)元素(wrap()、wrapAll()、wrapInner())
  4. 插入兄弟元素(after()、before()、insertAfter()、insertBefore())
  5. 替换元素(replaceWith()、replaceAll())
  6. 删除元素(detach()、remove()、empty()、unwrap())

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

JQuery学习笔记整理:选择元素

这篇文章主要讲解如何选择元素,包括

1、选择器

2、选择方法

2.1 添加更多元素(add())

2.2 限制选择范围(eq()、filter()、first()、last()、has()、not()、slice())

2.3 检测结果集(is())
2.4 修改、回退结果集(end()、addBack())
2.5 访问后代元素(children()、contents()、find())
2.6 访问祖先猿(closest()、offsetParent()、parent()、parents()、parentsUntil())
2.7 访问兄弟元素(next()、nextAll()、nextUntil()、prev()、prevAll()、prevUntil()、siblings())
3、 jQuery对象
3.1 属性方法
3.2 jQuery对象转换成DOM对象
3.3 DOM对象转换成jQuery对象
4、 链式方法(方法链)

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

JQuery学习笔记整理

JQuery是一个优秀的JavaScript库,它不仅是轻量级的,而且还兼容CSS3及各种浏览器。使用JQuery能更方便地处理HTML、events、实现动画效果,还能让你便捷地为网站提供AJAX交互。

对于JQuery这个优秀库,一开始接触前端时,我就比较倾向它,虽然近两年我重拾JavaScript,不过基于JQuery的方便性,直到现在我都没有抛弃JQuery,而且在慢慢地深入学习和了解。

今天开始整理JQuery学习笔记及之前遇到的问题及解决方法,整理了《JQuery学习笔记整理》系列。

目录

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

推荐的JavaScript编码规范

作为前端开发人员,我相信每一个人都或多或少的用到原生的JavaScript,也正是因为用的人多,导致编码风格也是多种多样的,而不规范的编码风格,不仅会导致一些奇怪的问题出现,而且不利于后期维护和提高执行效率。

基于本人也在开发中因为规范而出现各种问题,我特意的整理了一下JavaScript编码规范(并不强制,只是推荐)。
阅读 577 · 评论 0 · 喜欢 1 阅读全文

CSS API整理复习

 一直以来,对CSS都没有进行过系统的学习了解,一开始是学了基本的属性,之后都是用到哪个属性才去百度哪个属性的用法,虽然慢慢的也了解了不少属性,但觉得还是有必要全面的复习一遍。


复习目录
  1. 选择器(基础选择器、组合选择器、伪元素、伪类)
  2. 定位、尺寸
  3. 内外边距(margin、padding)
  4. 边框
  5. 布局
  6. 背景、颜色、渐变
  7. 字体、文本、文本装饰、书写模式
  8. 列表、表格
  9. 内容
  10. 界面样式
  11. 多列
  12. 伸缩盒(新、旧)
  13. 转换、过渡、动画
  14. 裁剪(clip、clip-path)、遮罩(mask)
  15. 单位(长度、角度、时间、频率、分辨率、颜色)
  16. 函数
  17. 媒体查询
  18. 私有属性(IE、Firefox、Webkit)
  19. 其他

目录可能有所变动!会对部分复杂的属性进行深入了解!

所有属性的兼容性都可以到这里查询:Can I use... Support tables for HTML5, CSS3, etc

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