在不使用CSS3的情况下围绕左下边缘枢轴旋转图像

时间:2012-11-01 14:41:02

标签: javascript jquery rotation

我希望旋转图片,使其像tympanus's swatchbook一样工作 但我宁愿不使用和CSS 3一样,因为之前的链接需要 我宁愿在js上进行所有旋转,每个实例使用JQueryRotate,除了旋转点之外,它是以te图像为中心的。

我不想指出一个能够完成它的库,我想学习一个很好的图像旋转方法,特别是如何在该方法中改变旋转点,这样我才能实现swatchbook我想要的效果。

但是如果你知道一个能够做到这一点的图书馆,我也非常喜欢它。

感谢

修改

在写这个问题时我意识到了什么。我可以放大那个图像的持有者。 althoug不是很亮也不优雅,或者非常好,它是一个开始。我将检查x3roImage rotation algorithm

所做的消化

html片段:

<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
<div id="dvImg" style="position:relative;border: 1px solid black;">
    <img src="https://www.google.com/images/srpr/logo3w.png" id="image" style="position:absolute;top:0;left:12px;margin:auto;border: 1px solid black;">
<div>

js片段:

$("#dvImg").width($("#image").width()*2);
$("#dvImg").height($("#image").height()*2);
$("#image").css({ left: $("#image").width() + "px", top: $("#image").height()});

$("#image").mouseover(function() {
    $("#dvImg").rotate({animateTo:90});
});

1 个答案:

答案 0 :(得分:3)

如果您想自己进行轮换,请查看以下问题:Image rotation algorithm。当然,它不是JavaScript特定的解释,但它应该或多或少地易于转换为基于画布的解决方案。我没有看过jQueryRotate实现,但它可能也值得研究。

也就是说,可能没有关于“如何使用左下角的枢轴点旋转图像”的JavaScript特定教程:D


正如@Jasper所指出的那样,知道尽管在IE9之前的IE版本中不支持canvas本身可能会很好,但是有一些方法和手段可以获得canvas API的一大部分内容。即使在早期版本中,正如ExplorerCanvas所示。