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. Ubuntu 14.04 安装Visual studio Code

    上一篇简单介绍了Ubuntu 14.04上如何创建.运行 hello world 程序. 这篇介绍Ubuntu 14.04如何安装Visual studio Code. 网上推荐的有通过Ubuntu ...

  2. 10款好用的 jQuery 图片切换效果插件

    jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...

  3. jQuery插件ASP.NET应用之AjaxUpload

    本次使用AJAXUPLOAD做为上传客户端无刷上传插件,其最新版本为3.9,官方地址:http://valums.com/ajax-upload/ 在页面中引入 jquery.min.1.4.2.js ...

  4. final关键字详解

    java中,final关键字可以用来修饰类.方法和变量(包括成员变量和局部变量).下面就从这三个方面来了解一下final关键字的基本用法. 1.修饰类 当用final修饰一个类时,表明这个类不能被继承 ...

  5. 【译】Attacking XML with XML External Entity Injection (XXE)

    原文链接:Attacking XML with XML External Entity Injection (XXE) XXE:使用XML外部实体注入攻击XML 在XML中,有一种注入外部文件的方式. ...

  6. CDN基础详解

    什么是 CDN?     Origin Server: 源站,也就是做 CDN 之前的客户真正的服务器;   User: 访问者,也就是要访问网站的网民;   Edge Server: CDN 的服务 ...

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

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

  8. 14 - 函数参数检测-inspect模块

    目录 1 python类型注解 2 函数定义的弊端 3 函数文档 4 函数注解 4.1 annotation属性 5 inspect模块 5.1 常用方法 5.2 signature类 5.3 par ...

  9. netif_receive_skb->__netif_receive_skb_core

    在设备驱动收包之后,会通过netif_receive_skb将收取的包,按照注册的协议回调,传递到上层进行处理: /* 将skb传递到上层 */ static int __netif_receive_ ...

  10. PHP 不让标准浏览器(firfox,chrome等)走浏览器的缓存页面

    或在HTML页面里加: <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache,no-store, must-reva ...