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. 【LibreOJ】#6298. 「CodePlus 2018 3 月赛」华尔兹 BFS

    [题意]给定n*m的网格,起点和终点位置,一些格指定下一步的方向,一些格任意.要求为方向任意的格确定方向,使起点可以走到终点.n,m<=50. [算法]BFS [题解]这道题最好用BFS,因为D ...

  2. windows下启动mysql服务的命令行启动和手动启动方法

    1.图形界面下启动mysql服务. 在图形界面下启动mysql服务的步骤如下: (1)打开控制面板->管理工具->服务,如下图所示: 可以看到Mysql服务目前的状态是未启动(未写已启动的 ...

  3. LOW逼三人组(三)----插入排序

    插入排序思路 插入排序算法: import random # 随机模块 import time def cal_time(func): # 装饰器 ,用来检测算法所执行的时间 def wrapper( ...

  4. python3学习笔记.2.基础

    1.编码 默认编码是 utf-8 # -*- coding: utf-8 -*- 2.注释 单行注释  # 多行注释,用三个单引号或双引号 3.关键字 可在交互窗口查询. >>> i ...

  5. 《STL源码剖析》读书笔记

    转载:https://www.cnblogs.com/xiaoyi115/p/3721922.html 直接逼入正题. Standard Template Library简称STL.STL可分为容器( ...

  6. python RSA加密解密及模拟登录cnblog

    1.公开密钥加密 又称非对称加密,需要一对密钥,一个是私人密钥,另一个则是公开密钥.公钥加密的只能私钥解密,用于加密客户上传数据.私钥加密的数据,公钥可以解密,主要用于数字签名.详细介绍可参见维基百科 ...

  7. 你需要知道的Nginx配置二三事

    做服务端开发的,工作中难免会遇到处理Nginx配置相关问题.在配置Nginx时,我一直本着“照葫芦画瓢”的原则,复制已有的配置代码,自己修修改改然后完成配置需求,当有人问起Nginx相关问题时,其实仍 ...

  8. PlantUML——1.Hello

    官网: http://www.plantuml.com/ 第一步: 下载 plantuml.jar文件: 第二步:创建一个demo.txt文件(与plantuml.jar在同一目录),内容如下: @s ...

  9. 学习笔记----float后不与前面元素同行解决办法。

    <li>文本<span> 16-08-17</span></li> 当非float的元素和float的元素在一起的时候(如上代码), 如果非float元 ...

  10. Base64的好处

    1. 昨天的<MIME笔记>中提到,MIME主要使用两种编码转换方式----Quoted-printable和Base64----将8位的非英语字符转化为7位的ASCII字符. 虽然这样的 ...