zoukankan      html  css  js  c++  java
  • 一排下去再上来的div

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    
    <script src="float.js"></script>
    <script type="text/javascript">
    window.onload = function ()
    {
        var timer = null ;
        var num = 0;
        var len = 20;
        var str = '';
        var adiv = document.getElementsByTagName('div');
        var finished = true;
        var flag = true;
        
        for( var i = 0; i < len; i++)
        {
            str += '<div style="50px; height:50px; background:red; position:absolute; top:0px; left:'+ i*60 +'px;"></div>';
        }
        
        document.body.innerHTML = str;
        
        
        document.onclick = function ()
        {
            
            if(!finished) {return ;}
            finished = false;
            clearInterval(timer);
            timer = setInterval( function ()
            {    
                domove(adiv[num],'top',23,flag?500:0,num == len - 1?function (){ finished = true;flag = !flag; }:null);
                num++;
                if(len == num )
                {
                    clearInterval(timer);
                    num = 0;
                }
            },100);
        }
    };
    </script>
    
    </head>
    
    <body>
    </body>
    </html>
    function getstyle(obj,attr)
    {
        return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
    }
    
    
    function domove (obj,attr,dir,target,endfn)
    {
        dir = parseInt(getstyle(obj,attr))<target?dir:-dir;
        clearInterval(obj.timer);
        obj.timer = setInterval( function ()
        {
            var speed = parseInt(getstyle(obj,attr)) + dir;
            if(dir>0&&speed>target||dir<0&&speed<target)
            {
                speed = target;
            }
            obj.style[attr] = speed + 'px';
            if( speed == target )
            {
                clearInterval(obj.timer);
                endfn&&endfn();
            }
        },30); 
    };
  • 相关阅读:
    Java将对象保存到文件中/从文件中读取对象
    Python爬虫框架--Scrapy安装以及简单实用
    Python--网络爬虫模块requests模块之响应--response
    用Pycharm创建指定的Django版本
    python网络爬虫之requests模块
    Python---异常处理
    Python函数的装饰器修复技术(@wraps)
    Django Rest framework
    Vue的基础使用
    Vue
  • 原文地址:https://www.cnblogs.com/mayufo/p/4179271.html
Copyright © 2011-2022 走看看