Javascript运动基础

Posted 早安.晚安

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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;

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运动基础的主要内容，如果未能解决你的问题，请参考以下文章

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

JavaScript深入学习运动

关于javascript缓冲运动的笔记

编程语言IT技术web前端学习 程序员带你Javascript实现类轨迹运动02

原生JavaScript运动功能系列：定时定点运动

javascript运动系列第一篇——运动函数