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

1、下载地址：

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

2、导入文件

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

<script type="text/javascript" src="../js/jQueryRotate.js"></script>

3、html界面

<body>

    <div>

        <h4>示例一：鼠标滑过旋转图片</h4>

        <img id="img1" src="../imgs/safari.png" />

    </div>

    <br/>

     <div>

        <h4>示例二：图片无限旋转</h4>

        <img id="img2" src="../imgs/safari.png" />

    </div>

     <br/>

      <div>

        <h4>示例三：点击图片旋转</h4>

         <img id="img3" src="../imgs/safari.png" />

    </div>

     <br/>

    <div>

        <h4>示例四：旋转不同角度图片</h4>

        <img id="img4" src="../imgs/sunset.jpg" width="180" height="150"/> <br/><br/><br/>

        <input type="button" value="顺时针旋转90度" onClick="ImgRotate(0)"/> <br/><br/>

        <input type="button" value="逆时针旋转90度" onClick="ImgRotate(1)"/> <br/><br/>

        <input type="button" value="顺时针旋转180度" onClick="ImgRotate(2)"/><br/><br/>

        <input type="button" value="顺时针旋转270度" onClick="ImgRotate(3)"/><br/><br/>

    </div>

</body>

4、js脚本

<script>

    $(function(){    

        //示例三：点击图片旋转角度（这段js放在示例一后面没有效果，暂不知原因）

        var value = 0;

        $("#img3").rotate({

          bind:

          {

            click: function(){

              value +=90;

              $(this).rotate({ animateTo:value})

            }

          }

        });

        //示例一: 鼠标滑过旋转图片

        $("#img1").rotate({

          bind:{

            mouseover : function() {

                $(this).rotate({animateTo:180});

          },

          mouseout : function() {

                $(this).rotate({animateTo:0});

            }

          }

        });

        //示例二：图片无限旋转

        var angle = 0;

        setInterval(function(){

            angle+=3;

              $("#img2").rotate(angle);

          },10);

        });

        //示例四：图片旋转不同角度

        var ImgRotate = function(i){

            switch(i)

            {

                case 0:

                    $('#img4').rotate(90);

                    break;

                case 1:

                    $('#img4').rotate(-90);

                    break;

                case 2:

                    $('#img4').rotate(180);

                    break;

                case 3:

                    $('#img4').rotate(270);

                    break;

            }

        }

</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. Cartographer源码阅读(5)：PoseGraph位姿图

    PoseGraph位姿图 mapping2D::PoseGraph类的注释: // Implements the loop closure method called Sparse Pose Adju ...

  2. 25个SSH命令

    OpenSSH是SSH连接工具的免费版本.telnet,rlogin和ftp用户可能还没意识到他们在互联网上传输的密码是未加密的,但SSH是加密的,OpenSSH加密所有通信(包括密码),有效消除了窃 ...

  3. Unity中实现人物平滑转身

    using UnityEngine; public class PlayerController : MonoBehaviour { ; ; ; void Update() { hor = Input ...

  4. word之常用功能

    0.word区域:标题栏.快速访问工具栏.功能区.功能按钮.导航窗口.编辑区.水平垂直滑动条.状态栏 1.更改office主题.文件---帐户---office主题.(传统白色.浅灰色.深灰色) 2. ...

  5. 3.Python3变量与基本数据类型

    3.1保留字和标识符 3.1.1保留字 保留字是Python语言中已经被赋予特定意义的一些单词,开发程序时不可以把保留字作为变量.函数.类.模块和其他对象的名称来使用.保留字如下: 3.1.2标识符 ...

  6. JavaScript 作用域链其实很简单

    概念 作用域链的用途,是保证对执行环境有权访问的所有变量和函数的有序访问.其本质就是一个指向变量对象的指针列表.在js中,当某个函数被调用时,会创建一个执行环境(execution context)及 ...

  7. 2017-2018-2 20155303『网络对抗技术』Exp2：后门原理与实践

    2017-2018-2 『网络对抗技术』Exp2:后门原理与实践 --------CONTENTS-------- 1. 后门原理与实践实验说明 2. 常用后门工具 NC或netcat Win获得Li ...

  8. 基于Vue的Quasar Framework 介绍 这个框架UI组件很全面

    基于Vue的Quasar Framework 介绍 这个框架UI组件很全面 基于Vue的Quasar Framework 中文网http://www.quasarchs.com/ quasarfram ...

  9. MVC开发模式的数据运行流程

    对于java中经典的开发模式MVC,有一些感触!现说一下Java中数据的运行流程,由于我技术有限,有错的话欢迎提出,不喜勿喷! 我们知道在MVC开发模式,包括三部分视图层V(view).控制层C(Co ...

  10. Eclipse新建Java工程出现红色感叹号怎么解决？

    安装了新版本的JDK之后,在Eclipse中新建Java工程出现红色感叹号怎么解决? 其实只要在Eclipse中重新设置一下JDK路径就行了 路径:右键Java工程>>Build Path ...