JS运动基础 01

最新推荐文章于 2024-11-07 13:38:59 发布

-Y、

最新推荐文章于 2024-11-07 13:38:59 发布

阅读量75

点赞数

分类专栏： javascript 文章标签： javascript css js

本文链接：https://blog.csdn.net/weixin_44776706/article/details/105283759

版权

javascript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

============================================================================
运动小框架：
要记得先关后开

<style>
        #div1{
            width: 200px; height: 200px;background-color: aqua;position: absolute; top: 50px; left: 10px;
        }
    </style>
    <script>
        window.onload=function(){
            var obtn=document.getElementById('btn1')
            var odiv=document.getElementById('div1')
            var timer=null;
            var speed=7
            obtn.onclick=function()
            {
                clearInterval(timer)//防止同时开很多定时器！！
                timer=setInterval(function(){
                        if(odiv.offsetLeft>=300)//在规定位置停下
                        {
                            clearInterval(timer)
                        }
                        else
                        {
                            odiv.style.left=odiv.offsetLeft+speed+'px';
                        }
                       
                }, 30);
            }
        }

    </script>

</head>
<body>
        <input id="btn1" type="button" value="开始运动">
        <div id="div1"></div>
</body>

============================================================================

！！函数一般在保证功能相同的情况下，参数越少越好

模拟缩进屏幕运动：

效果：
在这里插入图片描述
代码：

 <script>
        window.onload=function(){
            var odiv=document.getElementById('div1')
            var timer=null;
          

            odiv.onmouseover=function(){  
                    setrun(0)

            }
            odiv.onmouseout=function(){  
                    setrun(-200)

            }
          
           function setrun(end){//使用运动小框架
            clearInterval(timer)
                    timer=setInterval(function(){
                        var speed=0
                            if(odiv.offsetLeft<end)
                                {
                                    speed=5
                                }
                                else
                                {
                                    speed=-5
                                }

                            if(Math.abs(end-odiv.offsetLeft)<=speed)
                            //最后距离绝对值少于运动一次的距离防止过头
                                {
                                    clearInterval(timer)
                                    odiv.style.left=end+‘px’//最后一次移动直接移到终点
                                }
                            else
                                {
                                    odiv.style.left=odiv.offsetLeft+speed+'px'
                                }

                },30)
           } 
        }
    </script>

</head>
<body>
        <div id="div1">
            <span>分享到</span>    
        </div>
   </body>

模拟透明度变化：

效果：
在这里插入图片描述

代码：

<style>
        #div1{//filter--->兼容IE浏览器      opacity--->兼容chrom浏览器
            width: 200px;height: 200px;background-color: blueviolet; filter : alpha(opacity=30); opacity :0.3; }
    </style>
<script>

        window.onload=function(){
            var odiv=document.getElementById('div1')
            var timer=null;              
            var alpha=30;//与运动不同，要用一个变量模拟当前透明度
            odiv.onmouseover=function(){
                    set_opacity(100)
                
            }
            odiv.onmouseout=function(){

                    set_opacity(30)
            }      

            function set_opacity(iend){
                var odiv=document.getElementById('div1')
                      
                 clearInterval(timer)
                 timer=setInterval(function()
                 {
                        var speed=0
                            if(alpha<iend)
                        {
                                speed=5
                        }
                        else
                        {
                                speed=-5
                        }

                        if(alpha==iend)
                        {
                            clearInterval(timer)
                        }
                        else
                        {
                            alpha+=speed;

                            odiv.style.filter='alpha(opacity='+alpha+')';
                            odiv.style.opacity=alpha/100;//在最后填充回css中
                        }
                 },30)

             }     

        }
      
             
    </script>
</head>
<body>
    <div id="div1"></div>