类似 jQuery 的 .ressized 但里面没有 div

发布于 2024-08-30 16:47:21 字数 484 浏览 10 评论 0原文

这只是一个快速探索，看看这在技术上是否可行。

我想在浏览器中启用图像大小调整（也在 contentEditable 区域内）。 Firefox 和 IE 已经允许使用它们的内置句柄来完成此操作，并且效果很好。我想为 Safari 实现一些功能，因为它本身不支持此功能。

我尝试过 jQuery 的可调整大小方法，它做得非常好，但是它依赖于插入一堆 div 和图像并将其包装在一个大 div 中。如果我们不关心在 contentEditable 区域中生成的代码，这通常没问题，但我们会关心它，因为它将被保存回服务器。我可以在保存时删除这些额外的内容，但我在想，技术上是否可以为不依赖添加额外 div 的图像创建调整大小脚本？即使我们决定暂时不使用手柄，而只专注于检测用户何时接近图像边缘，将鼠标光标更改为可调整大小的光标，并检测图像边缘周围 5 像素内的单击和拖动图片，这可能吗？

如果可能的话，我假设（希望）也许它已经完成了，但到目前为止我的搜索还没有发现任何结果。

渴望听到任何想法:)

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

累赘 2024-09-06 16:47:21

这也许是某事的开始。它只是用 javascript 编写的，但您可以轻松地将其移植到 jQuery 中。

请注意：

onmousedown 和 onmouseup 通常位于图像而不是文档上，但由于我没有任何类型的句柄，你最终只需拖动图像本身（无论如何在 Safari 中）。

所以现在的情况是，您需要单击图像外部才能调整其大小。

img {
    width: 400px;
    height: auto;
    position: relative;
}

var positionX;
var startWidth;
var image = document.getElementById('image');
document.onmousedown = function(e) {
    if(!e) e = window.event;
    positionX = (e.clientX);
    startWidth = image.width;
    document.onmousemove = function(e) {
        if(!e) e = window.event;
        image.style.width = (startWidth + (e.clientX - positionX)) + 'px';
    }
}
document.onmouseup = function() {
    document.onmousemove = null;
    positionX = null;
    startWidth = null;
}


<img id="image" src="http://mydomain.com/myimage.jpg" />

Here's the start of something perhaps. It is just in javascript, but you could easily bring it over to jQuery.

PLEASE NOTE:

The onmousedown and onmouseup would normally be on the image instead of the document, but since I don't have any kind of handle, you just end up dragging the image itself (in Safari anyway).

So the way it is right now, you need to click OUTSIDE the image in order to resize it.

img {
    width: 400px;
    height: auto;
    position: relative;
}

var positionX;
var startWidth;
var image = document.getElementById('image');
document.onmousedown = function(e) {
    if(!e) e = window.event;
    positionX = (e.clientX);
    startWidth = image.width;
    document.onmousemove = function(e) {
        if(!e) e = window.event;
        image.style.width = (startWidth + (e.clientX - positionX)) + 'px';
    }
}
document.onmouseup = function() {
    document.onmousemove = null;
    positionX = null;
    startWidth = null;
}


<img id="image" src="http://mydomain.com/myimage.jpg" />

回复收藏 0 原文

~没有更多了~