Javascript运动基础

javascript的运动非常实用，通过控制需要运动块的实际距离与要到达的距离的关系，结合定时器来控制小方块的各种运动。

运动框架

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#div1{
width: 100px;
height: 100px;
position: absolute;
top: 50px;
left: 50px;
background-color: red;
}
</style>
</head>
<body>
<div id="div1"></div>
<input id="btn" type="button" value="start" onclick="move()"></input>
<script type="text/javascript">
var timer=null;
function move(){
var oDiv1=document.getElementById('div1');
clearInterval(timer); //进函数之前先清空一下其他定时器，保证每一次进入仅启用一个定时器。
timer=setInterval(function(){
var speed=10;　　　　　　　　　　　　　　//通过控制速度值的大小来决定运动的快慢
if(oDiv1.offsetLeft>=300){　　　　　　　　//停止条件
clearInterval(timer);　　　　　　　　　　　　//符合条件则停止，清空定时器
}
else{
oDiv1.style.left=oDiv1.offsetLeft+speed+'px';　　　　//不符合条件则继续运动
}
},30) 　　　　　　　　　　　　　　　　//每隔30毫秒运动一次
}
</script>
</body>
</html>

运动框架，控制速度快慢的条件有两个：1.定时器的时间，2.速度。一般不建议第一种，时间一般都是通过精密计算思考，定了就不改，大多可采用修改speed变量来控制速度快慢。

eg1：分享到侧边栏效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
background-color: red;
width: 150px;
height: 200px;
position: absolute;
left: -150px;
top: 50px;
}
#div1 span{
background-color: green;
width: 20px;
height: 80px;
position: absolute;
right: -20px;
top: 80px;
}
</style>
</head>
<body>
<div id="div1"><span>分享到</span>
</div>
<script type="text/javascript">
window.onload=function(){
var oDiv1=document.getElementById('div1');

oDiv1.onmouseover=function(){
move(0);
};
oDiv1.onmouseout=function(){
move(-150);
}
};

var timer=null;

eg2：图片的淡入淡出效果

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#div1{
height: 200px;
width: 200px;
background-color: red;
filter: alpha(opacity:30) ; /*兼容ie */
opacity: 0.3;　　　　　　　　　　　　　/*火狐，谷歌*/
}
</style>
</head>
<body>
<div id="div1"></div>
<script type="text/javascript">
window.onload=function(){
var oDiv1=document.getElementById('div1');
oDiv1.onmouseover=function(){
move(100);
}
oDiv1.onmouseout=function(){
move(30);
}
}

eg3：缓冲运动：

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50px;
left: 0px;
}
#div2{
width: 1px;
height: 300px;
background-color: black;
position: absolute;
left: 300px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<input type="button" value="start" onclick="move()"></input>
<script type="text/javascript">
function move(){
var oDiv1=document.getElementById('div1');
setInterval(function(){
var speed=(300- oDiv1.offsetLeft)/10; //在不同时刻距目标地的距离会越来越短，除一个固定的值，速度也会越来越小
speed=speed>0?Math.ceil(speed):Math.floor(speed); //向左向右对速度向上取整或向下取整，px是最小像素值，计算机最小距离单位，会自动向下取整，不会四舍五入，速度成0.9的时候，计算机无法识别，因此不会走到你预期的位置，就会停。针对不同的方向，对他向上或向下取整。
oDiv1.style.left=oDiv1.offsetLeft+speed+'px';
},30)
}
</script>
</body>
</html>

eg4：缓冲运动使方块固定到右下角

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#div1{
width: 100px;
height: 150px;
position: absolute;
background-color: red;
right: 0;
bottom: 0;
}
</style>
</head>
<body style="height: 2000px">
<div id="div1"></div>
<script type="text/javascript">
window.onscroll=function(){
var oDiv1=document.getElementById('div1');
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; 　　　　　　//做浏览器的兼容
//oDiv1.style.top=(document.documentElement.clientHeight - oDiv1.offsetHeight)/2+scrollTop+'px';
move(document.documentElement.clientHeight - oDiv1.offsetHeight+scrollTop);
};
var timer=null;
function move(target){

var oDiv1=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){

var speed=(target - oDiv1.offsetTop)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(oDiv1.offsetTop==target)
{
clearInterval(timer);
}
else{
oDiv1.style.top=oDiv1.offsetTop+speed+'px';
}
},30)
}
</script>
</body>
</html>

