首先要下载jquery.min.js 和jquery.rotate.js文件

1、下载地址：

https://www.jb51.net/jiaoben/554113.html

2、导入文件

  1. <script type="text/javascript" src="../js/jquery-2.1.4.js" ></script>
  2. <script type="text/javascript" src="../js/jQueryRotate.js"></script>

3、html界面

  1. <body>
  2.     <div>
  3.         <h4>示例一：鼠标滑过旋转图片</h4>
  4.         <img id="img1" src="../imgs/safari.png" />
  5.     </div>
  6.     <br/>
  7.      <div>
  8.         <h4>示例二：图片无限旋转</h4>
  9.         <img id="img2" src="../imgs/safari.png" />
  10.     </div>
  11.      <br/>
  12.       <div>
  13.         <h4>示例三：点击图片旋转</h4>
  14.          <img id="img3" src="../imgs/safari.png" />
  15.     </div>
  16.      <br/>
  17.     <div>
  18.         <h4>示例四：旋转不同角度图片</h4>
  19.         <img id="img4" src="../imgs/sunset.jpg" width="180" height="150"/> <br/><br/><br/>
  20.         <input type="button" value="顺时针旋转90度" onClick="ImgRotate(0)"/> <br/><br/>
  21.         <input type="button" value="逆时针旋转90度" onClick="ImgRotate(1)"/> <br/><br/>
  22.         <input type="button" value="顺时针旋转180度" onClick="ImgRotate(2)"/><br/><br/>
  23.         <input type="button" value="顺时针旋转270度" onClick="ImgRotate(3)"/><br/><br/>
  24.     </div>
  25.  
  26. </body>

4、js脚本

  1. <script>
  2.     $(function(){    
  3.  
  4.         //示例三：点击图片旋转角度（这段js放在示例一后面没有效果，暂不知原因）
  5.         var value = 0;
  6.         $("#img3").rotate({
  7.           bind:
  8.           {
  9.             click: function(){
  10.               value +=90;
  11.               $(this).rotate({ animateTo:value})
  12.             }
  13.           }
  14.         });
  15.  
  16.         //示例一: 鼠标滑过旋转图片
  17.         $("#img1").rotate({
  18.           bind:{
  19.             mouseover : function() {
  20.                 $(this).rotate({animateTo:180});
  21.           },
  22.           mouseout : function() {
  23.                 $(this).rotate({animateTo:0});
  24.             }
  25.           }
  26.         });
  27.  
  28.         //示例二：图片无限旋转
  29.         var angle = 0;
  30.         setInterval(function(){
  31.             angle+=3;
  32.               $("#img2").rotate(angle);
  33.           },10);
  34.         });
  35.  
  36.         //示例四：图片旋转不同角度
  37.         var ImgRotate = function(i){
  38.             switch(i)
  39.             {
  40.                 case 0:
  41.                     $('#img4').rotate(90);
  42.                     break;
  43.                 case 1:
  44.                     $('#img4').rotate(-90);
  45.                     break;
  46.                 case 2:
  47.                     $('#img4').rotate(180);
  48.                     break;
  49.                 case 3:
  50.                     $('#img4').rotate(270);
  51.                     break;
  52.             }
  53.         }
  54.  
  55. </script>

5、实现的效果

1）鼠标滑过旋转图片

2）图片无限旋转

3）点击图片旋转

4）图片旋转不同角度

jquery+jquery.rotate实现图片旋转效果的更多相关文章

  1. jQuery旋转插件jqueryrotate 图片旋转

    "jquery.rotate.min.js"是jQuery旋转rotate插件,支持Internet Explorer 6.0+ .Firefox 2.0 .Safari 3 .O ...

  2. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  3. jQuery实现鼠标经过图片变亮效果

    在线体验效果:http://hovertree.com/texiao/jquery/1.htm 以下是完整源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  4. Adobe Edge Animate –解决图形边缘精确检测问题-通过jquery加载svg图片

    Adobe Edge Animate –解决图形边缘精确检测问题-通过jquery加载svg图片 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在edge ...

  5. jQuery.hhLRSlider 左右滚动图片插件

    /**  * jQuery.hhLRSlider 左右滚动图片插件  * User: huanhuan  * QQ: 651471385  * Email: th.wanghuan@gmail.com ...

  6. 使用jQuery来检测远程图片文件是否存在

    使用jQuery来检测远程图片文件是否存在 最近为我的憨豆人笑园添加图片功能时,遇到了这个问题,用户可以填写一个远程的图片地址,也可以上传一个本地图片.为了不浪费服务器的资源,我们需要在客户端先对用户 ...

  7. 使用jquery获取网页中图片的高度——解惑

    jQuery获取网页中图片的高度 使用jquery获取网页中图片的高度其实很简单,有两种常用的方法都可以打到我们的目的 $("img").whith();(返回纯数字) $(&qu ...

  8. 基于jQuery带标题的图片3D切换焦点图

    今天给大家分享一款基于jQuery带标题的图片3D切换焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 实现的代码. htm ...

  9. 基于jQuery可悬停控制图片轮播代码

    基于jQuery可悬停控制图片轮播代码.这是一款可悬停切换全屏轮播jQuery幻灯片.效果图如下: 在线预览   源码下载 实现的代码: <!-- 轮播广告 --> <div id= ...

随机推荐

  1. 深入理解Java虚拟机3-chap4-5-斗之气10段

    一.虚拟机性能监控与故障处理 1.JDK的命令行工具:对jdk/lib/tools.jar的薄包装,Linux下可能是Shell编写,执行类似于Linux中的命令 2.可视化工具JConsole 打开 ...

  2. Cisco Packet Tracer

    ---恢复内容开始--- 1.简单局域网组建 交换机:2960  s1 终端设备:generic  pc 配置 pc1    单击>>Descktop>>IP configur ...

  3. Oracle 26表空间的管理

    一．查看用户表空间 熟悉与表空间相关的数据字典 查看用户的表空间 相关的数据字典:(用于查询数据库信息的数据库表)dba_tablespaces (管理员级别的表空间的描述信息) User_table ...

  4. Software Testing 3

    Questions: • 7. Use the following method printPrimes() for questions a–d. 基于Junit及Eclemma(jacoco)实现一 ...

  5. SpringMvc HandlerMappings 何时初始化？

    SpringMvc 的转发控制器 DispatcherServlet 执行 initStrategies(),在什么时候初始化 HandlerMappings ? 在容器 AbstractApplic ...

  6. 移动端长按响应事件以及阻止默认行为e.preventDefault()导致定时器setTimeout不能响应

    手指触摸绑定: $(document).on('touchstart', '.photo', function(e){ currentIndex = parseInt($(this).index('. ...

  7. 0.2：Game and Art

    文章著作权归作者所有.转载请联系作者,并在文中注明出处,给出原文链接. 本系列原更新于作者的github博客,这里给出链接. 通过上一节的学习,我们对游戏美术和游戏开发已经有了比较基本的了解.那么,该 ...

  8. Docker 介绍及安装

    Docker介绍 Docker采用 C/S架构 Docker daemon 作为服务端接受来自客户的请求,并处理这些请求(创建.运行.分发容器). Docker基于go语言并遵从Apache2.0协议 ...

  9. Python Redis 管道

    redis-py默认在执行每次请求都会创建(连接池申请连接)和断开(归还连接池)一次连接操作,如果想要在一次请求中指定多个命令,则可以使用pipline实现一次请求指定多个命令,并且默认情况下一次pi ...

  10. mvc 之 学习地址

    https://blog.csdn.net/mss359681091/article/details/52135861