js循环运动的实现

最新推荐文章于 2022-05-10 20:00:00 发布
最新推荐文章于 2022-05-10 20:00:00 发布
阅读量192 收藏
点赞数
文章标签： xhtml
原文链接：https://my.oschina.net/u/2617389/blog/608243
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js循环运动</title>
<style>
    div{
        width:150px;
        height:150px;
        background-color:#F66;
        border:3px #009 solid;
        position:absolute;
        top:80px;
    }
</style>
<script>
    var oDiv=document.getElementsByTagName("div");    
    var oButton = document.getElementsByTagName("input");
    //设置全局变量分别为宽度 高度 透明度
    var flag=0;
    var w1=150,w2=300,h1=150,h2=300,o1=0,o2=100;    
    window.onload=function(){
            oButton[0].onclick=function(){
                if(flag==0){
                mainFun1();
                }
                else {
                    mainFun2();
                }
            }
            oButton[1].onclick=function(){
                stopFun(oDiv[0]);
                stopFun(oDiv[1]);
            }
        }
        //重置函数
        function resetFun(){
            oDiv[0].style.width=150 + "px";
            oDiv[0].style.height=150 + "px";
            oDiv[0].style.filter="alpha(opacity=100)";
            oDiv[0].style.opacity=1;
            oDiv[1].style.width=150 + "px";
            oDiv[1].style.height=150 + "px";
            oDiv[1].style.filter="alpha(opacity=100)";
            oDiv[1].style.opacity=1;
            }
            //主函数    
        function mainFun1(){
            //var oDiv=document.getElementsByTagName("div");        
            //这里面参数不能用this
            startMove(oDiv[0],"width",w2,function(){
                startMove(oDiv[0],"height",h2,function(){
                    startMove(oDiv[0],"opacity",o1,function(){
                        startMove(oDiv[1],"width",w2,function(){
                            startMove(oDiv[1],"height",h2,function(){
                                startMove(oDiv[1],"opacity",o1,function(){
/*                                    resetFun();*/
                                    mainFun2();
                                    });
                                });    
                            });
                        });
                    });
                });
            }
            function mainFun2(){
            //var oDiv=document.getElementsByTagName("div");        
            //这里面参数不能用this
            startMove(oDiv[1],"opacity",o2,function(){
                startMove(oDiv[1],"height",h1,function(){
                    startMove(oDiv[1],"width",w1,function(){
                        startMove(oDiv[0],"opacity",o2,function(){
                            startMove(oDiv[0],"height",h1,function(){
                                startMove(oDiv[0],"width",w1,function(){
    /*                                resetFun();*/
                                    mainFun1();
                                    });
                                });    
                            });
                        });
                    });
                });
            }
        //停止运动函数分离
        function stopFun(obj){
            clearInterval(obj.timer);
        }
        //返回元素值
        function getStyle(obj,attr){
            if(obj.currentSyle){
                    return obj.currentStyleattr[attr];
                }
                else{
                    return getComputedStyle(obj,false)[attr];
                }
            }
            function startMove(obj,attr,iTarget,fn){
                clearInterval(obj.timer);                
                obj.timer=setInterval(function(){
                        if(attr=="opacity"){    
                        var iCur=parseInt(parseFloat(getStyle(obj,attr)*100));
                        }
                        else{
                            var iCur=parseInt(getStyle(obj,attr));
                            }
                        var iSpeed=(iTarget-iCur)/8;
                        iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
                        
                        if(iCur==iTarget){
                            stopFun(obj);
                            if(fn) fn();
                        }
                        else {
                            if(attr=="opacity"){
                                iCur+=iSpeed;
                                obj.style.filter="alpha(opacity="+iCur+")";
                                obj.style.opacity=iCur/100;
                            }
                            else{
                                iCur+=iSpeed;
                                obj.style[attr]=iCur+"px";
                            }
                            }    
                        if(obj==oDiv[1] && parseInt(getStyle(obj,'opacity')*100)==o1){
                            flag=1;
                        }
                        else  if(obj==oDiv[0] && parseInt(getStyle(obj,'width'))==w1){
                        /*    alert(1);*/
                            flag=0;
                        }
                    document.title = obj.style[attr];
                    },30);            
                }
</script>
</head>
 
<body>
<input type = "button" value="开始运动" />
<input type = "button" value="停止运动" />
<div id="div1">
<span>1</span>
</div>
<div style="top:80px; left:550px; background-color:#0F6">
<span>2</span>
</div>
</body>
</html>


转载于:https://my.oschina.net/u/2617389/blog/608243

