建站
咨詢
售后
建站咨詢
新聞中心
jquery 讓圖片旋轉30度怎么寫啊
用jquery 給圖片添加css樣式，用css樣式來控制旋轉：
我們提供的服務有：成都網(wǎng)站設計、成都網(wǎng)站制作、外貿網(wǎng)站建設、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、善左ssl等。為近1000家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的善左網(wǎng)站制作公司
CSS3 transform 屬性
transform具體的用法去百度吧 ，手冊里解釋很全面
jquery圖片旋轉問題
$("#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);
});
jQuery圖片旋轉插件jQueryRotate.js用法實例(附demo下載)
本文實例講述了jQuery圖片旋轉插件jQueryRotate.js用法。分享給大家供大家參考，具體如下：
推薦一個圖片旋轉插件，用于瀏覽相冊時，旋轉圖片。
運行效果截圖如下：
點擊此處查看在線演示效果。
具體代碼如下：
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代碼，完整實例代碼點擊此處本站下載。
更多關于jQuery插件相關內容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
jquery如何讓圖片放大旋轉一定角度
這個現(xiàn)在可以用css3來完成來；
transform: rotate(90deg) 旋轉90度
transform: scale(1.2); 放大1.2倍
jQuery旋轉插件jqueryrotate用法詳解
本文實例講述了jQuery旋轉插件jqueryrotate用法。分享給大家供大家參考，具體如下：
CSS3
提供了多種變形效果，比如矩陣變形、位移、縮放、旋轉和傾斜等等，讓頁面更加生動活潑有趣，不再一動不動。然后
IE10
以下版本的瀏覽器不支持
CSS3
變形，雖然
IE
有私有屬性濾鏡（filter），但不全面，而且效果和性能都不好。
今天介紹一款
jQuery
插件——jqueryrotate，它可以實現(xiàn)旋轉效果。jqueryrotate
支持所有主流瀏覽器，包括
IE6。如果你想在低版本的
IE
中實現(xiàn)旋轉效果，那么
jqueryrotate
是一個很好的選擇。
兼容性
jqueryrotate
支持所有主流瀏覽器，包括
IE6。jqueryrotate
在高級瀏覽器中使用
CSS3
transform
屬性實現(xiàn)，在低版本
IE
中使用
VML
實現(xiàn)。當然，你可以使用
IE
條件注釋，低版本
IE
使用
jqueryrotate，高級瀏覽器則直接使用
CSS3。
使用方法
//演示1
//旋轉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
不停旋轉
//方式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
點擊旋轉
//方式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ù)字
旋轉一個角度
animateTo
數(shù)字
從當前的角度旋轉到多少度
step
函數(shù)
每個動畫步驟中執(zhí)行的回調函數(shù)，當前角度值作為該函數(shù)的第一個參數(shù)
無
easing
函數(shù)
自定義旋轉速度、旋轉效果，需要使用
jQuery.easing.js
無
duration
整數(shù)
旋轉持續(xù)時間，以毫秒為單位
callback
函數(shù)
旋轉完成后的回調函數(shù)
無
getRotateAngle
函數(shù)
返回旋轉對象當前的角度
無
stopRotate
函數(shù)
停止旋轉
無
演示雖然使用的是圖片，但
jqueryrotate
并不只是能運用在圖片上，其他元素如
div
等也可以使用。同時，你可以發(fā)揮想象，制作出更多關于旋轉的特效。
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery窗口操作技巧總結》、《jQuery拖拽特效與技巧總結》、《jQuery常用插件及用法總結》、《jquery中Ajax用法總結》、《jQuery表格(table)操作技巧匯總》、《jQuery擴展技巧總結》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
名稱欄目：jquery圖片旋轉,jquery 圖片旋轉
URL鏈接：http://www.ef60e0e.cn/article/dsidpdc.html
