网页图片你的免费素材下载 jQuery图片旋转插件jQueryRotate可设定旋转的标的目的、角度

资源魔 44 0
本插件能够对网页内的一般图片进行旋转,有相称丰厚的参数能够进行设置,能够设定旋转的标的目的,旋转的角度,还能够设定鼠标事情,当鼠标滑过期静态旋转,十分棒
正在网页<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>
<!-- Include the VML behavior -->
<style>v\:image { behavior:url(#default#VML); display:inline-block }</style>
<!-- Declare the VML namespace -->
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />
[/code]
此中:
[code]
<!-- Include the VML behavior -->
<style>v\:image { behavior:url(#default#VML); display:inline-block }</style>
<!-- Declare the VML namespace -->
<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

标签: 图片旋转 堆栈 方向

抱歉,评论功能暂时关闭!