jquery字体旋转 jquery 转字符串

jquery 如何让div360度旋转

!DOCTYPE HTML

html

head

meta charset=UTF-8

titleYuGiOh/title

style type="text/css"

#div {

position: absolute;

top: 50px;

left: 300px;

width: 300px;

height: 300px;

line-height: 300px;

text-align: center;

border: 1px solid black;

}

/style

script type="text/javascript" src="jquery-1.8.0.min.js"/script

script type="text/javascript"

var rotateHTML5 = function (limit)

    {

    var reg = /(rotate\([\-\+]?((\d+)(deg))\))/i;

    var wt = div.style['-webkit-transform'], wts = wt.match (reg);

    var $2 = RegExp.$2;

    console.log ($2);

    div.style['-webkit-transform'] = wt.replace ($2, parseFloat (RegExp.$3) + limit + RegExp.$4);

    }

    

    var rotateIE = function (obj)

    {

    var d = !!obj.d ? obj.d : 1;

    var r = d * Math.PI / 180;

    costheta = Math.cos (r);

    sintheta = Math.sin (r);

    obj.style.filter = "progid:DXImageTransform.Microsoft.Matrix()";

    var item = obj.filters.item (0);

    var width = obj.clientWidth;

    var height = obj.clientHeight;

    item.DX = -width / 2 * costheta + height / 2 * sintheta + width / 2;

    item.DY = -width / 2 * sintheta - height / 2 * costheta + height / 2;

    item.M11 = costheta;

    item.M12 = -sintheta;

    item.M21 = sintheta;

    item.M22 = costheta;

    obj.timer = setTimeout (function ()

    {

    var dx = d + 1;

    dx = dx  360 ? 1 : dx;

    obj.d = dx;

    rotate (obj, dx);

    }, 30);

    };

    

    var start = function ()

    {

    if (!!div.interval)

    {

    clearInterval (div.interval);

    delete div.interval;

    }

    else

    {

    div.interval = setInterval (function ()

    {

    /.*webkit.*/i.test (navigator.userAgent) ? rotateHTML5 (1) : rotateIE (div);

    }, 30);

    }

    }

/script

/head

body

button onclick="start();"rotate/button

div id="div" style="border-radius: 90px; -webkit-transform: rotate(10deg);"ROTATE/div

/body

/html

相关问答

Q1: jQuery实现箭头旋转怎么做的？

用css吧，CSS就行的，例如：

顺时针旋转90度：

-moz-transform:rotate(90deg);

-webkit-transform:rotate(90deg);

-o-transform:rotate(90deg);

transform:rotate(90deg);

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

其它度数请自行修改下，可以用在LOGO之类的Hover效果，360度的话，参考下：

p

img{

-moz-transition:

all

0.8s

ease-in-out;

-webkit-transition:

all

0.8s

ease-in-out;

-o-transition:

all

0.8s

ease-in-out;

-ms-transition:

all

0.8s

ease-in-out;

transition:

all

0.8s

ease-in-out;

}

p

img:hover{

-moz-transform:

rotate(360deg);

-webkit-transform:

rotate(360deg);

-o-transform:

rotate(360deg);

-ms-transform:

rotate(360deg);

transform:

rotate(360deg);

}

/*绕Z轴的*/

img{

-webkit-transition:

0.4s;

-webkit-transition:

-webkit-transform

0.4s

ease-out;

transition:

transform

0.4s

ease-out;

-moz-transition:

-moz-transform

0.4s

ease-out;

}

img:hover{

transform:

rotateZ(360deg);

-webkit-transform:

rotateZ(360deg);

-moz-transform:

rotateZ(360deg);

}

Q2: 图片浏览插件，支持缩放和旋转的jQuery插件，有大神知道吗，多提供几个，谢谢！

浏览的话，lightbox，colorbox

缩放和旋转的话，rapheal，rotate.js

目前没找到同时支持浏览，缩放，旋转的插件，需要自己结合这些东西实现

Q3: 用JQuery实现图片旋转。就像QQ音乐播放音乐是那个图片一样

- 鼠标经过图片图片翻转显示图片背后的文字(对于其中引用的jquery文件、图片,需要用自己的)

Q4: 我想用jquery实现一个图片旋转，写了下面的简单代码，哪里不对啊？

你没有引入jq插件。

jq本身没有rotate方法，，你要引入jquery.rotate.min.js

Q5: jquery div旋转问题

rotate这只是一个对jquery扩充的插件而已，你没有那个插件你写这个参数是无效的。你可以去下载rotate这个插件，要不你就用css3写如下：

$('#test').animate({  borderSpacing: -90 }, {    step: function(now,fx) {

     $(this).css('-webkit-transform','rotate('+now+'deg)');      

$(this).css('-moz-transform','rotate('+now+'deg)');      

$(this).css('-ms-transform','rotate('+now+'deg)');

     $(this).css('-o-transform','rotate('+now+'deg)');      

$(this).css('transform','rotate('+now+'deg)');      },

   duration:'slow' },'linear');

jquery字体旋转的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于jquery 转字符串、jquery字体旋转的信息别忘了在本站进行查找喔。