我希望旋转图片,使其像tympanus's swatchbook一样工作 但我宁愿不使用和CSS 3一样,因为之前的链接需要 我宁愿在js上进行所有旋转,每个实例使用JQueryRotate,除了旋转点之外,它是以te图像为中心的。
我不想指出一个能够完成它的库,我想学习一个很好的图像旋转方法,特别是如何在该方法中改变旋转点,这样我才能实现swatchbook我想要的效果。
但是如果你知道一个能够做到这一点的图书馆,我也非常喜欢它。
感谢
修改
在写这个问题时我意识到了什么。我可以放大那个图像的持有者。 althoug不是很亮也不优雅,或者非常好,它是一个开始。我将检查x3ro:Image 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});
});
答案 0 :(得分:3)
如果您想自己进行轮换,请查看以下问题:Image rotation algorithm。当然,它不是JavaScript特定的解释,但它应该或多或少地易于转换为基于画布的解决方案。我没有看过jQueryRotate实现,但它可能也值得研究。
也就是说,可能没有关于“如何使用左下角的枢轴点旋转图像”的JavaScript特定教程:D
正如@Jasper所指出的那样,知道尽管在IE9之前的IE版本中不支持canvas
本身可能会很好,但是有一些方法和手段可以获得canvas API的一大部分内容。即使在早期版本中,正如ExplorerCanvas所示。