帮助:javascript以减慢旋转图像 [英] help: javascript to slow down rotating image
本文介绍了帮助:javascript以减慢旋转图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的网页上有旋转图像.
链接如下:
一切都按我的要求工作正常，我只是想降低图像的旋转速度，因为它太快了，我无法找到降低速度的方法.
我的代码如下:
http://equosinfotech.com/testdemo/test.html
i have rotating image in my webpage.
link is below:
everything works fine as i wanted, i just want to slow down the rotation speed of the image as its too fast and i am not able to find a way to slow it down.
my code is as below:
http://equosinfotech.com/testdemo/test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<!-- <link rel="stylesheet" href="style2.css" media="screen" /> -->
<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script src="http://mathewhood.com/misc/js/jQueryRotateCompressed.2.1.js" type="text/javascript"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js" type="text/javascript"></script>
<style type="text/css">
#container{
position:relative;
width:500px;
}
#button {
position:absolute;
width:300px;
background-color:pink;
top:420px;
z-index:5;
margin:0 auto;
text-align:center;
padding-top:15px;
padding-bottom:15px;
color:#fff;
text-transform:uppercase;
font-weight:bold;
left:90px;
}
#globe_background{
background:none);
width:494px;
height:397px;
z-index:1;
position:absolute;
top:0;
}
#globe_hands{
background:none;
width:295px;
height:129px;
z-index:3;
top:265px;
left:96px;
position:absolute;
}
#globe_small {
/*background:url(images/globe_small.png);*/
position:absolute;
z-index:4;
/*-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
-ms-transition-property: transform;*/
}
#globe_large {
background:green;
height:276px;
width:276px;
position:absolute;
top:125;
left:106px;
z-index:2;
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
-ms-transition-property: transform;
}
#button:hover + #globe_small{
/*-webkit-animation-name: spin;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 1s;
-moz-animation-name: mozspin;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-duration: 1s;
-o-animation-name: ospin;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
-o-animation-duration: 1s;
-ms-animation-name: msspin;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-ms-animation-duration: 1s;
animation-name: nospin;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 1s;*/
}
#button:hover ~ #globe_large{
-webkit-animation-name: spin;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 1s;
-moz-animation-name: mozspin;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-duration: 1s;
-o-animation-name: ospin;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
-o-animation-duration: 1s;
-ms-animation-name: msspin;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-ms-animation-duration: 1s;
animation-name: nospin;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 1s;
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes mozspin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@-o-keyframes ospin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@keyframes nospin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes msspin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
* {
border-style: none;
border-color: inherit;
border-width: 0;
margin: 0;
padding: 0;
outline: none;
}
.under
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
.over
{
position:absolute;
z-index:-1;
}
.overabout
{
position:absolute;
z-index:-1;
left: 470px;
top: 96px;
background-image: url('images/abouttemp.png');
background-position: bottom;
}
.overabout:hover
{
position:absolute;
background-image: url('images/abouttemp.png');
background-position: top;
z-index:-1;
}
.overgallery
{
position:absolute;
z-index:-1;
left: 724px;
top: 379px;
background-image: url('images/gallery.png');
background-position: top;
}
.overgallery:hover
{
position:absolute;
background-image: url('images/gallery.png');
background-position: bottom;
z-index:-1;
}
</style>
<script>
var stop = function (){
$("#image").rotate({
angle:0,
animateTo:0,
callback: stop,
easing: function (x,t,b,c,d){ // t: current time, b: begInnIng value, c: change In value, d: duration
return c*(t/d)+b;
}
});
}
$(document).ready(function()
{
rotation();
$("#image").rotate({
bind:
{
mouseover : function() {
stop();
},
mouseout : function() {
rotation();
}
}
});
});
var rotation = function() {
$("#image").rotate({
angle: 0,
animateTo: 360,
callback: rotation,
easing: function(x, t, b, c, d) { // t: current time, b: begInnIng value, c: change In value, d: duration
return c * (t / d) + b;
}
});
}
</script>
</head>
<body background="images/black_background.jpg">
<div class="over"
style="height: 669px; width: 100%;">
<div id="globe_small">
<img src="images/img2.png" id="image"/>
</div>
</div>
</body>
</html>
希望some1可以帮助我减慢图像旋转速度！!!!
hope some1 can help me slow down the image rotation!!!!
推荐答案
(" #image").rotate({ 角度: 0 ， animateTo: 0 ， 回调:停止， 缓动:功能(x，t，b，c，d){// 返回 c *(t/d)+ b; } }); }
("#image").rotate({ angle:0, animateTo:0, callback: stop, easing: function (x,t,b,c,d){ // t: current time, b: begInnIng value, c: change In value, d: duration return c*(t/d)+b; } }); }
(文档).ready(功能() { rotation();
(document).ready(function() { rotation();
(" ) .rotate({ 绑定: { 鼠标悬停:功能(){ 停止(); }， mouseout:功能(){ 回转(); } } }); }); var 旋转= 功能(){
("#image").rotate({ bind: { mouseover : function() { stop(); }, mouseout : function() { rotation(); } } }); }); var rotation = function() {
这篇关于帮助:javascript以减慢旋转图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
