本文實(shí)例講述了jQuery旋轉(zhuǎn)插件jqueryrotate用法。分享給大家供大家參考，具體如下：
創(chuàng)新互聯(lián)公司主營(yíng)龍江網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,成都app軟件開發(fā)公司,龍江h(huán)5微信小程序開發(fā)搭建,龍江網(wǎng)站營(yíng)銷推廣歡迎龍江等地區(qū)企業(yè)咨詢
CSS3
提供了多種變形效果，比如矩陣變形、位移、縮放、旋轉(zhuǎn)和傾斜等等，讓頁面更加生動(dòng)活潑有趣，不再一動(dòng)不動(dòng)。然后
IE10
以下版本的瀏覽器不支持
CSS3
變形，雖然
IE
有私有屬性濾鏡（filter），但不全面，而且效果和性能都不好。
今天介紹一款
jQuery
插件——jqueryrotate，它可以實(shí)現(xiàn)旋轉(zhuǎn)效果。jqueryrotate
支持所有主流瀏覽器，包括
IE6。如果你想在低版本的
IE
中實(shí)現(xiàn)旋轉(zhuǎn)效果，那么
jqueryrotate
是一個(gè)很好的選擇。
兼容性
jqueryrotate
支持所有主流瀏覽器，包括
IE6。jqueryrotate
在高級(jí)瀏覽器中使用
CSS3
transform
屬性實(shí)現(xiàn)，在低版本
IE
中使用
VML
實(shí)現(xiàn)。當(dāng)然，你可以使用
IE
條件注釋，低版本
IE
使用
jqueryrotate，高級(jí)瀏覽器則直接使用
CSS3。
使用方法
//演示1
//旋轉(zhuǎn)45angle
$(document.body).click(function
()
{
//方式1
$('.divOne').rotate(45);
//方式2
$('.divOne').rotate({
angle:
45
});
});
//演示2
//鼠標(biāo)移動(dòng)效果
//方式1
$('.divOne').rotate({
bind:
{
mouseover:
function
()
{
$(this).rotate({
animateTo:
180
});
},
mouseout:
function
()
{
$(this).rotate({
animateTo:
});
}
}
});
//方式2
$('.divOne').mouseover(function
()
{
$(this).rotate({
animateTo:
180
});
}).mouseout(function
()
{
$(this).rotate({animateTo:0});
});
//演示3
不停旋轉(zhuǎn)
//方式1
var
angle
=
0;
setInterval(function
()
{
angle
+=
3;
$('.divOne').rotate(angle);
},
50);
//方式2
var
rotation
=
function
()
{
$('.divOne').rotate({
angle:
0,
animateTo:
360,
callback:rotation
})
}
rotation();
//方式3
var
rotation
=
function
()
{
$('.divOne').rotate({
angle:
0,
animateTo:
360,
callback:
rotation,
easing:
function
(x,
t,
b,
c,
d)
{
return
c
*
(t
/
d)
+
b;
}
})
}
rotation();
//演示4
點(diǎn)擊旋轉(zhuǎn)
//方式1
$('.divOne').click(function
()
{
$(this).rotate({
angle:
0,
animateTo:
180,
easing:
$.easing.easeInOutExpo
});
});
var
val
=
0;
$('.divOne').click(function
()
{
val
+=
90;
$(this).rotate({
animateTo:
val
});
});
參數(shù)
參數(shù)
類型
說明
默認(rèn)值
angle
數(shù)字
旋轉(zhuǎn)一個(gè)角度
animateTo
數(shù)字
從當(dāng)前的角度旋轉(zhuǎn)到多少度
step
函數(shù)
每個(gè)動(dòng)畫步驟中執(zhí)行的回調(diào)函數(shù)，當(dāng)前角度值作為該函數(shù)的第一個(gè)參數(shù)
無
easing
函數(shù)
自定義旋轉(zhuǎn)速度、旋轉(zhuǎn)效果，需要使用
jQuery.easing.js
無
duration
整數(shù)
旋轉(zhuǎn)持續(xù)時(shí)間，以毫秒為單位
callback
函數(shù)
旋轉(zhuǎn)完成后的回調(diào)函數(shù)
無
getRotateAngle
函數(shù)
返回旋轉(zhuǎn)對(duì)象當(dāng)前的角度
無
stopRotate
函數(shù)
停止旋轉(zhuǎn)
無
演示雖然使用的是圖片，但
jqueryrotate
并不只是能運(yùn)用在圖片上，其他元素如
div
等也可以使用。同時(shí)，你可以發(fā)揮想象，制作出更多關(guān)于旋轉(zhuǎn)的特效。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery窗口操作技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
$("#cao").rotate(i);這里rotate方法是什么？jquery沒有這個(gè)方法吧。
img src="a.png" /
$(function () {
var degrees = 0;
var $elie = $("img");
function rotate() {
++degrees;
if (degrees 360) {
degrees = 0;
}
$elie.css({
'-webkit-transform': 'rotate(' + degrees + 'deg)',
'-moz-transform': 'rotate(' + degrees + 'deg)',
'-ms-transform': 'rotate(' + degrees + 'deg)',
'-o-transform': 'rotate(' + degrees + 'deg)',
'transform': 'rotate(' + degrees + 'deg)'
});
setTimeout(rotate, 50);
}
rotate($elie, 45);
});
你沒有引入jq插件。
jq本身沒有rotate方法，，你要引入jquery.rotate.min.js
用jquery 給圖片添加css樣式，用css樣式來控制旋轉(zhuǎn)：
CSS3 transform 屬性
transform具體的用法去百度吧 ，手冊(cè)里解釋很全面
本文實(shí)例講述了jQuery圖片旋轉(zhuǎn)插件jQueryRotate.js用法。分享給大家供大家參考，具體如下：
推薦一個(gè)圖片旋轉(zhuǎn)插件，用于瀏覽相冊(cè)時(shí)，旋轉(zhuǎn)圖片。
運(yùn)行效果截圖如下：
點(diǎ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代碼，完整實(shí)例代碼點(diǎn)擊此處本站下載。
更多關(guān)于jQuery插件相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
這個(gè)現(xiàn)在可以用css3來完成來；
transform: rotate(90deg) 旋轉(zhuǎn)90度
transform: scale(1.2); 放大1.2倍
重慶分公司
重慶分公司
