zoukankan      html  css  js  c++  java
  • 循环运动

    利用js的回调函数特征:

      相互调用,实现方块的循环变色滚动,代码如下:

      

      css:样式:

      

     <style>
            div{
                 100px;
                height: 100px;
                background-color: yellow;
                position: absolute;
                
            }
        </style>
     
     
      js:代码:
      
    <script>
            var left=0;
            var tops =0;
            var div = document.querySelector("div");
            function fnLeft(fn,fn1,fn2){
                var f=arguments.callee;
                var dis = setInterval(function(){
                    left+=5;
                    if(left<=800){
                        div.style.left=left+"px";
                        div.style.backgroundColor="red";
                    }else{
                        clearInterval(dis);
                        fn(fn1,fn2,f);
                    }
                    // clearInterval(dis);
                },30)
            }
            function fnTop(fn,fn1,fn2){
                console.log("aaaa");
                var f=arguments.callee;
                var dis = setInterval(function(){
                    tops+=5;
                    if(tops<=400){
                        div.style.top=tops+"px";
                        div.style.backgroundColor="purple"
                    }else{
                        clearInterval(dis);
                        fn(fn1,fn2,f)
                    }
                },30)
            }
            function fnRight(fn,fn1,fn2){
                var f=arguments.callee;
                var dis = setInterval(function(){
                    console.log(left);
                    left-=5;
                    if(left>=0){
                        div.style.left=left+"px";
                        div.style.backgroundColor="green"
                    }else{
                         clearInterval(dis);
                         fn(fn1,fn2,f);
                    }
                },30)
            }
            function fnBottom(fn,fn1,fn2){
                console.log("vbbbbb");
                var f=arguments.callee;
                var dis=setInterval(function(){
                    tops-=5;
                    if(tops>=0){
                        div.style.top=tops+"px";
                        div.style.backgroundColor="yellow"
                    }else{
                        clearInterval(dis);
                        fn(fn1,fn2,f);
                    }
                },30)
            }
            fnLeft(fnTop,fnRight,fnBottom);
        </script>
     
        
  • 相关阅读:
    cas sso ajax的jsonp实现方案总结(新浪微薄、淘宝案例分析)
    在linux下利用nohup来后台运行java程序
    (判断)window.open()窗口被关闭后执行事件
    AngularJS开发指南14:依赖注入
    contentEditable
    AngularJS 最佳实践
    LDAP基本概念
    LDAP
    spring 配置文件中使用properties文件 配置
    【解决Jira】Chrome提示Java插件因过期而遭到阻止(JIRA上传截屏截图)
  • 原文地址:https://www.cnblogs.com/wanghao1994/p/12116893.html
Copyright © 2011-2022 走看看