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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    <script>

    另外一种鼠标跟随移动(也可以制作成拖拽)
    window.onload=function(){
        var xmouse=0;
        var ymouse=0;
        var odiv=document.getElementById("time");

        odiv.onmousedown=function(ev){
                var ev=ev||window.event;
            
        
            xmouse=ev.clientX-odiv.offsetLeft ;
            ymouse=ev.clientY-odiv.offsetTop ;
        
        document.onmousemove=function(ev){
            var ev=ev||window.event;    

            
            odiv.style.left=ev.clientX-xmouse+"px";
                
            odiv.style.top=ev.clientY-ymouse+"px";
            if(odiv.style.left<=0){
                odiv.style.left=0;
                }
                    if(odiv.style.top<=0){
                odiv.style.top=0;
                }
           }
        document.onmouseup=function(ev){
            var ev=ev||window.event;    
            
            document.onmousemove=null;
            document.onmousedown=null;
         }
        }
        
        
    }
        

     
        

    </script>
    <body>
    <div style="position:relative; left:300px;top:300px; 100px;height: 100px;" id="time">老子要显示时间</div>

    </body>
    </html>

  • 相关阅读:
    Linux开机自动启动ORACLE设置
    linux下查找过滤文件内容
    weblogic 修改控制台访问路径
    ASM实例挂载磁盘失败错误日志
    weblogic服务器下一个domain建多个server(端口)
    Oracle Profile
    codeforces_724C_Ray Tracing
    struts2_validate表单验证
    struts2.5.2 通配符问题_亲测有用
    hibernate+struts2
  • 原文地址:https://www.cnblogs.com/my-blocg/p/5969430.html
Copyright © 2011-2022 走看看