jQuery图片旋转插件jQueryRotate可设定旋转的方向、角度

欢马劈雪

工程师 (已认证)

原创分享签约作者

发表于JS/jQuery代码

185

本插件可以对网页内的普通图片进行旋转，有相当丰富的参数可以进行设置，可以设定旋转的方向，旋转的角度，还可以设定鼠标事件，当鼠标滑过时动态旋转，非常棒
在网页<head>区添加以下代码
[code]
<script type="text/javascript" src="//www.sharejs.com/software/jquery/jquery-1.3.1.js"></script>
<script language="javascript" src="jQueryRotate.js"></script>

<style>v\:image { behavior:url(#default#VML); display:inline-block }</style>

<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />
[/code]
其中：
[code]

<style>v\:image { behavior:url(#default#VML); display:inline-block }</style>

<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />
[/code]
必须添加到你的<head>区否则图片不会显示、
jQueryRotate.js是旋转的jQuery插件，点击这里下载>>>
在网页<body>区添加以下代码
[code]
<img id="image" src="1.jpg"><Br><br>
<img id="image2" src="1.jpg"><Br><br>
<img id="image3" src="1.jpg"><Br><br>
<p></p>
<script type="text/javascript">
$(document).ready(function()
{
var rot=$('#image3').rotate({maxAngle:25,minAngle:-55,
bind:
[
{"mouseover":function(){rot[0].rotateAnimation(85);}},
{"mouseout":function(){rot[0].rotateAnimation(-35);}}
]
});
$('#image2').rotateAnimation({angle:5});

$('#image').rotate(-25);

});
</script>
[/code]
image,image2,image3分别为三个图片的ID
调用方法如下：
[code]
jQuery(imgElement).rotate(angleValue)
jQuery(imgElement).rotate(parameters)
jQuery(imgElement).rotateAnimation(parameters)
jQuery(imgElement).rotateAnimation(parameters)
[/code]
参数说明：
({angle:angleValue,
[animateAngle:animateAngleValue],
[maxAngle:maxAngleValue],
[minAngle:minAngleValue],
[callback:callbackFunction],
[bind:[{event: function},{event:function} ] })
jQuery(imgElement).rotateAnimation