javascript运动系列第六篇——轨迹和投掷
一般地，不同的运动形式会产生不同的轨迹。但仅凭肉眼去识别运动轨迹，其实并不是很直观。因此，在页面中显示运动轨迹，是一个重要的问题。物体初始态时，受到外力大小不同，则初速度不同。如何在网页中模拟投掷效果，也需要解决。接下来，将详细介绍轨迹和投掷 运动轨迹 元素在运动过程中，不同的运动形式会产生不同的轨迹。...
javascript运动系列第五篇——缓冲运动和弹性运动
缓冲运动指的是减速运动，减速到0的时候，元素正好停在目标点。而弹性运动同样是减速运动，但元素并不是直接停在目标点，而是在目标点附近弹几下再停止。本文将以一种新的思路来详细介绍缓冲运动和弹性运动 缓冲运动 在变速运动中，曾经用物理学的知识实现过缓冲运动。缓冲运动实际上就是减速运动的一种特殊形式，指元素做减...
javascript运动系列第四篇——抖动
在运动系列中，前面分别介绍了匀速运动、变速运动和曲线运动。下面介绍一种特殊的运动形式——抖动 原理介绍 抖动其实是往复运动的一种特殊形式，只不过往复运动是一种无摩擦力的无限运动，且以速度为参照依据；而抖动以位置作为参照依据，最终停在起始点 在网页中最常见的一种抖动效果应该是窗口...
javascript运动系列第三篇——曲线运动
上一篇介绍了变速运动，但只实现了直线运动。如果元素的left和top同时运动，并遵循不同的曲线公式，则会进行不同形式的曲线运动。本文将详细介绍圆周运动、钟摆运动、抛物线运动和流体运动这四种曲线运动形式 圆周运动 圆周运动可能是最好理解的曲线运动了 若(x0,y0)为圆心，则圆的公式为(x-x0)*(x...
javascript运动系列第二篇——变速运动
前面介绍过匀速运动的实现及注意事项，本文在匀速运动的基础上，更进一步，实现各种变速运动，包括加速运动、减速运动、缓冲运动、重力运动和弹性运动 准备工作匀速运动 在原生javascript中实现运动的主要工具是定时器，通过设置固定的间隔时间，使元素在确定的间隔时间内实现距离的变化。而运动变化的主要表现形式...
javascript运动系列第一篇——匀速运动
除了拖拽以外，运动也是javascript动画的一个基本操作。通过CSS属性transition和animation可以实现运动。但是，要进行更精细地操作，javascript运动是必不可少的。本文将详细介绍javascript运动 简单运动 让一个元素在页面中运动起来很简单，设置定时器，改变定位元素的...
javascript动画系列第五篇——模拟滚动条
当元素内容溢出元素尺寸范围时，会出现滚动条。但由于滚动条在各浏览器下表现不同，兼容性不好。所以，模拟滚动条也是很常见的应用。本文将详细介绍滚动条模拟 原理介绍 滚动条模拟实际上和元素模拟拖拽类似。仅仅通过范围限定，使元素只可以在单一方向上拖拽<divid="box"style="height:20...
javascript动画系列第四篇——拖拽改变元素大小
拖拽可以让元素移动，也可以改变元素大小。本文将详细介绍拖拽改变元素大小的效果实现 原理简介 拖拽让元素移动，是改变定位元素的left和top值实现的。而拖拽改变元素大小，则还需要改变元素的宽高 范围圈定 我们把改变元素大小的范围圈定在距离相应边10px的范围内 左侧边界L=obj.offs...
javascript动画系列第三篇——碰撞检测
前面分别介绍了拖拽模拟和磁性吸附，当可视区域内存在多个可拖拽元素，就出现碰撞检测的问题，这也是javascript动画的一个经典问题。本篇将详细介绍碰撞检测 原理介绍 碰撞检测的方法有很多，接下来使用九宫格分析法 假设黄色元素要与红色元素进行碰撞。将红色元素所处的区域分为9部分，自身处于第9部分，周围...
javascript动画系列第二篇——磁性吸附
上一篇，我们介绍了元素拖拽的实现。但在实际应用中，常常需要为拖拽的元素限定范围。而通过限定范围，再增加一些辅助的措施，就可以实现磁性吸附的效果 范围限定 如果我们限定元素只可以在可视范围内移动，那么就需要对其进行范围限定 首先，先要搞清楚是可视区域限定被拖拽元素 左侧范围L0=0 右侧范围R0=d...
javascript动画系列第一篇——模拟拖拽
从本文开始，介绍javascript动画系列。javascript本身是具有原生拖放功能的，但是由于兼容性问题，以及功能实现的方式，用的不是很广泛。javascript动画广泛使用的还是模拟拖拽。本文将详细介绍该内容 原理介绍 模拟拖拽最终效果和在桌面上移动文件夹的效果类似 鼠标按下时，拖拽开始。鼠标...
深入理解javascript原生拖放
拖放(drag-and-drop,DnD)其实是两个动作——拖和放。所以，它涉及到两个元素。一个是被拖的元素，称为拖放源；另一个是要放的目标，称为拖放目标。本文将通过拆分这两个概念来详细介绍原生拖放 拖放源 什么样的元素才是拖放源呢？ HTML5为所有HTML元素规定了一个dr...
深入理解javascript中的富文本编辑
一说起富文本，人们第一印象就是像使用word一样，在网页上操作文档。实际上差不多就是这样。富文本编辑，又称为WYSIWYG(WhatYouSeeIsWhatYouGet所见即所得)，指在网页中编辑富文本内容。本文将详细介绍如何通过javascript实现富文本编辑 方式 有两种编辑富文本的方式，一种是使...
深入理解javascript中的焦点管理
焦点作为javascript中的一个重要功能，基本上和页面交互都离不开焦点。但却少有人对焦点管理系统地做总结归纳。本文就javascript中的焦点管理作详细介绍 焦点元素 到底哪些元素可以获得焦点呢？默认情况下，只有表单元素可以获得焦点。因为只有表单元素可以交互<inputtype="text"...
使用r.js来打包模块化的javascript文件
r.js(下载)是requireJS的优化（Optimizer）工具，可以实现前端文件的压缩与合并，在requireJS异步按需加载的基础上进一步提供前端优化，减小前端文件大小、减少对服务器的文件请求。本文将详细介绍r.js 简单打包【项目结构】 以一个简单的例子来说明r.js的使用。该项目名称为'de...