zoukankan      html  css  js  c++  java
  • 页面拖拽效果

    今天需要做一个悬浮效果,做了一个简单的拖拽

    <script language="javascript">
    var firstX=0; var firstY=0;
    var relativeX=0; var relativeY=0;
    var move=false;
        //mouse position
        function mouseCoords()
        {
         var ev = ev || window.event;
         if(ev.pageX || ev.pageY){
          return {x:ev.pageX, y:ev.pageY};
         }
         return {
          x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
          y:ev.clientY + document.body.scrollTop  - document.body.clientTop
         };
        }

        function StartDrag(obj)
        {
            obj.setCapture();
            obj.style.background="#5684FE";
            relativeX=parseInt(mouseCoords().x)-parseInt(obj.style.left);
            relativeY=parseInt(mouseCoords().y)-parseInt(obj.style.top);
            move=true;
        }

        function Drag(obj)
        {
            if(move)
            {  
                obj.style.left=parseInt(mouseCoords().x)-parseInt(relativeX);
                obj.style.top=parseInt(mouseCoords().y)-parseInt(relativeY);
            }
        }

        function StopDrag(obj)
        {
            obj.style.background="#5684FE";
            obj.releaseCapture();
            move = false;
        }
    </script>

    <div runat="server" id="divInstance"  style="display: none; position: absolute;
        400px; height: 30px; top: 50px; left: 50px; z-index: 1000; background: #5684FE"
        onmousedown="StartDrag(this)" onmousemove="Drag(this)" onmouseup="StopDrag(this)">
        123456
    </div>

  • 相关阅读:
    Log4net 在framework Client中编译失败
    (MVC)从客户端中检测到有潜在危险的 Request.Form 值
    RichText设置高亮 (未完)
    1转换为00001等
    简单的MDX案例及说明(3)
    兼容型Word 并带传统读法
    Visual Studio 2010添加新项缺失[ADO.NET 实体数据模型]解决方法
    SQL Server 的优化方法(续转)
    两个有用的委托:Func和Action
    SQL Server 的优化方法(转)
  • 原文地址:https://www.cnblogs.com/cuihongyu3503319/p/1357729.html
Copyright © 2011-2022 走看看