主页 / 问题 / 860421
Accepted
De.Minov
Asked:2020-07-26 14:54:10 +0000 UTC2020-07-26 14:54:10 +0000 UTC

更改调整大小角的位置

  • 772

该物业有一个街区resize: both。

块示例

那么，如何改变这个角的位置（你需要它在右上角）？

谷歌搜索，我只发现它的位置可以更改为左下角，使用direction: rtl;.

html

4 个回答

  1. Best Answer

    或者，使用 jQuery UI：

    $( "#resizable" ).resizable();
    @import url(https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css);

.ui-widget-content {
  padding: 1rem;
  background: #333 !important;
  color:#fff !important;
}
.ui-icon, 
.ui-widget-content .ui-icon {
  top: .5rem;
  
  top: 5px;
  right: 5px !important;
  
  background-image: url(https://iconmonstr.com/wp-content/g/gd/makefg.php?i=../assets/preview/2012/png/iconmonstr-resize-11.png&r=255&g=255&b=255) !important;
  
  background-position: 0px 0px !important;
  background-size: cover;
}
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
<div id="resizable" class="ui-widget-content">
  <h2>Resize Content</h2>
  
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, error.
  </p>
</div>

    • 9

  2. 我曾经做过类似的事情，它可能会派上用场。

       var prevDrag = document.getElementById("prev-drag");
var grab = document.getElementById("grab");

if ( grab != undefined ) {
grab.addEventListener("mousedown", function (evt) {
    evt.preventDefault();
    var Xc = evt.pageX;
    var Yc = evt.pageY;
    var oW = prevDrag.offsetWidth;
    var oH = prevDrag.offsetHeight;
    var self = evt;
    document.body.onmousemove = function (event) { 
        prevDrag.style.width = ( oW + ( event.pageX - Xc)) + "px";
        prevDrag.style.height = (oH - ( event.pageY - Yc)) + "px";
    }
    document.body.addEventListener("mouseup", function (event) {
         document.body.onmousemove = function () {};
    })
})
}
    .prew-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 300px;
  margin: 0 auto;;
} 

.prev-drag {
    width: 60px;
    height: 60px;
    display: block;
    background-color: red;
    transition: .1s all;
    box-sizing: border-box;
    position: relative;
    border: 1px solid #fff;
}

#grab {
    position: absolute;
    right: -5px;
    top: -5px;
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 5px 5px #fffffff0;
    background-color: #ff3030;
    background-origin: border-box;
    cursor: pointer;
}
    <div class="prew-container">
		<div class="prev-drag" id="prev-drag" style="width: 100px; height: 100px;">
			<div id="grab"></div>
		</div>
</div>

    • 2

  3. 可以垂直翻转两次

    #wrap {
    border: 2px solid red;
    width: 100px;
    height: 100px;
    resize: both;
    overflow: auto;
    transform: scale(1, -1);
}

#content {
    transform: scale(1, -1);
    height: 100%;
}
    <div id="wrap">
    <div id="content">
        123
    </div>
</div>

    • 1

  4. 然后它简化了一切。可以是这样。

    .block {
  width: 200px;
  height: 100px;
  background: background;
  resize: both;
  overflow: auto;
  transform: scale(1, -1);
}
    <div class="block"></div>

    有了textarea，字体必须以某种方式扭曲。也许你可以以某种方式更漂亮，但你已经需要拉 JS

    • 0

相关问题