js拖动重力碰撞

PROMULGATOR

qready

陕西省西安市

← js鼠标移入放大效果

→ js在屏幕内碰撞反效果

相关代码

Html

Css

Js

 拖动

#box {
	width:100px;
	height:100px;
	background:#ff0000;
	position:absolute;
}

window.onload = function() {
    var oDiv = document.getElementById("box");
    var lastX = 0;
    var lastY = 0;
    oDiv.onmousedown = function(ev) { //鼠标按下
        var ev = event || ev; //获取鼠标事件
        var evX = ev.clientX; //获取鼠标横坐标
        var evY = ev.clientY; //获取鼠标纵坐标
        var cX = evX - oDiv.offsetLeft; //鼠标相对于DIV的横坐标
        var cY = evY - oDiv.offsetTop; //鼠标相对于DIV的纵坐标
        document.onmousemove = function(ev) { //鼠标移动
            var ev = event || ev;
            var divL = ev.clientX - cX;
            var divT = ev.clientY - cY;
            if (divL <= 0) { //左右边界出界判定
                divL = 0;
            } else if (divL >= document.documentElement.clientWidth - oDiv.offsetWidth) {
                divL = document.documentElement.clientWidth - oDiv.offsetWidth;
            }
            if (divT <= 0) { //上下边界出界判定
                divT = 0;
            } else if (divT >= document.documentElement.clientHeight - oDiv.offsetHeight) {
                divT = document.documentElement.clientHeight - oDiv.offsetHeight;
            }
            oDiv.style.left = divL + 'px';
            oDiv.style.top = divT + 'px';
            oSpeedX = divL - lastX;
            oSpeedY = divT - lastY;
            lastX = divL;
            lastY = divT;
            return false; //阻止默认事件
        }
        document.onmouseup = function() { //鼠标抬起
            document.onmousemove = null;
            document.onmouseup = null;
            myMove(oDiv); //函数调用
        }
        clearInterval(iTime)
    }
    // myMove(oDiv);
}
var iTime = null;
var oSpeedX = 0; //横向速度
var oSpeedY = 0; //纵向速度
function myMove(obj) { //运动动画函数
    clearInterval(iTime); //
    iTime = setInterval(function() { //计时器
        oSpeedY += 3; //加速度
        var l = obj.offsetLeft + oSpeedX; //横坐标
        var t = obj.offsetTop + oSpeedY; //纵坐标

if (t >= document.documentElement.clientHeight - obj.offsetHeight) { //上下边界判定
            oSpeedY *= -0.7;
            oSpeedX *= 0.7;
            t = document.documentElement.clientHeight - obj.offsetHeight + "px";
        } else if (t <= 0) {
            oSpeedY *= -1
            t = 0;
        }
        if (l >= document.documentElement.clientWidth - obj.offsetWidth) { //左右边界判定
            oSpeedX *= -0.7;
            l = document.documentElement.clientWidth - obj.offsetWidth + "px";
        } else if (l <= 0) {
            oSpeedX *= -0.7;
            l = 0;
        }
        if (Math.abs(oSpeedY) < 1) {
            oSpeedY = 0;
        }
        if (Math.abs(oSpeedX) < 1) {
            oSpeedX = 0;
        }
        if (oSpeedX == 0 && oSpeedY == 0 && t == document.documentElement.clientHeight - obj.offsetHeigh) { //运动停止
            clearInterval(iTime);
        } else {
            obj.style.left = l + "px"; //横坐标移动
            obj.style.top = t + "px"; //纵坐标移动
        }
    }, 30)

}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

js拖动重力碰撞



代码描述：鼠标拖动，扔出拟重力弹跳碰撞

2

最新

发表评论全部评论

暂时没有评论！

罄?一瞥0

2017/8/11 10:19:45

好厉害，这个效果可以写游戏了

qready0

2017/8/23 9:18:40

游戏还差着呢，大家一起学习进步

回复

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>js拖动重力碰撞-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号