1

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

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

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

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

渴望听到任何想法:)

4

1 回答 1

1

这也许是一些事情的开始。它只是在 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" />
于 2010-04-23T12:33:43.133 回答