jquery.rotate.js实现旋转动画
1.页面引入jquery.rotate.js文件, 下载地址:https://files.cnblogs.com/files/zhoujl-5071/jquery.rotate.js(打开这个网址,ctrl+s就好了)
<script type="text/javascript" src="js/jquery.rotate.js"></script>
文件路径根据自己实际情况来写。
2.或页面加载直接执行,或通过绑定事件触发,让目标元素转起来
$('#container').rotate({
bind : {
mouseover : function(){
$(this).find(".icon").rotate({animateTo: 180,duration:500});
}, mouseout : function(){
$(this).find(".icon").rotate({animateTo: 0,duration:500});
}
}
});
我这里实现的效果是:鼠标移到'#container'上边时,'icon'顺时针旋转180度(用时0.5秒),鼠标移出时逆时针旋转180度(用时0.5秒)。
更多的用法请参考: https://www.cnblogs.com/cc11001100/p/6354234.html
jquery.rotate.js实现旋转动画的更多相关文章
- jQuery.rotate.js(控制图片转动)
jQuery.rotate.js笔记 1. jQuery.rotate.js是什么 一个开源的兼容多浏览器的jQuery插件用来对元素进行任意角度的旋转动画. 这个库开发的目的是为了旋转img的, ...
- jQuery.rotate.js笔记
1. jQuery.rotate.js是什么 一个开源的兼容多浏览器的jQuery插件用来对元素进行任意角度的旋转动画. 这个库开发的目的是为了旋转img的,在3.x之后的版本可能支持其它元素,但旋转 ...
- jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
需求: 抽奖代码最多可以抽奖5次,而且,每次只会中“2000元理财金”或者“谢谢参与”,其它的不会抽中(哈哈,果然都是套路). 效果如下: 一.页面结构: ? 1 2 3 4 5 6 7 8 9 10 ...
- jquery.rotate.js可选抽奖次数和中奖内容的转盘抽奖demo
需求: 最多可以抽奖5次,而且,每次只会中“2000元理财金”或者“谢谢参与”,其它的不会抽中(哈哈,果然都是套路). 效果如下: 一.页面结构: <div class="g-cont ...
- jQuery.rotate.js参数
CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...
- JS框架_(coolShow.js)图片旋转动画特效
百度云盘 传送门 密码:ble6 coolShow.js插件图片旋转动画效果 <!DOCTYPE HTML> <head> <meta http-equiv=" ...
- jquery.rotate.js库中的rotate函数怎么用。
rotate是jQuery旋转rotate插件,支持Internet Explorer 6.0+ .Firefox 2.0 .Safari 3 .Opera 9 .Google Chrome,高级浏览 ...
- jQuery旋转插件jquery.rotate.js 让图片旋转
演示1 直接旋转一个角度 $('#img1').rotate(45); 演示2 鼠标移动效果 $('#img2').rotate({ bind : { mouseover : function(){ ...
- JQuery插件让图片旋转任意角度且代码极其简单
引入下方的jquery.rotate.js文件,然后通过$("选择器").rotate(角度);可以旋转任意角度, 例如$("#rotate-image").r ...
随机推荐
- CSS中filter滤镜的学习笔记
1.CSS静态滤镜样式 (filter)(只有IE4.0以上支持) CSS静态滤镜样式的使用方法:{ filter : filtername( parameters1, parameters2, . ...
- (值类型引用类型)和null的关系
1.null null表示变量没有指向任何对象. 2.值类型 包括 bool.结构体.枚举.int.double.float等等 .在.NET中值类型都继承自ValueType. 3. 引 ...
- http://www.cnblogs.com/kkdn/
/*** PHP保留两位小数的几种方法* @link http://www.phpddt.com*/$num = 10.4567; //第一种:利用round()对浮点数进行四舍五入echo roun ...
- vista风格的cms企业html后台管理系统模板——后台
链接:http://pan.baidu.com/s/1c1Cv99e 密码:20yz
- java正则: 忽略大小写匹配
import java.util.regex.Matcher; import java.util.regex.Pattern; import com.sun.org.apache.xerces.int ...
- EnumSet基本用法
enum Season { SPRING, SUMMER, FALL, WINTER } public class EnumSetTest { public static void main(Stri ...
- reverse和reverse_copy函数的应用
reverse函数的作用是:反转一个容器内元素的顺序.函数参数:reverse(first,last);//first为容器的首迭代器,last为容器的末迭代器.它没有任何返回值. 这个函数比较简单, ...
- css如何将div画成三角形
首先了解一下盒模型: 盒模型 先看一段代码: #div1{ height: 100px; border-style: solid; border-width: 100px 100px 100px 10 ...
- IDE按住ctrl 打开单元 无效时 的方法
一般打开单元无效时 是由于程序有错误,若程序没有错误 可以重新build一下 再试. 若实在不行 就右键---open at cursor
- restful的设计风格
网络应用程序,分为前端和后端两个部分.当前的发展趋势,就是前端设备层出不穷(手机.平板.桌面电脑.其他专用设备......). 因此,必须有一种统一的机制,方便不同的前端设备与后端进行通信.这导致AP ...