• javascript + DIV +CSS 实现可拖动消息窗体


      
    <html>
    <head>
    <style>
        #div
    {width:300px;height:200px;color=red;border-top:1px solid #000;border-bottom:1px solid #000;border-left:1px solid #000;border-right:1px solid #000;size=13px;position:absolute;bottom:50px;right=80px;}
        
    </style>
    </head>

    <body>
        
    <script language="javascript">
            
    var moveable = false;
            
    function aa(val)
            
    {                        
                 
    var obj = document.getElementById("div");
                
    if(val == 0)
                
    {
                    obj.style.display
    ="";
                            
    var x,y;
                
                    x 
    = event.clientX;
                    y 
    = event.clientY;
               
                    obj.style.left
    =x;
                    obj.style.top
    =y;
                            
    //alert("X:"+x+"Y:"+y);
                }

                        
    else
                  obj.style.display
    ="none";
            }
        
            
    function startgrap(obj)
            
    {                        
                
    if(event.button==1)
                
    {
                obj.setCapture();
                 
    //记录鼠标和层位置;
                           x0 = event.clientX;
                           y0 
    = event.clientY;
                           x1 
    = parseInt(obj.style.left);
                           y1 
    = parseInt(obj.style.top);
                           moveable 
    = true;            
                }

             }

            
    function stopgrap(obj)
            
    {
                
    if(moveable)
                
    {
                    obj.releaseCapture();
    //用来释放对鼠标的捕捉
                    moveable = false;
                }

            }

            
    function grap(obj)
            
    {
                 
    if(moveable)
                      
    {                       
                               obj.style.left 
    = x1 + event.clientX - x0;
                               obj.style.top  
    = y1 + event.clientY - y0;
                }

            }

        
    </script>
        
    <form id="form1">
            
    <input type=button value="DIV应用" onmousemove="aa(0);">    
            
    <div id="div2" style="background:#ff00cc;width=100px;" onmousemove="aa(0);">鼠标移到上面试试看</div> 
            
    <div id="div" style="display:none" onmousedown="startgrap(this);" onmouseup="stopgrap(this);" onmousemove="grap(this);">
                
    <div style="border-top:1px solid red;position:absolute;right=1px;"><span onclick="aa(1);" style="cursor:hand"><font color="#eee"><b>关闭</b></font></span></div>
                
    <span>I Like you ,do you know? <br>if you don`t know,now i tell you,i tell you!<br><br>透明窗体,可拖动</span>
            
    </div>
        
    </form>
        
    </body>
    </html>

    本程序测试通过,大家有好的方法可一起讨论!谢谢

  • 相关阅读:
    ThinkPHP 3.2 调用自定义函数库
    phpstorm 2017版代码提示功能开启解决方案
    phpstorm 2017激活
    JavaScript返回上一页和返回上一级页面并刷新
    PHP处理Ajax请求与Ajax跨域
    13个能快速开发android的经典项目
    分享6款优秀的 AR/VR 开源库
    Android-----购物车(包含侧滑删除,商品筛选,商品增加和减少,价格计算,店铺分类等)
    Android------视频播放器(包含全屏播放,快退,快进,腾讯新闻的列表播放等)
    吴恩达课后作业学习2-week1-2正则化
  • 原文地址:https://www.cnblogs.com/Lewis/p/450978.html
Copyright © 2020-2023  润新知