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 ...
随机推荐
- JavaScript:详解 Base64 编码和解码
Base64是最常用的编码之一,比如开发中用于传递参数.现代浏览器中的<img />标签直接通过Base64字符串来渲染图片以及用于邮件中等等.Base64编码在RFC2045中定义,它被 ...
- 理解 CSS 中的伪元素 :before 和 :after
CSS 的主要目的是给 HTML 元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的.事实上 CSS 中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是“伪元素”. 你一定 ...
- 【BZOJ】1497: [NOI2006]最大获利 最大权闭合子图或最小割
[题意]给定n个点,点权为pi.m条边,边权为ci.选择一个点集的收益是在[点集中的边权和]-[点集点权和],求最大获利.n<=5000,m<=50000,0<=ci,pi<= ...
- Razor使用Parse()时最好指定“缓存名”
为什么? 本文的标题,明显有一种提醒的口吻. 从18年的生活经验看,如果想提醒人要怎么办,不要怎么办. 最好说明原因.那么小编开始说明原因喽. 哦对,说原因之前,先说交代一下背景,一句话 在非mvc下 ...
- linux平台 PHP 实现 word转pdf的艰难历程...
1.网上搜索资料 无非是 openoffice + PHP的com组件 然而试了很多次 都不可靠 2.后来找到 openoffice + jodconverter(需java环境) 一.安装openo ...
- 2017ACM暑期多校联合训练 - Team 7 1002 HDU 6121 Build a tree (深搜+思维)
题目链接 Problem Description HazelFan wants to build a rooted tree. The tree has n nodes labeled 0 to n− ...
- MySQL join 用法
select column1, column2 from TABLE1 join TABLE2 on 条件 # select * from table1 join table2; #两个表合成一个se ...
- Python3 断言
#!/usr/bin/env python # _*_ coding:utf-8 _*_ # Author:CarsonLi ''' 断言一般用于后面有非常重要的操作,需要使用前面的数据,而且不容许出 ...
- 64.Minimum Path Sum---dp
题目链接:https://leetcode.com/problems/minimum-path-sum/description/ 题目大意:从左上到右下的路径中,找出路径和最小的路径(与62,63题相 ...
- 在html页面中引入公共的头部和底部
参考链接: http://www.cnblogs.com/jason-star/p/3345225.html http://blog.csdn.net/jsxzzliang/article/detai ...