调整元素大小可以带来更好的用户体验,因为它适合他们的屏幕。
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;