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实现旋转动画的更多相关文章

  1. jQuery.rotate.js(控制图片转动)

    jQuery.rotate.js笔记   1. jQuery.rotate.js是什么 一个开源的兼容多浏览器的jQuery插件用来对元素进行任意角度的旋转动画. 这个库开发的目的是为了旋转img的, ...

  2. jQuery.rotate.js笔记

    1. jQuery.rotate.js是什么 一个开源的兼容多浏览器的jQuery插件用来对元素进行任意角度的旋转动画. 这个库开发的目的是为了旋转img的,在3.x之后的版本可能支持其它元素,但旋转 ...

  3. jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码

    需求: 抽奖代码最多可以抽奖5次,而且,每次只会中“2000元理财金”或者“谢谢参与”,其它的不会抽中(哈哈,果然都是套路). 效果如下: 一.页面结构: ? 1 2 3 4 5 6 7 8 9 10 ...

  4. jquery.rotate.js可选抽奖次数和中奖内容的转盘抽奖demo

    需求: 最多可以抽奖5次,而且,每次只会中“2000元理财金”或者“谢谢参与”,其它的不会抽中(哈哈,果然都是套路). 效果如下: 一.页面结构: <div class="g-cont ...

  5. jQuery.rotate.js参数

    CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...

  6. JS框架_(coolShow.js)图片旋转动画特效

    百度云盘 传送门 密码:ble6 coolShow.js插件图片旋转动画效果 <!DOCTYPE HTML> <head> <meta http-equiv=" ...

  7. jquery.rotate.js库中的rotate函数怎么用。

    rotate是jQuery旋转rotate插件,支持Internet Explorer 6.0+ .Firefox 2.0 .Safari 3 .Opera 9 .Google Chrome,高级浏览 ...

  8. jQuery旋转插件jquery.rotate.js 让图片旋转

    演示1 直接旋转一个角度 $('#img1').rotate(45); 演示2 鼠标移动效果 $('#img2').rotate({ bind : { mouseover : function(){ ...

  9. JQuery插件让图片旋转任意角度且代码极其简单

    引入下方的jquery.rotate.js文件,然后通过$("选择器").rotate(角度);可以旋转任意角度, 例如$("#rotate-image").r ...

随机推荐

  1. Map总结

    Map是键值对集合,是一对一对往上存的,要保持键的唯一性 形式:Map<K, V> 方法: 增 put(K key, V value) 若存储时Map中有相同的键,则返回原来键的值,并覆盖 ...

  2. 始终要重载toString

    本文涉及到的概念 1.重载toString方法的意义 2.两个注意事项   1.重载toString方法的意义 重载toString,返回关于当前实例的描述信息.这在调试错误,打印实例信息时,可以带来 ...

  3. 20155117王震宇 实验三 敏捷开发与XP实践 实验报告

    实验内容 XP基础 XP核心实践 相关工具 实验要求 1.没有Linux基础的同学建议先学习<Linux基础入门(新版)><Vim编辑器> 课程 2.完成实验.撰写实验报告,实 ...

  4. 【leetcode 简单】第四题 罗马数字转整数

    罗马数字包含以下七种字符:I, V, X, L,C,D 和 M. 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如, 罗马数字 2 写做 II ,即为两个并列 ...

  5. Angular 2.0 基础:服务

    什么是服务(Service) 在Angular 2 中我们提到的服务 service 一般指的是 哪些能够被其他组件或者指令调用的 单一的,可共享的 代码块.当然,通过服务可以将数据和组件分开,这样就 ...

  6. weblogic 开启注意问题

    1.关闭防火墙 service iptables stop chkconfig iptables off 2.weblogic unable to get file lock问题 我的解决办法是ps ...

  7. 初识smarty

    个人体会(不完全正确):就是smarty就是为了更好的使得php/html结合做出来的一个框架. ,

  8. linux编程之main()函数启动过程【转】

    转自:http://blog.csdn.net/gary_ygl/article/details/8506007 1 最简单的程序  1)编辑helloworld程序,$vim helloworld. ...

  9. 记一个多线程使用libevent的问题

    前段时间使用libevent网络库实现了一个游戏服务器引擎,在此记录下其中遇到的一个问题. 我在设计服务器上选择把逻辑和网络分线程,线程之间通信使用队列.但是这样做会有个问题: 当逻辑线程想要主动的发 ...

  10. INIT_WORK

    借助runtime pm,在需要使用模块时,增加引用计数(可调用pm_runtime_get),不需要使用时,减少引用计数(可调用pm_runtime_put). 1.INIT_WORK(struct ...