javascript运动总结

最新推荐文章于 2022-08-12 13:38:36 发布
最新推荐文章于 2022-08-12 13:38:36 发布
阅读量118 收藏
点赞数 1
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuhp123/article/details/98303068
版权

1. 伸缩框：鼠标移到指定区域，框缓冲伸展出，移出指定区域，框收回。

核心思想：给两个目标值，缩回时嵌入页面左边，伸出时整个wrapper向右移出。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Motion2</title>
    <style type = "text/css">
    *{
        margin:0;
        padding: 0;
    }
    .wrapper{
        position: relative;
        width: 400px;
        height: 100px;
        top: 300px;
        left: -400px;
        background: #f40;

    }
    .wrapper .show{
        position: absolute;
        width:50px;
        height: 100px;
        top: 0px;
        right: -50px;
        background: green;
    }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="show"> </div>
    </div>
    <script type = "text/javascript">
    // 鼠标移入，框缓冲弹出，移出框缓冲收回
    var wrapper = document.getElementsByClassName('wrapper')[0],
        show = document.getElementsByClassName('show')[0],
        timer = null;

    wrapper.onmouseenter = function(){
        startMove(this,0);
    }
    wrapper.onmouseleave = function(){
        startMove(this,-400);

    }
    function startMove(obj,target){
        clearInterval(timer);
        var speed;
        timer = setInterval(function(){
            speed = (target-obj.offsetLeft)/7;
            speed = speed>0? Math.ceil(speed):Math.floor(speed);
            if(obj.offsetLeft === target){
                clearInterval(timer);
            }else{
                obj.style.left = obj.offsetLeft + speed + 'px';
            }           
        },30)
    }
    </script>
</body>
</html>

2. 多物体多值链式运动框架：点击指定区域，同时改变div的宽、高、位置和透明度。

核心思想：透明度0-1之间变化，转化成0-100，否则透明度会在-1和1之间闪烁，无法缓冲改变透明度；透明度没有’px‘，其他有’px‘；注意判断停止的时间点；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Motion4</title>
    <style type = "text/css">
    *{
       margin: 0;
       padding:0;
    }
    div{
        position: absolute;
        width: 100px;
        height:100px;
        background:#f00;
        border:1px solid black;
        opacity: 1;
        top:0;
        left: 0;
        margin-top:60px;
    }
    .bottom{
        top:200px;
        left:0;
    }
    </style>
</head>
<body>
    <div class = "top"></div>
    <div class = "bottom"></div>

    <script type = "text/javascript">
    // 多物体多值链式运动框架
        var odiv1 = document.getElementsByTagName('div')[0],
            odiv2 = document.getElementsByTagName('div')[1];

        var timer = null;
        var target = {
            height:400,
            width:400,
            top:200,
            left:300,
            opacity:50
        }
        odiv1.onclick = function(){
            startMove(this,target,function(){
                startMove(odiv2,target);
            });
        }

        function getStyle(elem,prop){
            if(window.getComputedStyle){
                return window.getComputedStyle(elem,null)[prop];
            }else{
                return elem.currentStyle[prop];
            }
        }
        function startMove(obj,json,callback){
            clearInterval(obj.timer);
            
            obj.timer = setInterval(function(){
                var speed,cur;
                var bstop = true;
                for(var prop in json){
                    if(prop == 'opacity'){
                        cur = parseFloat(getStyle(obj,prop))*100;
                    }else{
                        cur = parseInt(getStyle(obj,prop));   
                    }
                    speed = (json[prop]-cur)/7;
                    speed = speed>0? Math.ceil(speed):Math.floor(speed);
                    if(prop == 'opacity'){
                        obj.style[prop] = (cur+speed)/100;
                    }else{
                        obj.style[prop] = cur + speed + 'px';
                    }
                    if(cur != json[prop])
                    {
                            bstop = false;
                    }   
                }
                if(bstop){
                    clearInterval(obj.timer);
                    typeof callback =='function'? callback():'';
                }
            },30)     
        }    
    </script>
</body>
</html>

3. 导航栏选中样式：当鼠标移入导航栏某一选项时，该选项的背景颜色发生改变，其他选项恢复正常。

核心思想：创建n+1个li，最后一个li作为背景颜色，当鼠标移入其他li时，最后一个li移动到目标li。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">    
    <title>elastic1</title>
    <style type = "text/css">
        *{
            margin: 0;
            padding:0;
            list-style: none;
        }
        ul{
            position: relative;
            width: 400px;
            height: 80px;
            top:100px;
            left: 200px;

        }
        ul .nav{
            /* position: absolute; */
            width: 98px;
            height: 78px;
            text-align: center;
            line-height: 78px;
            border:1px solid #000;
            float: left;
        }
        ul .bg{
            position: absolute;
            width: 98px;
            height: 78px;
            background: #f40;
            opacity: 0.5;
            border:1px solid #000;
        }
    </style>
