学习blus老师js(6)--js运动基础

最新推荐文章于 2022-11-17 21:49:59 发布

转载最新推荐文章于 2022-11-17 21:49:59 发布 · 82 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/tenWood/p/7679001.html

本文介绍如何使用HTML与JavaScript实现网页元素的动画效果，包括匀速运动、缓冲运动及运动停止条件等关键概念，并通过具体实例展示了如何让网页元素进行平滑移动、淡入淡出等动态效果。

运动基础

一、匀速运动

运动框架

在开始运动时，关闭已有定时器

把运动和停止隔开(if/else)

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:200px; height:200px; background:red; position:absolute; top:50px; left:0px;}
</style>
<script>
var timer = null;
function startMove()
{
    var oDiv=document.getElementById('div1');
    
    clearInterval(timer);
    timer = setInterval(function (){
        var speed = 1;
        if(oDiv.offsetLeft>=300){
            clearInterval(timer);
        }else{
            oDiv.style.left=oDiv.offsetLeft+speed+'px';
        }
    }, 30);
}
</script>
</head>

<body>
<input id="btn1" type="button" value="开始运动" onclick="startMove()" />
<div id="div1">
</div>
</body>
</html>

View Code

运动框架实例

例子1：“分享到”侧边栏

　　通过目标点，计算速度值

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:150px; height:200px; background:green; position:absolute; left:-150px;}
#div1 span {position:absolute; width:20px; height:60px; line-height:20px; background:blue; right:-20px; top:70px;}
</style>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById('div1');
    
    oDiv.onmouseover=function ()
    {
        startMove(0);
    };
    oDiv.onmouseout=function ()
    {
        startMove(-150);
    };
};

var timer=null;

function startMove(iTarget)
{
    var oDiv=document.getElementById('div1');
    
    clearInterval(timer);
    timer=setInterval(function (){
        var speed=0;
        
        if(oDiv.offsetLeft>iTarget)
        {
            speed=-10;
        }
        else
        {
            speed=10;
        }
        
        if(oDiv.offsetLeft==iTarget)
        {
            clearInterval(timer);
        }
        else
        {
            oDiv.style.left=oDiv.offsetLeft+speed+'px';
        }
    }, 30);
}
</script>
</head>

<body>
<div id="div1">
    <span>分享到</span>
</div>
</body>
</html>

View Code

例子2：淡入淡出的图片

　　用变量存储透明度

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:200px; height:200px; background:red; filter:alpha(opacity:30); opacity:0.3;}
</style>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById('div1');
    
    oDiv.onmouseover=function ()
    {
        startMove(100);
    };
    oDiv.onmouseout=function ()
    {
        startMove(30);
    };
};

var alpha=30;
var timer=null;

function startMove(iTarget)
{
    var oDiv=document.getElementById('div1');
    
    clearInterval(timer);
    timer=setInterval(function (){
        var speed=0;
        
        if(alpha<iTarget)
        {
            speed=10;
        }
        else
        {
            speed=-10;
        }
        
        if(alpha==iTarget)
        {
            clearInterval(timer);
        }
        else
        {
            alpha+=speed;
            
            oDiv.style.filter='alpha(opacity:'+alpha+')';
            oDiv.style.opacity=alpha/100;
        }
    }, 30);
}
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>

View Code

二、缓冲运动

逐渐变慢，最后停止

距离越远速度越大

速度由距离决定

速度=(目标值-当前值)/缩放系数

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute; left:0px; top:50px;}
#div2 {width: 1px; height: 300px; background: black; position: absolute;left:300px;}
</style>
<script>
function startMove()
{
    var oDiv=document.getElementById('div1');
    setInterval(function (){
        var speed=(300-oDiv.offsetLeft)/10;
        
        speed = speed>0 ? Math.ceil(speed): Math.floor(speed);
        
        oDiv.style.left=oDiv.offsetLeft+speed+'px';

        document.title = speed;
    }, 30);
}
</script>
</head>

<body>
<input type="button" value="开始运动" onclick="startMove()" />
<div id="div1">
</div>
<div id="div2"></div>
</body>
</html>

例子：缓冲菜单

Bug：速度取整

speed=speed>0?Math.ceil(speed):Math.floor(speed);

跟随页面滚动的缓冲侧边栏

潜在问题：目标值不是整数时

解决方法是让它传进来的就是个整数就完了。

例子：对联悬浮框：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:100px; height:150px; background:red; position:absolute; right:0; bottom:0;}
</style>
<script>
window.onscroll=function ()
{
    var oDiv=document.getElementById('div1');
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    
    //oDiv.style.top=(document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop+'px';
    startMove(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop));
};

var timer=null;

function startMove(iTarget)
{
    var oDiv=document.getElementById('div1');
    
    clearInterval(timer);
    timer=setInterval(function (){
        var speed=(iTarget-oDiv.offsetTop)/4;
        speed=speed>0?Math.ceil(speed):Math.floor(speed);
        
        if(oDiv.offsetTop==iTarget)
        {
            clearInterval(timer);
        }
        else
        {
            document.title=iTarget;
            document.getElementById('txt1').value=oDiv.offsetTop;
            oDiv.style.top=oDiv.offsetTop+speed+'px';
        }
    }, 30);
}
</script>
</head>

<body style="height:2000px;">
<input type="text" id="txt1" style="position:fixed; right:0; top:0;" />
<div id="div1"></div>
</body>
</html>

View Code

三、匀速运动的停止条件

运动终止条件

匀速运动：距离足够近

缓冲运动：两点重合

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute; left:600px; top:50px;}
#div2 {width:1px; height:300px; position:absolute; left:300px; top:0; background:black;}
#div3 {width:1px; height:300px; position:absolute; left:100px; top:0; background:black;}
</style>
<script>
var timer=null;

function startMove(iTarget)
{
    var oDiv=document.getElementById('div1');
    
    clearInterval(timer);
    timer=setInterval(function (){
        var speed=0;
        
        if(oDiv.offsetLeft<iTarget)
        {
            speed=7;
        }
        else
        {
            speed=-7;
        }
        
        if(Math.abs(iTarget-oDiv.offsetLeft)<=7)
        {
            clearInterval(timer);
            
            oDiv.style.left=iTarget+'px';
        }
        else
        {
            oDiv.style.left=oDiv.offsetLeft+speed+'px';
        }
    }, 30);
}
</script>
</head>

<body>
<input type="button" value="到100" onclick="startMove(100)" />
<input type="button" value="到300" onclick="startMove(300)" />
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>