zoukankan      html  css  js  c++  java
  • jquery图片3D旋绕效果 rotate3Di的操作


    这是一个图片效果,很简单实用,只需要一个"rotate3Di.js"的插件就行,

    关于rotate的用法有如下几种:

    $(选择器).rotate3Di(30); //把图片3D旋转30度

    $(选择器).rotate3Di(180, 1000);//经过1s把图片3D顺时针旋转180度

    $(选择器).rotate3Di('-=180', 1000);//每过1s把图片3D逆时针旋转180度

    $(选择器).rotate3Di('flip', 1000);//经过1s把图片逆时针旋转180度

    $(选择器).rotate3Di('unflip', 1000);//与'flip'连用

    $(this).rotate3Di('toggle', 1000);//相当于'flip'和'unflip'连用

    下面是一段鼠标移过时和移走时图片3D旋转的一段代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    </head>

    <body>
    <div class="iii" style="500px;height:400px;background:red;" class="iii">
    <img src="images/0.jpg" name="imge1" class="ii" alt="" />
    </div>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="rotate3Di.js"></script>
    <script type="text/javascript">
    $(".iii").mouseover(function(){
    $(".ii").stop().rotate3Di(180,1000);
    });
    $(".iii").mouseout(function(){
    $(".ii").stop().rotate3Di(0,1000);
    });
    </script>
    </body>
    </html>

  • 相关阅读:
    GridView 内部添加控件
    TreeList获取选中内容
    TreeList简介
    TreeList
    DEV—【GridControl 按钮列无法触发点击事件解决方案】
    dev 多行文本 MemoEdit
    DevExpress控件使用小结
    DEV常用设置
    DEV常用设置
    documentManager1注意事项
  • 原文地址:https://www.cnblogs.com/lurensang/p/5372784.html
Copyright © 2011-2022 走看看