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>

  • 相关阅读:
    计算机网络知识总结-网络安全
    域名恶意指向的解决方法
    域名恶意解析的原因是什么
    域名被人恶意解析的解决方法
    防止域名被恶意解析
    公安部网防G01-网站安全卫士软件/linux防御
    详解web容器
    关于 服务器ip和域名进行一个绑定
    重新温习软件设计之路(2)
    重新温习软件设计之路(1)
  • 原文地址:https://www.cnblogs.com/cuihongyu3503319/p/1357729.html
Copyright © 2011-2022 走看看