</head>
<body>
    <ul>
        <li class = "nav">liu</li>
        <li class = "nav">hai</li>
        <li class = "nav">ping</li>
        <li class = "nav">hu</li>
        <li class = "bg"></li>
    </ul>
    <script type = "text/javascript">
        var liArray  = document.getElementsByClassName('nav'),
            // liArray = Array.prototype.slice.call(document.getElementsByClassName('nav'),0),
            libg = document.getElementsByClassName('bg')[0];
            
        for(var i = 0; i< liArray.length;i++){
            liArray[i].onmouseenter = function(){
                var target = this.offsetLeft;
                startMove(libg,target);
            }
        }
        // liArray.forEach(function(ele,index){
        //     ele.onmouseenter = function(){
        //         var target = this.offsetLeft;
        //         startMove(libg,target);
        //     }
            
        // })
        function startMove(obj,target){
            clearInterval(obj.timer); //必不可少
             var speed = 40,a,u = 0.8; 
             obj.timer = setInterval(function (){
                    a = (target-obj.offsetLeft)/7;
                    speed = (speed + a)*u;
                    if(Math.abs(speed)<=1 && Math.abs(target-obj.offsetLeft)<1){
                        clearInterval(obj.timer);
                        obj.style.left = target + 'px';
                    }else{
                        obj.style.left = obj.offsetLeft + speed + 'px';
                }
             },30)            
        }
    </script>
</body>
</html>

4.弹性碰撞

核心思想：碰到页面边缘时速度反向，注意碰到边缘的条件：

碰到下边缘：div.style.height = document.documentElement.Height - div.offsetTop

碰到上边缘：0 = document.documentElement.Height - div.offsetTop

碰到右边缘：div.style.width = document.documentElement.Width - div.offsetLeft

碰到左边缘：0 = document.documentElement.Width- div.offsetLeft

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>elastic2</title>
    <style type = "text/css">
    *{
        margin: 0;
        padding:0;
        list-style: none;
    }
    div{
        position: absolute;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #f00;
    }
    </style>
</head>
<body>
    <div></div>
    <script type = "text/javascript">
    //弹性碰撞
    var div = document.getElementsByTagName('div')[0];
    div.onclick = function(){
        startMove(div);
    }
    function startMove(obj){
        clearInterval(obj.timer);
        var speedX = 60,
            speedY = 400,
            g = 8,
            u = 0.8;
        obj.timer = setInterval(function(){
            
            speedY += g;
            var newLeft = obj.offsetLeft + speedX,
                newTop = obj.offsetTop + speedY;
            if(newTop >= document.documentElement.clientHeight-obj.offsetHeight){
                speedY = speedY*(-1);
                speedY *= u;
                speedX *= u;
                newTop = document.documentElement.clientHeight-obj.offsetHeight;
            }
            if(newTop<=0){
                speedY = speedY*(-1);
                speedY *= u;
                speedX *= u;
                newTop = 0;
            }
            if(newLeft>=document.documentElement.clientWidth-obj.offsetWidth){
                speedX = speedX*(-1);
                speedY *= u;
                speedX *= u;
                newLeft = document.documentElement.clientWidth-obj.offsetWidth;
            }
            if(newLeft<=0){
                speedX = speedX*(-1);
                speedY *= u;
                speedX *= u;
                newLeft = 0;
            }
            obj.style.left = newLeft + 'px';
            obj.style.top = newTop + 'px';
        },30)
    }    
    </script>
</body>
</html>

5. 点击拖拽div，松开时div弹性碰撞

核心思想：点击时获取鼠标当前位置，计算距离div左边缘和上边缘距离，固定住这个距离，鼠标移动时事件绑定为document.onmousemove而非div.onmousemove;

注意：当div速度不为零时再次点击拖拽需要清空上次弹性碰撞的定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>elastic3</title>
    <style type = "text/css">
    *{
        margin: 0;
        padding:0;
        list-style: none;
    }
    div{
        position: absolute;
        width: 100px;
        height: 100px;
        background: #f00;
    }
    </style>
