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>

  • 相关阅读:
    Tips on Hair and Final gathering
    数学公式和符号的念法
    How to use Intel C++ Compiler in Visual Studio 2008
    Number Prefixes in Mathematics
    Glossy reflections/refractions in large scene
    atomic flushing data
    elvish Template Library Plan
    [Maxim07]中光线与三角形求交算法的推导
    C# 关闭窗体立即停止进程
    MS SQL 索引设计的准则
  • 原文地址:https://www.cnblogs.com/cuihongyu3503319/p/1357729.html
Copyright © 2011-2022 走看看