使用JS控制页面元素位置移动

最新推荐文章于 2024-06-28 16:40:55 发布

weixin_34356310

最新推荐文章于 2024-06-28 16:40:55 发布

阅读量2.5k

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/tongjh/blog/1789248

版权

使用JS控制页面元素位置移动

主要的原理如下

使用 window.getComputedStyle(element).top 获取元素的top或left
使用定时器更改元素样式 element.style.top=(top+10)+'px'

全部代码如下

<!DOCTYPE html>
<html>
<head>
    <title>flex</title>
    <meta charset="utf-8">
    <style>
    #bg{background: #000;opacity: .5;position: fixed;top:0;bottom: 0;left: 0;right: 0;display: none;}
    .box{position: fixed;top: 30%;left: 0px;right: 0px;width: 300px;height: 200px;margin-left:auto;margin-right:auto;display: none;}
    .box-left{width:145px;height:100px;float: left;position: absolute;top:0;left:-1000px}
    .box-right{width:145px;height:100px;float: left;position: absolute;top:0;right:-1000px}
    .box-bottom{position: absolute;width: 100%;height:100px;float: left;top:1000px;}
    </style>
</head>
<body>

    <div id="bg"></div>
    <div class="box" id="box">
        <div class="box-left" id="box-left"><img src="http://pic7.nipic.com/20100602/2177138_170759552925_2.jpg" style="width:145px;height:100px;"></div>
        <div class="box-right" id="box-right"><img src="http://pic7.nipic.com/20100602/2177138_170759552925_2.jpg" style="width:145px;height:100px;"></div>
        <div class="box-bottom" id="box-bottom">一段文字,左边图片从左飘入，右边图片从右侧飘入，底部文字从底部飘入</div>
    </div>

    <script>
        window.onload = function() {
            setTimeout(function(){
                show();
            },300);

            function show() {
                var box = document.getElementById('box');
                var bg = document.getElementById('bg');
                var boxLeft = document.getElementById('box-left');
                var boxRight = document.getElementById('box-right');
                var boxBottom = document.getElementById('box-bottom');

                box.style.display = "block";
                bg.style.display = "block";

                move(boxLeft,'left',{end:0})
                move(boxRight,'right',{end:155})
                move(boxBottom,'bottom',{end:100})
                
            }

            /*
            * 移动方法
            * @param element 元素节点
            * @param direction 移动方向 left,right,top,bottom
            * @param options 移动选项
            *           speed 移动距离
            *           time  定时器时间间隔
            *           end    移动结束时的位置 
            * */
            function move(element,direction,options){
                var settings = {
                    speed:100,
                    time:30,
                    end:0,
                }
                if(options){
                    Object.assign(settings,options);
                }
                                
                var timer;
                clearInterval(timer);
                var handler = function(){
                    var top = parseInt(window.getComputedStyle(element).top.slice(0, -2));
                    var left = parseInt(window.getComputedStyle(element).left.slice(0, -2));
      
                    if(direction=='top'){
                        if (top >= settings.end) {
                            clearInterval(timer);
                        } else {
                            element.style.top = (top + settings.speed) + 'px';
                        }
                    }else if(direction=='bottom'){
                        if(top<= settings.end){
                            clearInterval(timer);
                        }else{
                            element.style.top = (top - settings.speed) + 'px';
                        }                        
                    }else if(direction=='left'){
                        if(left>= settings.end){
                            clearInterval(timer);
                        }else{
                            element.style.left = (left + settings.speed) + 'px';
                        }                        
                    }else if(direction=='right'){
                        if(left <= settings.end){
                            clearInterval(timer);
                        }else{
                            element.style.left = (left - settings.speed) + 'px';
                        }                        
                    }                    
                };
                timer = setInterval(handler,settings.time);
            }
        }
    </script>
</body>
</html>

第二种方法

function move2run(element, direction, options) {
    var settings = {
        speed: 100,
        time: 30,
        end: 0,
    }
    if (options) {
        Object.assign(settings, options);
    }
    var timer = setInterval(function(){
        var top = parseInt(window.getComputedStyle(element).top.slice(0, -2));
        var left = parseInt(window.getComputedStyle(element).left.slice(0, -2));
        if(direction=='top'){
            if (top >= settings.end) {
                return clearInterval(timer);
            } 
        }else if(direction=='bottom'){
            if(top<= settings.end){
                return clearInterval(timer);
            }                       
        }else if(direction=='left'){
            if(left>= settings.end){
                return clearInterval(timer);
            }                       
        }else if(direction=='right'){
            if(left <= settings.end){
                return clearInterval(timer);
            }                       
        }else{
            return clearInterval(timer);
        }
        move2(element,direction,options);
    },settings.time)
}

function move2(element, direction, options) {
    var settings = {
        speed: 100,
    }
    if (options) {
        Object.assign(settings, options);
    }
    var top = parseInt(window.getComputedStyle(element).top.slice(0, -2));
    var left = parseInt(window.getComputedStyle(element).left.slice(0, -2));
    if (direction == 'top') {
        element.style.top = (top + settings.speed) + 'px';
    } else if (direction == 'bottom') {
        element.style.top = (top - settings.speed) + 'px';
    } else if (direction == 'left') {
        element.style.left = (left + settings.speed) + 'px';
    } else if (direction == 'right') {
        element.style.left = (left - settings.speed) + 'px';
    }
}

转载于:https://my.oschina.net/tongjh/blog/1789248