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;

function move(destion){
var oDiv1=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
var speed=0;
if(oDiv1.offsetLeft>destion)       //通过实际距离与目标地址的差距来决定速度的正负,可省略函数的一个速度参数,若实际距离大于目标地址,则速度为负值
{
speed=-10;
}
else              //否则,实际距离小于目标距离,速度为正值
{
speed=10;
}
if(oDiv1.offsetLeft==destion)
{
clearInterval(timer);
}
else{
oDiv1.style.left=oDiv1.offsetLeft+speed+'px';
}
},30)
}
</script>
</body>
</html>

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);
}
}

var timer=null;
var alpha=30;                                                      //用参数存储透明度
function move(target){                                        //参数为目标值,需要成为的透明度数
var oDiv1=document.getElementById('div1');
clearInterval(timer);  
timer=setInterval(function(){
var speed;
if (alpha<target)                   //判断目前的透明度与目标透明度的差距决定速度正负
{
speed=10;
}
else{
speed=-10;
}
if(alpha==target)
{
clearInterval(timer);
}
else{
alpha+=speed;  
oDiv1.style.filter='alpha(opacity:'+alpha+')';
oDiv1.style.opacity=alpha/100;
}
},30);
}
</script>
</body>
</html>

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(){

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>

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运动基础的更多相关文章

  1. Javascript 运动基础 01

    JS运动基础  运动基础   让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快   匀速运动 速度不变 <s ...

  2. day38—JavaScript的运动基础-匀速运动

    转行学开发,代码100天——2018-04-23 一.运动基础框架 JavaScript的运动可以广义理解为渐变效果,直接移动效果等,图网页上常见的“分享到”,banner,透明度变化等.其实现的基本 ...

  3. 原生JavaScript运动功能系列(五):定时定点运动

    原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现 原生JavaScript运动功能系列(二):缓冲运动 原生JavaScript运动功能系列(三):多物体多值运动 原生JavaS ...

  4. JS运动---运动基础(匀速运动)

    [一]运动基础 (2)基础运动案例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  5. javascript运动系列第一篇——匀速运动

    × 目录 [1]简单运动 [2]定时器管理 [3]分享到效果[4]移入移出[5]运动函数[6]透明度[7]多值[8]多物体[9]回调[10]函数完善[11]最终函数 前面的话 除了拖拽以外,运动也是j ...

  6. JavaScript RegExp 基础详谈

    前言: 正则对于一个码农来说是最基础的了,而且在博客园中,发表关于讲解正则表达式的技术文章,更是数不胜数,各有各的优点,但是就是这种很基础的东西,如果我们不去真正仔细研究.学习.掌握,而是抱着需要的时 ...

  7. Popmotion – 小巧,灵活的 JavaScript 运动引擎

    Popmotion 是一个只有12KB的 JavaScript 运动引擎,可以用来实现动画,物理效果和输入跟踪.原生的DOM支持:CSS,SVG,SVG路径和DOM属性的支持,开箱即用.Popmoti ...

  8. JavaScript学习基础部分

    JavaScript学习基础 一.简介 1.JavaScript 是因特网上最流行的脚本语言,并且可在所有主要的浏览器中运行,比方说 Internet Explorer. Mozilla.Firefo ...

  9. JavaScript入门基础

    JavaScript基本语法 1.运算符 运算符就是完成操作的一系列符号,它有七类: 赋值运算符(=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=).算术运 ...

随机推荐

  1. UnsupportedClassVersionError 错误解决办法

    偶然遇到关于版本问题的错误,为了以后查找方便记录下来.有更好的办法欢迎大家更正. 错误内容: Exception in thread "main" java.lang.Unsupp ...

  2. webpack入门

    一,为什么用webpack 1.由于项目中资源的多样性和依赖性 2.js模块规范复杂化 3.开发与线上文件不一致性 二.webpack 特性 1.对CommonJS.AMD.ES6语法兼容 2.对js ...

  3. JS添加父节点的方法。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 学习PYTHON之路, DAY 5 - PYTHON 基础 5 (装饰器,字符格式化,递归,迭代器,生成器)

    ---恢复内容开始--- 一 装饰器 1 单层装饰器 def outer(func): def inner(): print('long') func() print('after') return ...

  5. Web APP开发技巧总结(转)

    一.META/LINK相关: 1.百度禁止转码 通过百度手机打开网页时,百度可能会对你的网页进行转码,往你页面贴上它的广告,非常之恶心.不过我们可以通过这个meta标签来禁止它: <meta h ...

  6. linux设备模型

    device_driver和device必须依附总线.总线.驱动.设备最终会落实为sysfs中的一个目录.kobject对应sysfs的一个目录. attribute直接落实sysfs中的一个文件,如 ...

  7. Web前端开发规范手册

    一.规范目的 1.1  概述 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发.  ...

  8. Python future模块

    今天看到了Pyhon中的模块__future__,查了一下资料,感觉这个module很有用. 从python2.1开始以后, 当一个新的语言特性首次出现在发行版中时候, 如果该新特性与以前旧版本pyt ...

  9. callback 转换到 promise

    最近项目迭代,从express到koa,面对callback,想偷懒,就想到了Proxy对象 new Proxy(docker,{ get : function (obj,name) { return ...

  10. html页面清除缓存

    需求:页面每次打开时清除本页面的缓存. 页面打开时,由于缓存的存在,刚刚更新的数据有时无法在页面得到刷新,当这个页面作为模式窗口被打开时问题更为明显. 解决办法为: (1) 用HTML标签设置HTTP ...