zoukankan      html  css  js  c++  java
  • 妙味——拖拽改变大小

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
    #div1{width: 10px;height: 10px;background: red;position: absolute;bottom: 0;right: 0;}
    #div2{width: 200px;height: 150px;background: #eee;position: relative;}
    </style>
    <script>
    window.onload=function(){
        var oDiv=document.getElementById('div1');
        var oDiv2=document.getElementById('div2');
    
        oDiv.onmousedown=function(ev)
        {
            var oEvent=ev||event;
            var disX=oEvent.clientX-oDiv.offsetLeft;
            var disY=oEvent.clientY-oDiv.offsetTop;
    
            document.onmousemove=function(ev)
            {
                var oEvent=ev||event;
    
                oDiv2.style.width=oEvent.clientX-disX+oDiv.offsetWidth+'px';
                oDiv2.style.height=oEvent.clientY-disY+oDiv.offsetHeight+'px';
            };
    
            document.onmouseup=function()
            {
                document.onmousemove=null;
                document.onmouseup=null;
            };
    
        };
    };
    </script>
    </head>
    <body>
    <div id="div2">
        <div id="div1"></div>
    </div>
    </body>
    </html>
    高否?富否?帅否? 否? 滚去学习!
  • 相关阅读:
    Droppable(放置)组件
    Draggable(拖动)组件
    1.引入必要的文件 2.加载 UI 组件的方式 4.Parser 解析器
    mvc自带的异步表单提交
    MVC,jquery异步
    Container With Most Water
    Palindrome Number
    String to Integer (atoi)
    Merge k Sorted Lists
    Longest Valid Parentheses
  • 原文地址:https://www.cnblogs.com/baixc/p/3502883.html
Copyright © 2011-2022 走看看