调整元素大小 jQuery插件 oyoresizer

  • 源码大小:42.87KB
  • 所需积分:1积分
  • 源码编号:19JP-3602
  • 浏览次数:351次
  • 最后更新:2023年07月01日
  • 所属栏目:其他
本站默认解压密码:19jp.com 或 19jp_com

简介

调整元素大小可以带来更好的用户体验,因为它适合他们的屏幕。

oyoresizer是一个简单、轻量级的jQuery可调整大小的插件,它允许您通过拖动元素的右边框来调整元素的大小

如果你想在你的网站上调整一个元素的大小,这就是适合你的插件。你会注意到“元素”这个词很模糊。这是因为这个插件不限制你只调整DIV、图像、段落或Iframes的大小——任何有设定宽度和高度的东西都会利用我们插件的魔力来调整大小。

如何使用它:

1.加载主脚本oyoresizer.js公司在jQuery库之后。

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/oyoresizer.js"></script>

2.在应该可以调整大小的元素上初始化插件。

<div id="example" class="resizable">
   I'm resizable
</div>
$(function(){
  var instance = new oyoresizer(".resizable");
});

3.设置可调整大小的元素的最小/最大宽度。

// oyoresizer(selectors, minX, maxX);
var resizables = new oyoresizer(".resizable", 160, 400);

4.该插件还支持JavaScript动态生成的元素。

<iframe id="frame-demo"></iframe>
$("#frame-demo").attr("src", "https://www.youtube.com/embed/r_W49tWhVys");
var instance2 = new oyoresizer("#frame-demo");
instance2.setSize(200, 600);

5.以像素为单位设置调整大小的边距。

instance.resizeMargin = 25;

预览截图