jquery實現(xiàn)每點擊一次旋轉(zhuǎn)90度

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

為棲霞等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及棲霞網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計、棲霞網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

titleJS 旋轉(zhuǎn)函數(shù)，兼容各個瀏覽器/title

script id="jscode"

function hy_rotate(obj, rotate){

if(obj){

function rotate_set_style(obj, key, value){

obj.style[key] = value;

}

function rotate_float(n, b){

b = isNaN(parseInt(b)) ? -1 : parseInt(b);

return isNaN(parseFloat(n)) ? 0 : (b == 0) ? parseInt(parseFloat(n)) : (b 0) ? parseFloat(parseFloat(n).toString().replace((new RegExp('^(\\d+)\\.(\\d{'+b+'})\\d*$')), '$1.$2')) : parseFloat(n);

}

rotate = rotate % 360;

if(rotate 0){

rotate = 360 + rotate

}

rotate = rotate_float(rotate, 2);

var rpi = rotate * Math.PI / 180, c = Math.cos(rpi), s = Math.sin(rpi), oh = obj.offsetHeight, ow = obj.offsetWidth, pw = rotate_float((oh * Math.abs(s) + ow * Math.abs(c)), 2), ph = rotate_float((oh * Math.abs(c) + ow * Math.abs(s)), 2), tw = (rotate % 180 == 0) ? 0 : ((pw - ow) / 2), th = (rotate % 180 == 0) ? 0 : ((ph - oh) / 2), css3 = 'translate(' + tw + 'px, ' + th + 'px) rotate(' + rotate + 'deg)', css3key = '', dbstyle = document.body.style, css3keys = ['transform', '-moz-transform', '-webkit-transform', '-o-transform', '-ms-transform'];

for(var i in css3keys){

if(css3keys[i] in dbstyle){

css3key = css3keys[i];

}

}

if(css3key == ''){

rotate_set_style(obj, 'filter', 'progid:DXImageTransform.Microsoft.Matrix(M11=' + c + ', M12=' + (-s) + ', M21=' + s + ', M22=' + c + ', sizingMethod=\'auto expand\')');

}else{

obj.parentNode.style.width = pw + 'px';

obj.parentNode.style.height = ph + 'px';

rotate_set_style(obj, css3key, css3);

}

}

}

/script

style

.list{clear:both; padding:20px;}

.block{background:#FF99FF; padding:5px; float:left;}

.rotate{background:#FF0000; width:200px; padding:5px;}

.txt{background:#3366FF; padding:10px; color:#FFFFFF; font-size:12px; margin-bottom:10px;}

.code{border:#3333FF dotted 1px; padding:10px; background:#FFCCFF; clear:both;}

/style

/head

body

divJS 旋轉(zhuǎn)函數(shù)，兼容各個瀏覽器/div

div class="list"

div class="block"

div

div class="rotate" id="rotate"

div class="txt"

我的角度是 span id="rotate_num"/span°

/div

img src="" /

/div

/div

/div

/div

script

function $id(id){

return document.getElementById(id);

}

var rrr = 0;

var sss = 0;

var iii = 0;

var aaa = $id('rotate');

var bbb = $id('rotate_num');

function zzz(){

rrr = rrr+1;

bbb.innerHTML = rrr;

hy_rotate(aaa, rrr);

}

aaa.onclick = function(){

if(sss == 0){

iii = setInterval(zzz, 20);;

sss = 1;

}else{

clearInterval(iii);

sss = 0;

}

}

/script

/body

/html

jquery 讓圖片旋轉(zhuǎn)30度怎么寫啊

用jquery 給圖片添加css樣式，用css樣式來控制旋轉(zhuǎn)：

CSS3 transform 屬性

transform具體的用法去百度吧 ，手冊里解釋很全面

jquery 如何讓div360度旋轉(zhuǎn)

!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

jQuery實現(xiàn)箭頭旋轉(zhuǎn)怎么做的？

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

順時針旋轉(zhuǎn)90度：

-moz-transform:rotate(90deg);

-webkit-transform:rotate(90deg);

-o-transform:rotate(90deg);

transform:rotate(90deg);

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

其它度數(shù)請自行修改下，可以用在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);

}

jQuery圖片旋轉(zhuǎn)插件jQueryRotate.js用法實例(附demo下載)

本文實例講述了jQuery圖片旋轉(zhuǎn)插件jQueryRotate.js用法。分享給大家供大家參考，具體如下：

推薦一個圖片旋轉(zhuǎn)插件，用于瀏覽相冊時，旋轉(zhuǎn)圖片。

運行效果截圖如下：

點擊此處查看在線演示效果。

具體代碼如下：

script

type="text/javascript"

$(document).ready(function

()

{

$("#images").rotate(45);

var

value

=

$("#images1").rotate({

bind:

{

mouseover:

function(){

value

+=90;

$(this).rotate({

animateTo:value})

}

}

});

$('#button').click(function(){

$("#images1").rotate({animateTo:parseInt($('#angel').val())});

});

function

rotation

(){

$("#images2").rotate({

angle:0,

animateTo:360,

callback:

rotation,

easing:

function

(x,t,b,c,d){

return

c*(t/d)+b;

}

});

}

rotation();

});

/script

上面只是js代碼，完整實例代碼點擊此處本站下載。

更多關(guān)于jQuery插件相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。