jQuery实现箭头旋转怎么做的?

jQuery实现箭头旋转怎么做的?,第1张

用css吧,CSS就行的,例如:

顺首悉闹时针旋转90度:

-moz-transform:rotate(90deg)

-webkit-transform:rotate(90deg)

-o-transform:rotate(90deg)

transform:rotate(90deg) 

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1)

其它度数请自行修改下,可以用在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)

}

可以通过addClass()方法孙逗来族亏代替此动作:

比如想旋转一个icon:

在css中加入一个class

[css] view plain copy

.add_transform{

transform:rotate(180deg)

-ms-transform:rotate(180deg)    /* IE 9 */

-moz-transform:rotate(180deg)   /* Firefox */

-webkit-transform:rotate(180deg) /* Safari 和 Chrome */

-o-transform:rotate(180deg)    /* Opera */

transition: all 0.5s ease-in-out

-moz-transition: all 0.5s ease-in-out /* Firefox 4 */

-webkit-transition: all 0.5s ease-in-out /* Safari 和 Chrome */

-o-transition: all 0.5s ease-in-out /* Opera */

}

然后通过$("选择器").toggleClass(".add_transform")来使icon的旋转变为动画效果。

或者下载补丁(加一个js文件兆凯神):

https://github.com/zachstronaut/jquery-animate-css-rotate-scale/

$("XX").animate({left:"",right:"",top:"",bottom:""},speed,fucntion(){})

第一个禅册参数通过设置上下谈雀左右的值可以设置动画元素的运动方向,第二个参数可以设置运动的时间,第三个参数设置动画执行结束之后的 *** 作。

第二、三个参数可以缺省

第二个参数的值可以是fast、slow或者具体的数值(单位毫秒),缺省值的速度是400毫秒贺侍宏。

第三个参数缺省表示不动画结束后不执行任何 *** 作。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11983534.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存