本文實例講述了jQuery旋轉(zhuǎn)插件jqueryrotate用法。分享給大家供大家參考,具體如下:
成都創(chuàng)新互聯(lián)主要業(yè)務有網(wǎng)站營銷策劃、成都網(wǎng)站制作、網(wǎng)站建設(shè)、微信公眾號開發(fā)、微信小程序、H5建站、程序開發(fā)等業(yè)務。一次合作終身朋友,是我們奉行的宗旨;我們不僅僅把客戶當客戶,還把客戶視為我們的合作伙伴,在開展業(yè)務的過程中,公司還積累了豐富的行業(yè)經(jīng)驗、全網(wǎng)整合營銷推廣資源和合作伙伴關(guān)系資源,并逐漸建立起規(guī)范的客戶服務和保障體系。
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è)計有所幫助。
用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);
}
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
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