js 拖拽实例 自由下落

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖拽实例</title>
    <style>
        .div{
            position: absolute;
            left: 0;
            top: 0;
            background-color: #1aaba8;
            border-radius: 50%;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="div"></div>
    <script>
        // 拖拽
        // 下落前的初始速度
        // 自由下落

        const div = document.getElementsByClassName('div')[0]


        drag(div,function(cool){
            // 移动结束
            move(div,cool)
        })
        // 拖拽
        function drag(dom,call){
            // 初始位置
            let x = dom.offsetLeft
            let y = dom.offsetTop
            let isMove = false;

            let mouseX = 0
            let mouseY = 0
            
            let last = {x:0,y:0}
            let cool = {x:0,y:0}

            // 鼠标按下
            dom.onmousedown = function(e){
                clearInterval(dom.timer)
                isMove = true;

                // 鼠标初始位置
                mouseX = e.pageX - this.offsetLeft
                mouseY = e.pageY - this.offsetTop
            }

            // 鼠标放开
            dom.onmouseup = function(){
                isMove = false;
                call && call(cool)
            } 

            // 鼠标移动
            document.onmousemove = function(e){
                if(!isMove) return // 是否可移动 

                // 移动位置
                let moveX = e.pageX - mouseX
                let moveY = e.pageY - mouseY

                // 边界检测
                if(moveX <= 0) moveX = 0
                if(moveY <= 0) moveY = 0
                let top = document.documentElement.clientHeight - dom.clientHeight
                let left = document.documentElement.clientWidth - dom.clientWidth
                if(moveY >= top) moveY = top
                if(moveX >= left) moveX = left

                // 创建span  拖拽轨迹
                let span = document.createElement('span')
                span.style.position = 'absolute'
                span.style.left = moveX + 'px'
                span.style.top = moveY + 'px'
                span.style.width = '2px'
                span.style.height = '2px'
                span.style.backgroundColor = 'red'
                document.body.appendChild(span)

                // 根据轨迹计算初始速度 
                cool.x = moveX - last.x
                cool.y = moveY - last.y
                last.x = moveX
                last.y = moveY

                // 移动dom
                dom.style.left = moveX + 'px'
                dom.style.top = moveY + 'px'
            }  
            
            document.onmouseup = function(){
                // isMove = false;
                // call && call(cool)
            } 
        }
    
        // 自由下落
        function move(dom,cool){
            clearInterval(dom.timer)
            let speedX = cool.x
                speedY = cool.y 
                g = 1  // 重力加速度
                loss = .8; // 能量损耗

            dom.timer = setInterval(() => {
                // 重力
                speedY += g
                
                let moveX = speedX + dom.offsetLeft
                let moveY = speedY + dom.offsetTop

                // 边界检测 bug 贴边损耗
                let top = document.documentElement.clientHeight - dom.clientHeight
                let left = document.documentElement.clientWidth - dom.clientWidth
                if(moveY >= top){
                    speedY *= -1 // 反向反转
                    moveY = top
                    loaaHandle()
                }
                if(moveX >= left){
                    speedX *= -1 
                    moveX = left
                    // loaaHandle()
                }
                if(moveX <= 0){
                    moveX = 0
                    speedX *= -1
                    // loaaHandle()
                }
                if(moveY <= 0){
                    moveY = 0
                    speedY *= -1
                    // loaaHandle()
                }
                
                // 触底 产生能量损耗
                function loaaHandle(){
                    speedX *= loss
                    speedY *= loss
                }

                // 停止定时器
                if(Math.abs(speedX) < .5) speedX = 0
                if(Math.abs(speedY) < .5) speedY = 0
                if(speedX === 0 && speedY === 0 && dom.offsetTop === moveY){
                    // console.log('清楚定时器')
                    clearInterval(dom.timer)
                }
                console.log(speedY)
                dom.style.left = moveX + 'px'
                dom.style.top = moveY + 'px'
            }, 30);
        }
    </script>
</body>
</html>
对整threeJS体系进行全面剖析。整理出全面的教学大纲,涵盖内容面非常广。 此教学版本为threeJS107版本。 关于版本不建议大家使用低于90的版本学习。 以下是课程目录 1-ThreeJS概览(基本图形简介,什么是点线面如何绘制点线面,什么是材质,什么是几何体,什么是相机,什么是渲染器,什么是场景) 2-相机和渲染器(详解相机类型,渲染器如何使用,针对不同场景怎么用,怎么调效果,怎么渲染,怎么输出画布,如何解决透明问题等等) 3-创建平面几何(常见的几何体如何使用,如何使用简单的几何体绘制出自定义自己想要的几何体,关于几何体的性能剖析,如何解决性能,几何体的渲染原理) 4-高级图形算法常见库(求直线的斜率  计算线段与圆的交点 计算线段的长度 判断折线是否在多边形内 等等) 5-sprite精灵(怎么让一个图标永远朝向屏幕,精灵的属性,精灵材质原理等,广告提示框必用) 6-骨骼游戏动画(什么是模型动画,常见游戏案例,如何让人头进行各种攻击动作) 7-3d模型加载(常见模型格式,如何渲染不同格式,不同格式的特点,什么格式性能优越,模型渲染异常,贴图不显示等问题详解) 8-高阶动态纹理(你所不知道的纹理用法,我说你不知道,你肯定不知道) 9-漫游轨迹以及其动画路径(怎么绘制贝塞尔曲线,如何使用曲线上的路径,跟随路径移动的原理,相机如何运动,物体如何运动) 10-着色器(什么是着色器。初识着色器基础,着色器材质怎么用,怎么使用着色器库) 11-常见渲染以及透明度问题 12-对象拾取以及拖拽(3d世界里面如何拖拽物体,拖拽的原理,mousemove mouseon等的事件效果) 13-世界坐标以及组的问题(什么是相对坐标,什么是世界坐标,什么是当前坐标,怎么转化父子坐标系,组的优化,为什么用组,组的优势) 14-指定对象旋转中心(什么是物体的几何体中心,如何改变中心,如何绕轴转动) 15-层级对象渲染(多个场景一键切换,切换的优势,针对大项目的用法) 16-拓展了解系列(不定期不断更新案例,各种酷炫效果bloom,halo等,以及各种3d图表,粒子案例等,不断构建你的3d实践能力)
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页