用jquery 給圖片添加css樣式，用css樣式來控制旋轉(zhuǎn)：
創(chuàng)新互聯(lián)是一家專業(yè)提供江寧企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計、成都網(wǎng)站制作、H5高端網(wǎng)站建設(shè)、小程序制作等業(yè)務。10年已為江寧眾多企業(yè)、政府機構(gòu)等服務。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進行中。
CSS3 transform 屬性
transform具體的用法去百度吧 ，手冊里解釋很全面
這個現(xiàn)在可以用css3來完成來；
transform: rotate(90deg) 旋轉(zhuǎn)90度
transform: scale(1.2); 放大1.2倍
本文實例講述了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è)計有所幫助。
本文實例講述了jQuery旋轉(zhuǎn)插件jqueryrotate用法。分享給大家供大家參考，具體如下：
CSS3
提供了多種變形效果，比如矩陣變形、位移、縮放、旋轉(zhuǎn)和傾斜等等，讓頁面更加生動活潑有趣，不再一動不動。然后
IE10
以下版本的瀏覽器不支持
CSS3
變形，雖然
IE
有私有屬性濾鏡（filter），但不全面，而且效果和性能都不好。
今天介紹一款
jQuery
插件——jqueryrotate，它可以實現(xiàn)旋轉(zhuǎn)效果。jqueryrotate
支持所有主流瀏覽器，包括
IE6。如果你想在低版本的
IE
中實現(xiàn)旋轉(zhuǎn)效果，那么
jqueryrotate
是一個很好的選擇。
兼容性
jqueryrotate
支持所有主流瀏覽器，包括
IE6。jqueryrotate
在高級瀏覽器中使用
CSS3
transform
屬性實現(xiàn)，在低版本
IE
中使用
VML
實現(xiàn)。當然，你可以使用
IE
條件注釋，低版本
IE
使用
jqueryrotate，高級瀏覽器則直接使用
CSS3。
使用方法
//演示1
//旋轉(zhuǎn)45angle
$(document.body).click(function
()
{
//方式1
$('.divOne').rotate(45);
//方式2
$('.divOne').rotate({
angle:
45
});
});
//演示2
//鼠標移動效果
//方式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
點擊旋轉(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ù)
類型
說明
默認值
angle
數(shù)字
旋轉(zhuǎn)一個角度
animateTo
數(shù)字
從當前的角度旋轉(zhuǎn)到多少度
step
函數(shù)
每個動畫步驟中執(zhí)行的回調(diào)函數(shù)，當前角度值作為該函數(shù)的第一個參數(shù)
無
easing
函數(shù)
自定義旋轉(zhuǎn)速度、旋轉(zhuǎn)效果，需要使用
jQuery.easing.js
無
duration
整數(shù)
旋轉(zhuǎn)持續(xù)時間，以毫秒為單位
callback
函數(shù)
旋轉(zhuǎn)完成后的回調(diào)函數(shù)
無
getRotateAngle
函數(shù)
返回旋轉(zhuǎn)對象當前的角度
無
stopRotate
函數(shù)
停止旋轉(zhuǎn)
無
演示雖然使用的是圖片，但
jqueryrotate
并不只是能運用在圖片上，其他元素如
div
等也可以使用。同時，你可以發(fā)揮想象，制作出更多關(guān)于旋轉(zhuǎn)的特效。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery窗口操作技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
$("#cao").rotate(i);這里rotate方法是什么？jquery沒有這個方法吧。
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);
});
重慶分公司
重慶分公司
