碰撞菜单(碰撞弹框的效果)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #div1{
                width: 100px;
                height: 100px;
                background: red;
                position: absolute;
            }

        </style>
        <script>
            window.onload=function(){
                var oDiv=document.getElementById("div1");
                var disX=0;
                var disY=0;

                var prevX=0;
                var prevY=0;
                var iSpeedX=0;
                var iSpeedY=0;
                var timer=null;

                oDiv.onmousedown=function(ev){
                    var ev=ev||window.event;
                    disX=ev.clientX-oDiv.offsetLeft;
                    disY=ev.clientY-oDiv.offsetTop;
                    prevX=ev.clientX;
                    prevY=ev.clientY;
                document.onmousemove=function(ev){
                    var ev=ev||window.event;
                    oDiv.style.left=ev.clientX-disX+"px";
                    oDiv.style.top=ev.clientY-disY+"px";

                    iSpeedX=ev.clientX-prevX;
                    iSpeedY=ev.clientY-prevY;

                    prevX=ev.clientX;
                    prevY=ev.clientY;
                }
                document.onmouseup=function(){
                    document.onmousemove=null;
                    document.onmouseup=null;

                    startMove();
                }
                return false;
                };
                function startMove(){
                    clearInterval(timer);
                    timer=setInterval(function(){
                        iSpeedY+=3;
                        var L=oDiv.offsetLeft+iSpeedX;
                        var T=oDiv.offsetTop+iSpeedY;
                        if(T>document.documentElement.clientHeight-oDiv.offsetHeight){
                            T=document.documentElement.clientHeight-oDiv.offsetHeight;
                            iSpeedY*=-1;
                            iSpeedY*=0.75;
                            iSpeedX*=0.75;
                        }else if(T<0){
                            T=0;
                            iSpeedY*=-1;
                            iSpeedY*=0.75;
                        }
                        if(L>document.documentElement.clientWidth-oDiv.offsetWidth){
                            L=document.documentElement.clientWidth-oDiv.offsetWidth;
                            iSpeedX*=-1;
                            iSpeedX*=0.75;
                        }else if(L<0){
                            L=0;
                            iSpeedX*=-1;
                            iSpeedX*=0.75;
                        }
                        oDiv.style.left=L+"px";
                        oDiv.style.top=T+"px";
                    },30)
                }
            }
        </script>
    </head>
    <body>
        <div id="div1"></div>
    </body>
</html>

原文地址:https://www.cnblogs.com/gxywb/p/10245812.html

时间: 2024-10-21 12:57:39

碰撞菜单(碰撞弹框的效果)的相关文章

原生js实现拖拽弹框的效果

研究了一上午,模仿了拖拽弹框的效果,小有成就 <script type="text/javascript"> function getByClass(classname,parent){ var par=parent||document, eles=par.getElementsByTagName("*"), needArr=[]; for(var i=0;i<eles.length;i++){ if(eles[i].className==clas

弹出输入文本框上弹的动画效果

先看以下简单的模型图片效果,有图才有真相: 软键盘弹出效果: 终极效果实现: 效果呢就是这样: 简单解释一下:由于显示页面要承载很多的信息内容,所以在让用户发布动态的时候,要求从页面的底部以动画的方式向上抽出.当弹出软键盘输入法的时候,要避免输入框被全部遮挡或者部分遮挡.则,软键盘要把输入文本框顶起来,完全的托起来. 那么,就要完成这几步骤: 1,在该页面的类中(Actiivty或者fragment),在加载该布局之前添加这句话,其作用是使文本框根据软键盘弹出自动调节位置和大小: getWind

JS遮罩层弹框效果

对于前端开发者来说,js是不可缺少的语言.现在我开始把我日常积累的一些js效果或者通过搜索自己总结的一些效果分享给大家,希望能够帮助大家一起进步,也希望大家能够多多支持! 1.今天我先分享一个遮罩层弹框效果: <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <

selemiun 下拉菜单、复选框、弹框定位识别

一.下拉菜单识别 对下拉框的操作,主要是通过Select 类里面的方法来实现的,所以需要new 一个Select 对象(org.openqa.selenium.support.ui.Select)来进行操作 public void selectDemo() throws InterruptedException { driver.get("http://tieba.baidu.com/f/search/adv?red_tag=v3168911135"); driver.manage()

Jquery学习笔记(8)--京东导航菜单(2)增加弹框

京东导航,添加中间的弹框栏,使用position定位,放在左侧栏的li标签里面,成为一个整体,保证鼠标在弹框里的时候,弹框不消失: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="jquery.js&quo

weui 弹框中的单选效果

<!--性别修改弹框--> <div class="weui_dialog_alert" id="doctorSexDialog" style="display: none;"> <div class="weui_mask"></div> <div class="weui_dialog"> <div class="weui_dial

CSS3新vw, vh单位与纯CSS定位的弹框屏幕居中效果实例页面

在css中vw和vh分别代表所占的百分比,可以设置最外部的容器的宽高,但是都要结合百分比一起使用. 展示 回到相关文章 ? 图片宽度(目前1024像素): 128  1024 点击我出现图片弹框 代码CSS代码:.dialog_container {    display: none;    width: 100%;    width: 100vw;    height: 100%;    height: 100vh;    background-color: rgba(0,0,0,.35); 

js弹框3秒后自动消失

开发中有时候会需要最出弹框后,过几秒自动消失的效果,下面给大家分享一下我自己做的一个小案例. 案例中的弹框使用的是bootstrap里面的模态框,实现自动消失则用的是js中的setInterval方法.该弹框使用了jquery-ui中的draggable方法,可拖动. 目录结构如下: 下面是案例代码: demo.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti

弹框提示用户输入

在很多页面,都会有提示用户输入账号和密码的弹框.并保障用户的良好体验效果. <html>   <head>   <title></title>   <meta http-equiv="content" content="text/html" charset="utf-8"/>   <style type="text/css">   body{   back