eg5:缓冲运动固定到右侧中间

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#div1{
width: 100px;
height: 150px;
position: absolute;
background-color: red;
right: 0;
bottom: 0;
}
</style>
</head>
<body style="height: 2000px">
<div id="div1"></div>
<script type="text/javascript">
window.onscroll=function(){
var oDiv1=document.getElementById('div1');
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
//oDiv1.style.top=(document.documentElement.clientHeight - oDiv1.offsetHeight)/2+scrollTop+'px';
move(parseInt((document.documentElement.clientHeight - oDiv1.offsetHeight)/2+scrollTop));
}
var timer=null;
function move(target){
clearInterval(timer);
var oDiv1=document.getElementById('div1');
timer=setInterval(function(){

eg8：匀速运动固定到某一具体位置

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50px;
left: 0px;
}
#div2{
width: 1px;
height: 300px;
background-color: black;
position: absolute;
left: 100px;
}
#div3{
width: 1px;
height: 300px;
background-color: black;
position: absolute;
left: 300px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<input type="button" value="start100" onclick="move(100)"></input>
<input type="button" value="start300" onclick="move(300)"></input>
<script type="text/javascript">
var timer=null;
function move(target){
var oDiv1=document.getElementById('div1');
clearInterval(timer);
setInterval(function(){
var speed=0;
clearInterval(timer);
if(oDiv1.offsetLeft<target){
speed=7;
}
else{
speed=-7;
}
if(Math.abs(target- oDiv1.offsetLeft)<=7)　　　　　　　　 //当遇到接近但到不了的情况，可将它的近似看做已到达，防止抖动
{
clearInterval(timer);
oDiv1.style.left=target+'px'; 　　　　　　//手动将他的距离改为目标距离
}
else{
oDiv1.style.left=oDiv1.offsetLeft+speed+'px';
}
},30)
}
</script>
</body>
</html>

以上总结了js中运动的基础，可将代码复制查看效果

Javascript运动基础的更多相关文章

Javascript 运动基础 01
JS运动基础运动基础让Div运动起来速度——物体运动的快慢运动中的Bug 不会停止速度取某些值会无法停止到达位置后再点击还会运动重复点击速度加快匀速运动速度不变 <s ...
day38—JavaScript的运动基础-匀速运动
转行学开发,代码100天——2018-04-23 一.运动基础框架 JavaScript的运动可以广义理解为渐变效果,直接移动效果等,图网页上常见的“分享到”,banner,透明度变化等.其实现的基本 ...
原生JavaScript运动功能系列（五）：定时定点运动
原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现原生JavaScript运动功能系列(二):缓冲运动原生JavaScript运动功能系列(三):多物体多值运动原生JavaS ...
JS运动---运动基础（匀速运动）
[一]运动基础 (2)基础运动案例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
javascript运动系列第一篇——匀速运动
× 目录 [1]简单运动 [2]定时器管理 [3]分享到效果[4]移入移出[5]运动函数[6]透明度[7]多值[8]多物体[9]回调[10]函数完善[11]最终函数前面的话除了拖拽以外,运动也是j ...
JavaScript RegExp 基础详谈
前言: 正则对于一个码农来说是最基础的了,而且在博客园中,发表关于讲解正则表达式的技术文章,更是数不胜数,各有各的优点,但是就是这种很基础的东西,如果我们不去真正仔细研究.学习.掌握,而是抱着需要的时 ...
Popmotion – 小巧，灵活的 JavaScript 运动引擎
Popmotion 是一个只有12KB的 JavaScript 运动引擎,可以用来实现动画,物理效果和输入跟踪.原生的DOM支持:CSS,SVG,SVG路径和DOM属性的支持,开箱即用.Popmoti ...
JavaScript学习基础部分
JavaScript学习基础一.简介 1.JavaScript 是因特网上最流行的脚本语言,并且可在所有主要的浏览器中运行,比方说 Internet Explorer. Mozilla.Firefo ...
JavaScript入门基础
JavaScript基本语法 1.运算符运算符就是完成操作的一系列符号,它有七类: 赋值运算符(=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=).算术运 ...

随机推荐

CSS3--overflow属性
overflow:当内容溢出元素框时发生的事情: overflow:默认,内容不会裁剪,会呈现在元素框之外: overflow:hidden:内容会被裁剪,并且其余部分是不可见的(清除浮动) over ...
Linux 服务器IO模型 epoll
epoll模型 #include <unistd.h> #include <sys/types.h> /* basic system data types */ #includ ...
mysql自增主键归零的方法
最近老是要为现在这个项目初始化数据,搞的很头疼,而且数据库的Id自增越来越大,要让自增重新从1开始:那么就用下面的方法吧:方法一: 如果曾经的数据都不需要的话,可以直接清空所有数据,并将自增字段恢复从 ...
比CMD更强大的命令行WMIC
先决条件:a. 启动Windows Management Instrumentation服务,开放TCP135端口.b. 本地安全策略的“网络访问: 本地帐户的共享和安全模式”应设为“经典-本地用户以 ...
mybatis(4)_二级缓存深入_使用第三方ehcache配置二级缓存
增删改对二级缓存的影响 1.增删改也会清空二级缓存 2.对于二级缓存的清空实质上是对value清空为null,key依然存在,并非将Entry<k,v>删除 3.从DB中进行select查 ...
使用COALESCE时注意left join为null的情况
1.使用COALESCE时,用到group by with cube,如果之前两个表left join时,有数据为null,就会使得查出的数据主键不唯一例如: select COALESCE (c. ...
Galera集群server.cnf参数调整--前言
文档安排: 前言部分会简述下galera集群,正文中会针对我们线上的环境,在不断业务的情况下,进行参数调整的话,有些参数不能够进行配置,会以#***的形式写入配置文件中,文档也会进行进一步说明. 如果 ...
微信JS SDK Demo 官方案例[转]
摘要: 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用 ...
数据类型和Json格式(转载)
作者: 阮一峰日期: 2009年5月30日 1. 前几天,我才知道有一种简化的数据交换格式,叫做yaml. 我翻了一遍它的文档,看懂的地方不多,但是有一句话令我茅塞顿开. 它说,从结构上看,所有的数 ...
CSS3回执特殊图形

Javascript运动基础

Javascript运动基础的更多相关文章

随机推荐

热门专题