</head>
<body>
   <div></div>
   <script type = "text/javascript">
   //拖拽松开后进行弹性碰撞
   var div = document.getElementsByTagName('div')[0];
   var timer = null,
       lastX = this.offsetLeft,
       lastY = this.offsetTop;
   div.onmousedown = function(e){
       clearInterval(this.timer);
       var e = e||window.event,
           disX = e.clientX - this.offsetLeft,
           disY = e.clientY - this.offsetTop,
           that = this,
           speedX = 0,
           speedY = 0;
        document.onmousemove = function(e){
            var newLeft = e.clientX - disX,
                newTop = e.clientY - disY;
            speedX = newLeft - lastX;
            speedY = newTop - lastY;
            lastX = newLeft;
            lastY = newTop;
            that.style.left = newLeft + 'px';
            that.style.top = newTop + 'px';

        }
        document.onmouseup = function(){
            document.onmousemove = null;
            document.onmouseup = null;
            startMove(that,speedX,speedY);
        }
   }
   function startMove(obj,speedX,speedY){
        clearInterval(obj.timer);
        var u = 0.8,
            g = 8; 
        obj.timer = setInterval(function(){
            speedY += g;
            var newTop = obj.offsetTop + speedY,
                newLeft = obj.offsetLeft + speedX;
            if(newTop >= document.documentElement.clientHeight-obj.offsetHeight){
                speedY = speedY*(-1);
                speedY *= u;
                speedX *= u;
                newTop = document.documentElement.clientHeight-obj.offsetHeight;
            }
            if(newTop<=0){
                speedY = speedY*(-1);
                speedY *= u;
                speedX *= u;
                newTop = 0;
            }
            if(newLeft>=document.documentElement.clientWidth-obj.offsetWidth){
                speedX = speedX*(-1);
                speedY *= u;
                speedX *= u;
                newLeft = document.documentElement.clientWidth-obj.offsetWidth;
            }
            if(newLeft<=0){
                speedX = speedX*(-1);
                speedY *= u;
                speedX *= u;
                newLeft = 0;
            }
            obj.style.left = newLeft + 'px';
            obj.style.top = newTop + 'px';
            if(Math.abs(speedX) <= 1){speedX = 0;}
            if(Math.abs(speedY) <= 1){speedY = 0;}
            if(speedX ==0 && speedY ==0 && newTop == document.documentElement.clientHeight - obj.offsetHeight){
                clearInterval(obj.timer);
                console.log('over');
            }
        },30)
   }  
   </script> 
</body>
</html>

 

