JS运动的各种问题【一】

最新推荐文章于 2024-04-24 09:27:42 发布

亲爱的汉尼拔

最新推荐文章于 2024-04-24 09:27:42 发布

阅读量485

点赞数

分类专栏： HTML5 文章标签： html JS运动分享栏进入进出图片淡入淡出滚动条效果

本文链接：https://blog.csdn.net/mememen1987/article/details/45058753

版权

HTML5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

JS运动的各种问题

问题一：

错误代码：

function startMove(){
            var timer=null;
            var div1=document.getElementById("div1");
            if (div1.offsetLeft==300){
                clearInterval(timer);
            }else{
                timer=setInterval(function(){
                    div1.style.left=div1.offsetLeft+10+"px";
                },30)
            }
        }

希望实现的功能：

打开定时器timer，让div1运动到300px，然后让div1停下即关掉定时器。

错误之处：

if语句错误，代码首先设置一个null定时器timer，然后如果div1的左边距为300px，则关掉定时器timer。否则一直运动。但是if并不是循环语句，if语句执行一次之后将不再执行。所以永远不会关闭定时器。

正确代码：

var timer=null;
        function startMove(){
            var div1=document.getElementById("div1");
            timer=setInterval(function(){
                if (div1.offsetLeft==300){
                    clearInterval(timer);
                }
                div1.style.left=div1.offsetLeft+10+"px";
            },30)
        }

问题二:

错误代码：

function startMove(){
            var speed=1;
            var timer=null;
            var oDiv1=document.getElementById("div1");
            clearInterval(timer);
            timer=setInterval(function(){
                if (oDiv1.offsetLeft>=300){
                    clearInterval(timer);
                }else{
                    oDiv1.style.left=oDiv1.offsetLeft+speed+"px";
                }
            },30)
        }

希望实现的功能：

连续点击开始按钮，div1会加速，这是因为每当点击按钮一次，就会开启一个定时器，累积起来就会加速，所以要在开启定时器之前不管有没有定时器开启都要先关闭一次定时器。但是添加了关闭定时器的clearInterval方法之后，依然会加速。

错误之处：

将timer变量放在了startMove方法里面，相当于每点击一次按钮，就会执行一次startMove方法，生成了一个闭包，因此创建了一个局部timer，每一个闭包当中的timer并不会共享，所以还是相当于生成了点击次数的闭包timer。

正确代码：

        var timer=null;
        function startMove(){
            var speed=1;
            var oDiv1=document.getElementById("div1");
            clearInterval(timer);
            timer=setInterval(function(){
                if (oDiv1.offsetLeft>=300){
                    clearInterval(timer);
                }else{
                    oDiv1.style.left=oDiv1.offsetLeft+speed+"px";
                }
            },30)
        }

实现分享栏进出功能：

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #div1{
            width: 150px;
            height: 200px;
            background: burlywood;
            position: absolute;
            left: -150px;
        }
        span{
            width: 20px;
            height: 60px;
            position: absolute;
            background: gold;
            right: -20px;
            top: 70px;
        }
    </style>
    <script>
        window.οnlοad=function(){
            var oDiv1=document.getElementById("div1");
            oDiv1.οnmοuseοver=function(){
                move(0);
            };
            oDiv1.οnmοuseοut=function(){
                move(-150);
            };
        };
        var timer=null;
        function move(target){
            var oDiv1=document.getElementById("div1");
            var speed=0;
            if (oDiv1.offsetLeft<target){
                speed=10;
            }else{
                speed=-10;
            }
            clearInterval(timer);
            timer=setInterval(function(){
                if(oDiv1.offsetLeft==target){
                    clearInterval(timer);
                }else{
                    oDiv1.style.left=oDiv1.offsetLeft+speed+"px";
                }
            },30);
        }
    </script>
</head>
<body>
<div id="div1">
    <span id="span1">分享到</span>
</div>
</body>
</html>

实现图片淡入淡出功能：

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
            filter: alpha(opacity:30);
            opacity: 0.3;
        }
    </style>
    <script>
        window.οnlοad=function(){
            var oDiv1=document.getElementById("div1");
            oDiv1.οnmοuseοver=function(){
                move(100);
            };
            oDiv1.οnmοuseοut=function(){
                move(30);
            };
        };
        var timer=null;
        var alpha=30;
        function move(target){
            var oDiv1=document.getElementById("div1");
            var speed=0;
            clearInterval(timer);
            if(alpha<target){
                speed=10;
            }else{
                speed=-10;
            }
            timer=setInterval(function(){
                if (alpha==target){
                    clearInterval(timer);
                }else{
                    alpha+=speed;
                    oDiv1.style.filter="alpha(opacity:"+alpha+")";
                    oDiv1.style.opacity=alpha/100;
                }
            },30);
        };
    </script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>

注意点：

1.因为在透明度上JavaScript并没有像左边距（offsetLeft）这样的属性。所以用一个alpha变量代替。

2.JavaScript代码中的行间透明度设置上需要考虑浏览器的兼容问题，ie浏览器设置方法为oDiv1.style.filter="aplha(opacity:"+aplha+")"；

chrome和火狐为oDiv1.style.opacity=alpha/100。

实现滚动条事件：

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #div1{
            width: 100px;
            height: 100px;
            background: yellowgreen;
            position: absolute;
            bottom: 0px;
            right: 0px;
        }
    </style>
    <script>
        window.οnscrοll=function(){
            var oDiv=document.getElementById("div1");
            var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
            move(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop);
        };
        var timer=null;
        function move(target){
            var oDiv=document.getElementById("div1");
            clearInterval(timer);
            timer=setInterval(function(){
                var speed=(target-oDiv.offsetTop)/10;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);
                if (oDiv.offsetTop==target){
                    clearInterval(timer);
                }else{
                    oDiv.style.top=oDiv.offsetTop+speed+'px';
                }
            },30)
        };
    </script>
</head>
<body style="height:2000px;">
<div id="div1"></div>
</body>
</html>

注意事项：

准确的掌握上一篇博客的内容。

亲爱的汉尼拔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS运动的各种问题【一】

JS运动的各种问题问题一：错误代码：function startMove(){ var timer=null; var div1=document.getElementById("div1"); if (div1.offsetLeft==300){ clearInterval(tim
复制链接

扫一扫