51
Dev开发社区
首页
文章
问答
工具
搜索
登录
注册
#JavaScrip
javascript运动系列第四篇——抖动
在运动系列中,前面分别介绍了匀速运动、变速运动和曲线运动。下面介绍一种特殊的运动形式——抖动 原理介绍 抖动其实是往复运动的一种特殊形式,只不过往复运动是一种无摩擦力的无限运动,且以速度为参照依据;而抖动以位置作为参照依据,最终停在起始点 在网页中最常见的一种抖动效果应该是窗口...
代码星球
·
2020-05-24
Javascript
运动
系列
第四
抖动
javascript运动系列第三篇——曲线运动
上一篇介绍了变速运动,但只实现了直线运动。如果元素的left和top同时运动,并遵循不同的曲线公式,则会进行不同形式的曲线运动。本文将详细介绍圆周运动、钟摆运动、抛物线运动和流体运动这四种曲线运动形式 圆周运动 圆周运动可能是最好理解的曲线运动了 若(x0,y0)为圆心,则圆的公式为(x-x0)*(x...
代码星球
·
2020-05-24
运动
Javascript
系列
第三
曲线
javascript运动系列第二篇——变速运动
前面介绍过匀速运动的实现及注意事项,本文在匀速运动的基础上,更进一步,实现各种变速运动,包括加速运动、减速运动、缓冲运动、重力运动和弹性运动 准备工作匀速运动 在原生javascript中实现运动的主要工具是定时器,通过设置固定的间隔时间,使元素在确定的间隔时间内实现距离的变化。而运动变化的主要表现形式...
代码星球
·
2020-05-24
Javascript
运动
系列
第二
变速运动
javascript运动系列第一篇——匀速运动
除了拖拽以外,运动也是javascript动画的一个基本操作。通过CSS属性transition和animation可以实现运动。但是,要进行更精细地操作,javascript运动是必不可少的。本文将详细介绍javascript运动 简单运动 让一个元素在页面中运动起来很简单,设置定时器,改变定位元素的...
代码星球
·
2020-05-24
运动
Javascript
系列
一篇
匀速
javascript动画系列第五篇——模拟滚动条
当元素内容溢出元素尺寸范围时,会出现滚动条。但由于滚动条在各浏览器下表现不同,兼容性不好。所以,模拟滚动条也是很常见的应用。本文将详细介绍滚动条模拟 原理介绍 滚动条模拟实际上和元素模拟拖拽类似。仅仅通过范围限定,使元素只可以在单一方向上拖拽<divid="box"style="height:20...
代码星球
·
2020-05-24
Javascript
动画
系列
第五
模拟
javascript动画系列第四篇——拖拽改变元素大小
拖拽可以让元素移动,也可以改变元素大小。本文将详细介绍拖拽改变元素大小的效果实现 原理简介 拖拽让元素移动,是改变定位元素的left和top值实现的。而拖拽改变元素大小,则还需要改变元素的宽高 范围圈定 我们把改变元素大小的范围圈定在距离相应边10px的范围内 左侧边界L=obj.offs...
代码星球
·
2020-05-24
Javascript
动画
系列
第四
拖拽
javascript动画系列第三篇——碰撞检测
前面分别介绍了拖拽模拟和磁性吸附,当可视区域内存在多个可拖拽元素,就出现碰撞检测的问题,这也是javascript动画的一个经典问题。本篇将详细介绍碰撞检测 原理介绍 碰撞检测的方法有很多,接下来使用九宫格分析法 假设黄色元素要与红色元素进行碰撞。将红色元素所处的区域分为9部分,自身处于第9部分,周围...
代码星球
·
2020-05-24
Javascript
动画
系列
第三
碰撞
javascript动画系列第二篇——磁性吸附
上一篇,我们介绍了元素拖拽的实现。但在实际应用中,常常需要为拖拽的元素限定范围。而通过限定范围,再增加一些辅助的措施,就可以实现磁性吸附的效果 范围限定 如果我们限定元素只可以在可视范围内移动,那么就需要对其进行范围限定 首先,先要搞清楚是可视区域限定被拖拽元素 左侧范围L0=0 右侧范围R0=d...
代码星球
·
2020-05-24
Javascript
动画
系列
第二
磁性
javascript动画系列第一篇——模拟拖拽
从本文开始,介绍javascript动画系列。javascript本身是具有原生拖放功能的,但是由于兼容性问题,以及功能实现的方式,用的不是很广泛。javascript动画广泛使用的还是模拟拖拽。本文将详细介绍该内容 原理介绍 模拟拖拽最终效果和在桌面上移动文件夹的效果类似 鼠标按下时,拖拽开始。鼠标...
代码星球
·
2020-05-24
Javascript
动画
系列
一篇
模拟
深入理解javascript原生拖放
拖放(drag-and-drop,DnD)其实是两个动作——拖和放。所以,它涉及到两个元素。一个是被拖的元素,称为拖放源;另一个是要放的目标,称为拖放目标。本文将通过拆分这两个概念来详细介绍原生拖放 拖放源 什么样的元素才是拖放源呢? HTML5为所有HTML元素规定了一个dr...
代码星球
·
2020-05-24
深入
理解
Javascript
原生
拖放
深入理解javascript中的富文本编辑
一说起富文本,人们第一印象就是像使用word一样,在网页上操作文档。实际上差不多就是这样。富文本编辑,又称为WYSIWYG(WhatYouSeeIsWhatYouGet所见即所得),指在网页中编辑富文本内容。本文将详细介绍如何通过javascript实现富文本编辑 方式 有两种编辑富文本的方式,一种是使...
代码星球
·
2020-05-24
深入
理解
Javascript
中的
文本
深入理解javascript中的焦点管理
焦点作为javascript中的一个重要功能,基本上和页面交互都离不开焦点。但却少有人对焦点管理系统地做总结归纳。本文就javascript中的焦点管理作详细介绍 焦点元素 到底哪些元素可以获得焦点呢?默认情况下,只有表单元素可以获得焦点。因为只有表单元素可以交互<inputtype="text"...
代码星球
·
2020-05-24
深入
理解
Javascript
中的
焦点
使用r.js来打包模块化的javascript文件
r.js(下载)是requireJS的优化(Optimizer)工具,可以实现前端文件的压缩与合并,在requireJS异步按需加载的基础上进一步提供前端优化,减小前端文件大小、减少对服务器的文件请求。本文将详细介绍r.js 简单打包【项目结构】 以一个简单的例子来说明r.js的使用。该项目名称为'de...
代码星球
·
2020-05-24
使用
r.js
打包
模块化
Javascript
使用javascript生成当前博文地址的二维码图片
在电脑端发现一篇好的博文,想在手机上访问。这时,就必须打开手机浏览器输入长长的URL地址才行,非常不方便。如果在博客标题的后面跟一张小的图片,点击该图片后,出现一张二维码的大图,然后再通过手机扫一扫,来进行博文的访问,就相对方便很多。 通过搜索引擎搜索了一些生成二维码的文章,发现其并不是一件容易的事。同时,也发现...
代码星球
·
2020-05-24
使用
Javascript
生成
当前
博文
实现javascript下的模块组织
java有类文件、Python有import关键词、Ruby有require关键词、C#有using关键词、PHP有include和require、CSS有@import关键词,但是对ES5版本的javascript来说,javascript通过script标签引入代码的方式显得杂乱无章,语言自身毫无组织和约束能力...
代码星球
·
2020-05-24
实现
Javascript
模块
组织
首页
上一页
...
62
63
64
65
66
...
下一页
尾页
按字母分类:
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
其他