chouzhou3915
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
无限循环轮播图之运动框架(原生JS实现)
01-19
封装运动框架 function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ return getComputedStyle(obj,false)[name]; } } function move(obj,json,options){ var options=...
html中写一个占内存很大死循环代码,HTML中的循环
weixin_42460182的博客
05-31 660
1，首先呢我们要说一下通过标签选择元素通过标签获取元素window.onload = function(){// //获取页面上所有的li// var aLi = document.getElementsByTagName('li');//获取id为list01的ulvar oList = document.getElementById('list01');//再获取这个ul下的所有livar a...
JavaScript无缝连续滚动(含测试源码)
执念斩长河
05-23 928
无缝连续滚动特效是网页中用于广告展示或图片展示的常用特效。它是指一排图片连续从右向左进行动画，首尾相接永远不停、从不间断。
JS 循环大全 最强详解
热门推荐
不想成为可以改变世界的程序员，不是一个好程序员
05-10 3万+
JS 循环大全 最强详解 for while do...while for...in for...of forEach map
js循环运动效果实现
weixin_30892763的博客
10-20 146
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...
JavaScript实现多球运动效果
10-14
在JavaScript实现多球运动效果的过程中，我们主要涉及以下几个核心知识点： 1. **DOM操作**： - `document.createElement("div")`：这是用于创建一个新的HTML元素（在这个例子中是`div`），它允许我们在JavaScript...
js实现交换运动效果的方法
10-24
总的来说，js实现交换运动效果是通过JavaScript动态改变DOM元素的样式属性，并利用定时器实现平滑过渡，从而达到动画效果。此方法适用于简单的交换运动场景，但对于更复杂的动画，可能需要使用像CSS3的`transition`...
JS实现多物体运动的方法详解
11-27
在JavaScript中实现多物体运动，通常涉及到DOM操作、事件监听以及动画帧的更新。下面将详细解析这个过程。 首先，我们需要获取要进行运动的多个元素。在这个实例中，通过`getElementsByTagName`方法获取到所有的`li...
JS运动特效之同时运动实现方法分析
10-18
本文将详细解析如何实现JS中的同时运动特效，即让一个元素同时改变多个属性，如宽度、高度和透明度。 首先，我们需要理解JavaScript动画的基本原理。通常，我们通过设置定时器（如`setInterval`）来间隔性地更新...
js运动-多物体运动
每天进步一点点
05-16 833
基本步骤 1.通过getElementsByTagName获取到要做多物体运动的元素 2.然后for循环遍历元素，添加事件 3.定义startMove函数，需要两个参数，当前“做运动”的元素，和目标值target   注意问题：在多物体运动中，所有的东西不能公用；  window.onload = function(){ var liT
原生JS实现元素的多值运动
哈哈哈
02-11 164
原生JS实现元素的多值运动 原生JS实现元素的多值运动。 在介绍JS运动内容时，我们陆续介绍了简单的运动，图片透明度运动，摩擦运动和缓冲运动。这些运动基本上都是一个元素的单一运动。如果在一个元素身上同时发生两种运动形式呢？应该比如当鼠标点击元素时，元素的宽和高同时发生改变，或者先改变元素的宽，再改变元素的高，发生在一个元素上的这种运动形式就叫多值运动，应该如何操作？ 1、当...
HTML-间歇循环滚动
@point
12-09 1091
实现滚动播放 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"/&gt; &lt;title&gt; 间歇循环滚动&lt;/title&gt; &lt;style&gt; #box{ height:240px; width:300px; marg
for循环经典案例
diku9497的博客
11-07 930
1.棋盘放粮食棋盘有32个格子，第一个格子放1个芝麻，第二个放2个，第三个放4个，第四个放8个。。。每个芝麻的重量为0.00001kg，如果要放满整个棋盘，需要多少重量的芝麻。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm...
js实现缓动效果-让div运动起来
程序猿开发日志【学习永无止境】
07-06 1906
代码如下： var tween = { linear:function(t,b,c,d){ return c*t/d + b; }, easeIn:function(t,b,c,d){ return c * ( t /= d ) * t + b; }, strongEaseIn:function(t,b,c,d){
一个最简单的循环
渡河者的博客
10-01 244
public class AAI{ public static void main (String []args){ for(int n=20,i=0;i<n;i++,n--) System.out.println("n="+n+"\ti="+i); } } 输出结果： n=20 i=0 n=19 i=1 n=18 i=2 n=17 i=3 n=16 i=4 n=15 i=5 n=
XHTML与HTML有什么区别
michael8512的博客
09-16 2199
XHTML是XML重写了HTML的规范，比HTML更加严格，表现如下： 1、XHTML中所有的标记都必须有一个相应的结束标签； 2、XHTML所有标签的元素和属性的名字都必须使用小写； 3、所有的XML标记都必须合理嵌套； 4、所有的属性都必须用引号“”括起来； 5、把所有 6、给所有属性附一个值； 7、不要在注释内容中使用“--”； 8、图片必须使用说明文字。
js实现左右来回运动效果实例
qq_64353584的博客
02-27 1656
实现js基础运动那么一定要了解css的定位方式position分为固定定位fixed 、relative 、absolute fixed 固定元素在页面上 relative 绝对定位 不会脱标 absolute 会脱标，不占位置 实现div元素从左边走到右边，就是根据目标值与实际div的左边距进行逻辑运算，这里就会分为两种情况，一种情况就是目标值比div左边距大，另一种就是目标值比div左边距小。 当目标值比div元素的左边距大，这说明div是从左边向右边运动，将div看作一个物体，通过不断的增大l
js循环结构
大佐
07-13 195
循环：重复执行相同代码，得到相同或者不同的结果 好处：减少代码冗余 1.whlie循环： while(循环条件){条件为真时，执行的代码} 2.do while循环 do{ //不管条件是否满足，先执行一次 //再去循环条件是否满足 }while(循环条件){ } 3.for循环 for(表达式1;表达式2;表达式3){ //可执行代码 } 表达式...
threejs实现飞机圆周运动
最新发布
03-30
Three.js是一个用于创建和渲染3D图形的JavaScript库。要实现飞机的圆周运动，可以按照以下步骤进行： 1. 创建场景(Scene)、相机(Camera)和渲染器(Renderer)： ```javascript const scene = new THREE.Scene(); ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值