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. 10个基于 JavaScript 的 WYSIWYG 编辑器

    COMSHARP CMS 写道:在线编辑内容的时候,那些基于 JavaScript 的编辑器帮了我们大忙,这些所见即所得(WYSIWYG)编辑器,给我们提供了类似 Office 的操作体验.如今,任何 ...

  2. Centos tomcat jmx 远程连接

    jmx配置: -Dcom.sun.management.jmxremote-Dcom.sun.management.jmxremote.authenticate=false-Dcom.sun.mana ...

  3. 使用infinite-scroll实现Ghost博文列表的滚动加载

    Ghost博客系统默认提供的博文列表为传统的翻页方式(通过点击上一页.下一页等按钮来切换),随着移动客户端的发展,瀑布流式的滚动加载方式得到广泛应用,有效地提高了用户浏览信息的流畅度.下面详述如何通过 ...

  4. King's Quest POJ - 1904 匈牙利算法的思想+tarjan缩点+染色

    题目链接:https://cn.vjudge.net/problem/POJ-1904 自己一开始的想法,打算用匈牙利算法实现,找二分图的最大匹配.但是打了打发现,不太好实现.原因如下:匈牙利算法是不 ...

  5. Sublime text 3中文汉化教程

    想弄个中文版的sublime,居然可以不用重新下载汉化包或者重新下载简体中文版了~而是只需要安装个插件即可!   工具/原料   电脑 sublime text3编辑器 方法/步骤    启动并进入s ...

  6. STL hashtable阅读记录

    unordered_map,unordered_set等相关内容总结: unordered_map和unordered_set是在开发过程中常见的stl数据结构.其本质是hashtable.在SGI_ ...

  7. 64_p4

    perl-Test-Compile-1.3.0-4.fc26.noarch.rpm 12-Feb-2017 05:09 26486 perl-Test-ConsistentVersion-0.3.0- ...

  8. gradle-4.1-rc-1-all.zip gradle-4.1-rc-2-all.zip 免费下载(百度网盘)

    今天下载遇到官网不给力,给有需要的你 gradle-4.1-rc-1-all.zip 密码: uyey gradle-4.1-rc-2-all.zip 密码: txhh

  9. Selenium_Grid

    Selenium Grid 工作原理 Grid是一种分布式测试工具,整个结果由一个hub主节点和若干个node代理节点组成. hub用来管理各个代理节点的注册和状态信息,并且接收远程客户端代码请求调用 ...

  10. Copy List with Random Pointer——技巧

    A linked list is given such that each node contains an additional random pointer which could point t ...