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 ...
随机推荐
- [php]数组建立方式
1.$a[0]=..; $a[1]=..; $a[2]=..; $a[3]=..; 2.$a=array(1,2,3,4,5); 3.自定义数组 $a['logo']="qq"; ...
- java.lang.NoClassDefFoundError: HttpServletRequest
在eclipse里启动tomcat报错,错误日志:Caused by: java.lang.ClassNotFoundException: HttpServletRequest 在build path ...
- frameset测试
frame不能放在body标签内.指定name属性,为这一个框架指定名字,在html的a的target属性可以设为target="right"在该框架显示跳转的页面.(常用于后台管 ...
- 大数据系列之Flume+kafka 整合
相关文章: 大数据系列之Kafka安装 大数据系列之Flume--几种不同的Sources 大数据系列之Flume+HDFS 关于Flume 的 一些核心概念: 组件名称 功能介绍 Agent ...
- AD服务器安装文档
Windows Server 2008 R2 AD服务器搭建 1. AD服务器简介 应用到: Windows Server 2003, Windows Server 2003 R2, Windows ...
- 《深入理解Java虚拟机》笔记--第三章 、垃圾收集器与内存分配策略
1960年诞生于MIT的Lisp是第一门真正使用内存动态分配和垃圾收集技术的语言. Java的垃圾收集(Garbage Collection)主要关注堆和方法区的内存回收. 在GC堆进行回收前,第一件 ...
- LNMP结合discuz的配置
一.安装discuz 配置参照LAMP结合discuz的第一部分 不要忘记了 添加hosts~!!!! ===============我是分割线.========================== ...
- 字典对象的 Pythonic 用法(上篇)
字典对象在Python中作为最常用的数据结构之一,和数字.字符串.列表.元组并列为5大基本数据结构,字典中的元素通过键来存取,而非像列表一样通过偏移存取.笔者总结了字典的一些常用Pyhonic用法,这 ...
- PHP缓存加速插件 XCache 、 ZendOpcache 安装
PHP缓存原理 当客户端请求一个PHP程序时,服务器的PHP引擎会解析该PHP程序,并将其编译为特定的操作码(OperateCode,简称opcode)文件,该文件是PHP代码的一种二进制表示方式.默 ...
- struct中长度为0的数组用途与原理
前言 在标准C和C++中,长度为0的数组是被禁止使用的.不过在GNUC中,存在一个非常奇怪的用法,那就是长度为0的数组,比如Array[0]; 很多人可能觉得不可思议,长度为0的数组是没有什么意义的, ...