在jQuery中旋转Div元素

2020/11/30 23:42 · jquery ·  · 0评论

尝试旋转div元素...这可能是DOM亵渎,它是否可以与canvas元素一起使用?我不确定-如果有人对它如何工作或为什么不起作用有任何想法,我很想知道。谢谢。

要旋转DIV,请使用WebkitTransform / -moz-transform: rotate(Xdeg)

这在IE中不起作用。Raphael库可以与IE一起使用,并且可以旋转我相信它使用canvases

如果要为旋转设置动画,则可以使用递归 setTimeout()

您甚至可以使用jQuery进行部分旋转 .animate()

确保您考虑了元素的宽度。如果旋转的宽度大于其可见内容的宽度,则会得到有趣的结果但是,您可以缩小元素的宽度,然后旋转它们

这是一个简单的jQuery代码片段,可旋转jQuery对象中的元素。旋转可以启动和停止:

$(function() {
    var $elie = $(selectorForElementsToRotate);
    rotate(0);
    function rotate(degree) {

          // For webkit browsers: e.g. Chrome
        $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
          // For Mozilla browser: e.g. Firefox
        $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});

          // Animate rotation with a recursive call
        setTimeout(function() { rotate(++degree); },5);
    }
});

jsFiddle示例

注意:

获取并增加度数,将顺时针旋转图像。
降低旋转度将使图像
逆时针旋转

是的,我想你不会有太多的运气。我认为,通常在主要浏览器使用的3种绘制方法(画布,SVG,VML)中,文本支持都很差。如果要旋转图像,那一切都很好,但是如果您将内容与格式和样式混合在一起,则可能不会。

请查看RaphaelJS以获取跨浏览器绘图API。

跨浏览器旋转的任何元素。可在IE7和IE8中使用。在IE7中,似乎无法在JSFiddle中工作,但在我的项目中,也可在IE7中工作

http://jsfiddle.net/RgX86/24/

var elementToRotate = $('#rotateMe');
var degreeOfRotation = 33;

var deg = degreeOfRotation;
var deg2radians = Math.PI * 2 / 360;
var rad = deg * deg2radians ;
var costheta = Math.cos(rad);
var sintheta = Math.sin(rad);

var m11 = costheta;
var m12 = -sintheta;
var m21 = sintheta;
var m22 = costheta;
var matrixValues = 'M11=' + m11 + ', M12='+ m12 +', M21='+ m21 +', M22='+ m22;

elementToRotate.css('-webkit-transform','rotate('+deg+'deg)')
    .css('-moz-transform','rotate('+deg+'deg)')
    .css('-ms-transform','rotate('+deg+'deg)')
    .css('transform','rotate('+deg+'deg)')
    .css('filter', 'progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\','+matrixValues+')')
    .css('-ms-filter', 'progid:DXImageTransform.Microsoft.Matrix(SizingMethod=\'auto expand\','+matrixValues+')');

Edit 13/09/13 15:00包装在一个漂亮,简单,可链接的jquery插件中。

使用例

$.fn.rotateElement = function(angle) {
    var elementToRotate = this,
        deg = angle,
        deg2radians = Math.PI * 2 / 360,
        rad = deg * deg2radians ,
        costheta = Math.cos(rad),
        sintheta = Math.sin(rad),

        m11 = costheta,
        m12 = -sintheta,
        m21 = sintheta,
        m22 = costheta,
        matrixValues = 'M11=' + m11 + ', M12='+ m12 +', M21='+ m21 +', M22='+ m22;

    elementToRotate.css('-webkit-transform','rotate('+deg+'deg)')
        .css('-moz-transform','rotate('+deg+'deg)')
        .css('-ms-transform','rotate('+deg+'deg)')
        .css('transform','rotate('+deg+'deg)')
        .css('filter', 'progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\','+matrixValues+')')
        .css('-ms-filter', 'progid:DXImageTransform.Microsoft.Matrix(SizingMethod=\'auto expand\','+matrixValues+')');
    return elementToRotate;
}

$element.rotateElement(15);

JSFiddle:http : //jsfiddle.net/RgX86/175/

这是两个有助于解决问题的jQuery补丁(在您阅读本文时,它们可能已经包含在jQuery中):

我怀疑您可以使用DOM / CSS旋转元素。最好的选择是渲染到画布上并将其旋转(不确定具体细节)。

编辑:为jQuery 1.8更新

jQuery 1.8将添加浏览器特定的转换。jsFiddle演示

var rotation = 0;

jQuery.fn.rotate = function(degrees) {
    $(this).css({'transform' : 'rotate('+ degrees +'deg)'});
    return $(this);
};

$('.rotate').click(function() {
    rotation += 5;
    $(this).rotate(rotation);
});

编辑:添加了使其成为jQuery函数的代码。

对于那些不想进一步阅读的人,请继续。有关更多详细信息和示例,请继续阅读。jsFiddle演示

var rotation = 0;

jQuery.fn.rotate = function(degrees) {
    $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
                 '-moz-transform' : 'rotate('+ degrees +'deg)',
                 '-ms-transform' : 'rotate('+ degrees +'deg)',
                 'transform' : 'rotate('+ degrees +'deg)'});
    return $(this);
};

$('.rotate').click(function() {
    rotation += 5;
    $(this).rotate(rotation);
});

编辑:这篇文章的评论之一提到jQuery MultirotationjQuery的这个插件本质上执行了上述功能,并支持IE8。如果您想要最大的兼容性或更多选择,可能值得使用。但是为了最小的开销,我建议使用上述功能。它可以在IE9 +,Chrome,Firefox,Opera等众多平台上运行。


Bobby ...这是供那些实际上想要在javascript中做到的人使用的。这可能是在javascript回调上旋转所需的。

这是一个jsFiddle

如果您想按自定义间隔旋转,则可以使用jQuery手动设置css而不是添加类。这样我在答案的底部都包含了两个jQuery选项。

的HTML

<div class="rotate">
    <h1>Rotatey text</h1>
</div>

的CSS

/* Totally for style */
.rotate {
    background: #F02311;
    color: #FFF;
    width: 200px;
    height: 200px;
    text-align: center;
    font: normal 1em Arial;
    position: relative;
    top: 50px;
    left: 50px;
}

/* The real code */
.rotated {
    -webkit-transform: rotate(45deg);  /* Chrome, Safari 3.1+ */
    -moz-transform: rotate(45deg);  /* Firefox 3.5-15 */
    -ms-transform: rotate(45deg);  /* IE 9 */
    -o-transform: rotate(45deg);  /* Opera 10.50-12.00 */
    transform: rotate(45deg);  /* Firefox 16+, IE 10+, Opera 12.10+ */
}

jQuery的

确保将它们包装在$ {document).ready中

$('.rotate').click(function() {
    $(this).toggleClass('rotated');
});

自定义间隔

var rotation = 0;
$('.rotate').click(function() {
    rotation += 5;
    $(this).css({'-webkit-transform' : 'rotate('+ rotation +'deg)',
                 '-moz-transform' : 'rotate('+ rotation +'deg)',
                 '-ms-transform' : 'rotate('+ rotation +'deg)',
                 'transform' : 'rotate('+ rotation +'deg)'});
});

我整理了一个动画旋转代码程序..您可以在这里获取代码...(如果不晚的话)

http://99mission.why3s.tw/rotatetest.html

本文地址:http://jquery.askforanswer.com/zaijqueryzhongxuanzhuandivyuansu.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!