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 ...
随机推荐
- 【51nod】1238 最小公倍数之和 V3 杜教筛
[题意]给定n,求Σi=1~nΣj=1~n lcm(i,j),n<=10^10. [算法]杜教筛 [题解]就因为写了这个非常规写法,我折腾了3天…… $$ans=\sum_{i=1}^{n}\s ...
- 详细说说如何生成验证码—ASP.NET细枝末节(4)
前言 今天小编详细的说一下,ASP.NET网站开发过程中生成验证码的全部问题. 本文的目标,是让读者了解,生成验证码涉及的全部基础知识问题. 当然这里说的是比较简单的验证码. 真正符合要求的验证码,涉 ...
- HDU 1072 Nightmare (广搜)
题目链接 Problem Description Ignatius had a nightmare last night. He found himself in a labyrinth with a ...
- Balanced and stabilized quicksort method
The improved Quicksort method of the present invention utilizes two pointers initialized at opposite ...
- Repository.UpdateModel(model, db);
Repository.UpdateModel(model, db); 可用类型 string int? datetime 不可用类型 int double
- 017 CPU冲高定位方法
1.通过top命令查看cpu占用高的进程ID; 2.通过top -Hp 进程ID 查看该进程下所有线程占用cpu的情况,拿出占用cpu最高的线程ID,换算成十六进制; 3.通过 jstack 进程ID ...
- 016 sleep,wait,yield,join区别
1.线程通常有五种状态,创建,就绪,运行.阻塞和死亡状态.2.阻塞的情况又分为三种:(1).等待阻塞:运行的线程执行wait()方法,该线程会释放占用的所有资源,JVM会把该线程放入“等待池”中.进入 ...
- 控制终端tcgetattr函数与tcsetattr函数
tcgetattr(fd,&oldios); //获得与终端相关的参数,参数保存在oldios中 newios.c_cflag = nSpeed | CS8 | CLOCAL | CREAD; ...
- 欧拉回路&欧拉通路判断
欧拉回路:图G,若存在一条路,经过G中每条边有且仅有一次,称这条路为欧拉路,如果存在一条回路经过G每条边有且仅有一次, 称这条回路为欧拉回路.具有欧拉回路的图成为欧拉图. 判断欧拉通路是否存在的方法 ...
- python discover 函数介绍
discover(start_dir,pattern='test*.py',top_level_dir=None)找到指定目录下所有测试模块,并可递归查到子目录下的测试木块,只有匹配到的文件名才会被加 ...