小达不溜儿
关注
专栏目录
JavaScript部分总结
kevin的博客
01-19 193
JavaScript部分总结 开发工具与关键技术： DW、VS 、JavaScript部分总结 作者：黄桂康 撰写时间：2019.01.18 1、JavaScript是一种脚本语言，是世界上最流行的编程语言，它可以插入HTML页面代码中，也可以在本身文档类型上编程，所以它可以广泛应用更多领域。 2、 JavaScript引入（引入样式如下） ² 外部文件需要引入，选择他的路径src=“...
JavaScript & TypeScript总结
SS_SS_SSS_SSS的博客
06-25 859
JavaScript初学总结
缓动原理的MyJquery
Devil_lzh的博客
08-21 343
//animation：让指定的DOM元素缓动到指定的位置 //左右缓动 //原理：物体位置= 物体本身的位置+（目标位置-物体本身的位置）/10 function animation(obj,target){ clearInterval(obj.timer);//清除定时器 obj.timer = setInterval(function(){ var speed= (target-ob
JavaScript运动
happy_kx的博客
04-14 977
在js中实现运动的原理： 在开启定时器setInterval()/setTimeout()和清楚定时器clearInterval()/clearTimeout()来控制运动，其中setInterval()方法可以让物体动起来,而clearInterval()方法可以让运动停止；在定时器过程中不断更改需要改变的值。 总结一下运动所需要用到的知识： 1.定时器（异步的 多次） let id = setInterval(function(){},毫秒值) clearInterval(id) 2.延时器
Javascript 运动基础
Wlcf258的博客
01-17 535
运动基础： 让Div运动起来 2.速度——物体运动的快慢 3.运动中的Bug 4.不会停止 5.速度取某些值会无法停止 6.到达位置后再点击还会运动 7.重复点击速度加快物体运动原理：通过改变物体的位置，而发生移动变化。 方法：1.运动的物体使用绝对定位 2.通过改变定位物体的属性（left、right、top、bottom）值来使物体移动。例如向右或左移动可以使用offsetL
JavaScript学习总结一
千铭丶博客
06-18 764
JavaScript： -是嵌入HTML中在浏览器中的脚本语言（没有编译器的语言）——用来向HTML页面添加交互行为 -JavaScript和Java没有任何关系 -JavaScript特点： 基于对象：有对象，但不支持严格的封装、继承、多态。 -继承：JS中没有继承的概念，但是有原型的概念，每一个对象都有一个prototype属性，   用来指定该对象的原型对象，类似于继承 -封装：...
JavaScript运动之缓冲运动
郭宇的博客
05-10 570
js运动，缓冲运动，方法封装
html+css+javascript知识点总结
hholy124的博客
08-12 3271
html+css+javascript知识点总结
JavaScript 入门知识点总结
qq_43720551的博客
02-28 679
提示：笔者本身具有多种编程语言基础，因此本文只是简单记录一下JavaScript一些特性。 完全零接触的朋友可以绕道，也可以硬刚！ 本文是参考慕课网的课程，点击链接可直达 笔者认为，学习编程最重要的必然是实践，如果只是记忆一些理论，那么遇到问题还是不能够解决，因此，本文将改变本专栏之前的风格，以实际的例子分析出现的知识点。 文章目录引用js引用JS外部文件如何插入JS变量判断语句一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 <!DOCTYPE html> <html
javascript完美运动框架
smile_1101的博客
08-27 646
导读：本文将总结我从事js运动处理的过程，整合成一个简单框架，方便调用。            我认为基础运动的本质就是:对要处理的载体进行平移，拉伸，收缩，旋转和放大。本文是从单运动到多运动到链式运动到完美运动方向展开。                 单向运动：只是让物体朝一个方向运动或让其变宽、变高等；          多运动： 我们现在面临的不止一个物体，而是多个物体一起运
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
10-23
本文将对JavaScript中实现这些运动效果的方法进行详细总结，并结合具体实例进行分析。 首先来看一下图片放大缩小效果的实现。在这个过程中，我们主要利用了CSS样式以及JavaScript的定时器和DOM操作。通过设置`...
javascript关于运动的各种问题经典总结
10-24
本文将深入探讨两个常见的JavaScript运动问题，以及如何修复这些问题。 问题一涉及到的是一个简单的左移动画。开发者希望当元素移动到指定位置时停止运动。在初始的错误代码中，`if`语句用于检查元素是否到达目标...
javascript运动系列第三篇-曲线运动
最新发布
12-27
在JavaScript运动系列的第三篇文章中，我们探讨了曲线运动，这是一种更为复杂的动画形式，相比于直线运动，它提供了更丰富的视觉效果。在这个主题下，我们将深入理解如何使用JavaScript来实现摆动运动、圆形运动以及...
audio.play() 控制台报错：Uncaught (in promise) DOMException
热门推荐
喜东东的博客
09-11 1万+
我当时的解决方法如下： 在chrome的地址栏中输入：chrome://flags/#autoplay-policy，回车打开设置页面， 然后点击Reset all to default，点击选项后页面下方会弹出个提示框，点击提示框上的“RELAUNCH NOW”即可。 报错原因参考：https://blog.csdn.net/Mariosss/article/details/87861...
Boolean值为true和false情况
喜东东的博客
08-04 8571
Boolean值为 false情况：false，null，""，0，-0，undefined，初始对象未定义； true情况：除上面false情况外都为ture。
【Vue&JS】解决鼠标拖拽与点击事件冲突&元素在指定div中拖拽移动场景
喜东东的博客
05-11 6532
拖动的元素在鼠标按下时通过时间差给元素添加一个属性（drag-flag），若超过规定时间则认为是在拖拽，属性设置为true, 否则设置为false。点击方法中通过获取这个属性判断是否要执行点击后的指令。 html: <div class="drag-area"> <div v-if="isShowHelp" class="help-control" ref="helpControl" draggable="true" @mousedown.stop=.
【JS】判断Dom是否在可视区
喜东东的博客
04-02 2111
// dom元素是否在可视区 export const elementIsVisibleInViewport = (el, partiallyVisible = true) => { // 第一个参数是element 第二个参数是 是否部分可见也算可见 // 设置为false 即有一部份不可见即不可见 // 设置为true 即部分可见即算是可见 const { top, left, bottom, right, } = el.getBounding
vue&js 带有canvas的全屏和退出全屏
喜东东的博客
01-14 1483
问题描述： 因为canvas画布的高度和宽度是一开始固定写好的，当需要全屏时，画布的高度是开始定义的高度，就会出现屏幕下方黑了一块，如下图，所以我们需要判断是否全屏，画布根据这个属性改变画布高度。 1.绑定resize事件，当浏览器窗口大小发生变化时判断是否全屏 created() { this.isFullScreen = this.isFullscreen(); window.addEventListener('resize', () => { this.isFu.
Ajax中onreadystatechange函数不执行，是因为放在open()后
喜东东的博客
09-04 872
将onreadystatechange函数放在open前即可。 ajax: 1.创建Ajax对象——new XMLHttpRequest;/ new ActiveXObject('Microsoft.XMLHTTP'); 2.连接到服务器 ——open 3.发送请求 ——send 4.接收返回值 ——onreadystatechange ...
JavaScript运动问题详解：滚动错误与修复
本文将深入探讨两个经典的JavaScript运动问题，这些问题涉及到如何正确地控制元素的动画效果，并确保它们在达到预期位置时能够停止。 **问题一：运动停止条件的判断** 在问题一中，开发者试图通过检查元素的当前...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值