zoukankan      html  css  js  c++  java
  • 妙味——拖拽+碰撞+重力

    <!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" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
    #div1{width: 100px;height: 100px;background: red;position: absolute;}
    div{width: 3px;height: 3px;background: black;position: absolute;}
    </style>
    <script>
    window.onload=function(){
        var oDiv=document.getElementById('div1');
    
        var lastX=0;
        var lastY=0;
    
        oDiv.onmousedown=function(ev){
            // alert(1);
            var oEvent=ev||event;
            var disX=oEvent.clientX-oDiv.offsetLeft;
            var disY=oEvent.clientY-oDiv.offsetTop;
    
            document.onmousemove=function(ev)
            {
                var oEvent=ev||event;
    
                var l=oEvent.clientX-disX;
                var t=oEvent.clientY-disY;
    
                oDiv.style.left=l+'px';
                oDiv.style.top=t+'px';
    
                iSpeedX=l-lastX;
                iSpeedY=t-lastY;
    
                lastX=l;
                lastY=t;
    
                document.title='x:'+iSpeedX+',y:'+iSpeedY;
    
            };
    
            document.onmouseup=function()
            {
                document.onmousemove=null;
                document.onmouseup=null;
    
                startMove();
            };
    
            clearInterval(timer);
        };
    };
    
    var timer=null;
    
    var iSpeedX=0;
    var iSpeedY=0;
    
    function startMove()
    {
        clearInterval(timer);
    
        timer=setInterval(function (){
            var oDiv=document.getElementById('div1');
    
            iSpeedY+=3;
    
            var l=oDiv.offsetLeft+iSpeedX;
            var t=oDiv.offsetTop+iSpeedY;
    
            if(t>=document.documentElement.clientHeight-oDiv.offsetHeight)
            {
                iSpeedY*=-0.8;
                iSpeedX*=0.8;
                t=document.documentElement.clientHeight-oDiv.offsetHeight;
            }
            else if(t<=0)
            {
                iSpeedY*=-1;
                iSpeedX*=0.8;
                t=0;
            }
    
            if(l>=document.documentElement.clientWidth-oDiv.offsetWidth)
            {
                iSpeedX*=-0.8;
                l=document.documentElement.clientWidth-oDiv.offsetWidth;
            }
            else if(l<=0)
            {
                iSpeedX*=-0.8;
                l=0;
            }
    
            if(Math.abs(iSpeedX)<1)
            {
                iSpeedX=0;
            }
            if(Math.abs(iSpeedY)<1)
            {
                iSpeedY=0;
            }
    
            if(iSpeedX==0 && iSpeedY==0 && t=document.documentElement.clientHeight-oDiv.offsetHeight)
            {
                clearInterval(timer);
            }
            else
            {
                oDiv.style.left=l+'px';
                oDiv.style.top=t+'px';    
            }
        },30);
    };
    </script>
    </head>
    <body>
        <div id="div1"></div>
    </body>
    </html>
    高否?富否?帅否? 否? 滚去学习!
  • 相关阅读:
    nginx+redis 实现 jsp页面缓存,提升系统吞吐率
    mybatis做like模糊查询
    java自定义注解实现前后台参数校验
    sql like 通配符 模糊查询技巧及特殊字符
    Hbuilder 常用快捷键汇总
    史上最全最强SpringMVC详细示例实战教程
    软件设计师&产品经理应常去的网站
    ActionMQ5.8.0 JMS实例 手把手详细图解
    Maven简单使用
    Maven 使用介绍
  • 原文地址:https://www.cnblogs.com/baixc/p/3495951.html
Copyright © 2011-2022 走看看