javascript调整鼠标 [英] javascript resize with mouse

问题描述

我想让我的用户用鼠标调整四角或四边的div。

我只想用Javascript，不用JQ图书馆请... ...

在右下角的一个小小的调整图像将是一个加号！

谢谢

解决方案

使用CSS3 resize：both; http://dhtmlexamples.com/ 2011/01/20 / create-a-user-resizable-div-tag-using-css3 /

  < style type =text / css> 
 .isResizable {
 background：rgba（255，0，0，0.2）; 
 font-size：2em; 
 border：1px纯黑色; 
 overflow：hidden; 
 resize：both; 
 width：160px; 
 height：120px; 
 min-width：120px; 
 min-height：90px; 
 max-width：400px; 
最大高度：300px; 
} 
< / style> 
 
< div class =isResizable>快速的棕色狐狸跳过懒狗。< / div> 
  

I'd like to let my users resize a div from the 4 corners or the 4 sides with the mouse.

I whish to use just Javascript, no JQ library please...

A tiny little resize image in the right bottom corner would be a plus!

Thanks

解决方案

Use CSS3 resize: both;, as seen here: http://dhtmlexamples.com/2011/01/20/creating-a-user-resizable-div-tag-using-css3/

<style type="text/css">
    .isResizable {
        background: rgba(255, 0, 0, 0.2);
        font-size: 2em;
        border: 1px solid black;
        overflow: hidden;
        resize: both;
        width: 160px;
        height: 120px;
        min-width: 120px;
        min-height: 90px;
        max-width: 400px;
        max-height: 300px;
    }
</style>

<div class="isResizable">The quick brown fox jumps over the lazy dog.</div>

这篇关于javascript调整鼠标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！