zoukankan      html  css  js  c++  java
  • JS拖动效果图

    <html>  
    <head><title>拖动效果函数演示 by Longbill.cn</title>  
    <style>  
    body   
    {  
        font-size:12px;  
        color:#333333;  
        border : 0px solid blue;  
    }  
    div  
    {  
        position : absolute;  
        background-color : #c3d9ff;  
        margin : 0px;  
        padding : 5px;  
        border : 0px;  
        width : 100px;  
        height:100px;  
    }  
    </style>  
    </head>  
    <body>  
    <script>  
    function drag(o,s)  
    {  
        if (typeof o == "string") o = document.getElementById(o);  
        o.orig_x = parseInt(o.style.left) - document.body.scrollLeft;  
        o.orig_y = parseInt(o.style.top) - document.body.scrollTop;  
        o.orig_index = o.style.zIndex;  
              
        o.onmousedown = function(a)  
        {  
            this.style.cursor = "move";  
            this.style.zIndex = 10000;  
            var d=document;  
            if(!a)a=window.event;  
            var x = a.clientX+d.body.scrollLeft-o.offsetLeft;  
            var y = a.clientY+d.body.scrollTop-o.offsetTop;  
            //author: www.longbill.cn  
            d.ondragstart = "return false;"  
            d.onselectstart = "return false;"  
            d.onselect = "document.selection.empty();"  
                      
            if(o.setCapture)  
                o.setCapture();  
            else if(window.captureEvents)  
                window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);  

            d.onmousemove = function(a)  
            {  
                if(!a)a=window.event;  
                o.style.left = a.clientX+document.body.scrollLeft-x;  
                o.style.top = a.clientY+document.body.scrollTop-y;  
                o.orig_x = parseInt(o.style.left) - document.body.scrollLeft;  
                o.orig_y = parseInt(o.style.top) - document.body.scrollTop;  
            }  

            d.onmouseup = function()  
            {  
                if(o.releaseCapture)  
                    o.releaseCapture();  
                else if(window.captureEvents)  
                    window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);  
                d.onmousemove = null;  
                d.onmouseup = null;  
                d.ondragstart = null;  
                d.onselectstart = null;  
                d.onselect = null;  
                o.style.cursor = "normal";  
                o.style.zIndex = o.orig_index;  
            }  
        }  
          
        if (s)  
        {  
            var orig_scroll = window.onscroll?window.onscroll:function (){};  
            window.onscroll = function ()  
            {  
                orig_scroll();  
                o.style.left = o.orig_x + document.body.scrollLeft;  
                o.style.top = o.orig_y + document.body.scrollTop;  
            }  
        }  
    }  
    </script>  

    <div id="div1" style="left:10px;top:10px;">div1:我可以被拖动</div>  
    <div id="div2" style="left:120px;top:10px;background-color : #f3d9ff">div2:来拖我呀</div>  
    <div id="div3" style="left:230px;top:10px;background-color : #c3ffff">div3:我随便你拖</div>  
    <div id="div4" style="left:10px;top:120px;background-color : #c3d944">div4:我可以随窗口滑动,把我拖到最下面,然后滚动网页看看</div>  
    <div id="div5" style="left:120px;top:120px;background-color : #f3d944">作者: Longbill
    <a href=http://www.longbill.cn target=_blank>www.longbill.cn</a>  
    </div>  
    <div id="div6" style="left:230px;top:120px;background-color : #e3f944;200px;">参数说明:
     
    drag(obj [,scroll]);
     
    obj:对象的id或对象本身;
     
    scroll(可选):对象是否随窗口拖动而滑动,默认为否
     
    鼠标右键查看源代码  
    </div>  


    <script>  
    drag("div1");  
    drag("div2");  
    drag("div3");  
    drag("div4",1);  
    drag("div5",1);  
    drag("div6",1);  


    </script>  

    </body>
  • 相关阅读:
    Azkaban的使用
    Azkaban安装
    Kafka 启动失败,报错Corrupt index found以及org.apache.kafka.common.protocol.types.SchemaException: Error reading field 'version': java.nio.BufferUnderflowException
    Kafka 消费者设置分区策略及原理
    Kafka利用Java API自定义生产者,消费者,拦截器,分区器等组件
    zookeeper群起总是有那么几个节点起不来的问题解决
    flume 启动agent报No appenders could be found for logger的解决
    Flume 的监控方式
    Flume 自定义 组件
    Source r1 has been removed due to an error during configuration java.lang.IllegalArgumentException: Required parameter bind must exist and may not be null & 端口无法连接
  • 原文地址:https://www.cnblogs.com/tomin/p/1352467.html
Copyright © 2011-2022 走看看