<!DOCTYPE HTML>

<html>

 <head>

  <title>demo.html</title>

  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <link rel="stylesheet" href="css/style.css" />

  <link rel="stylesheet" href="css/prettify.css" />

  <script src="js/jquery-1.7.2.min.js"></script>

  <script src="js/jquery.jrumble.1.3.min.js"></script>

  <script src="js/prettify.js"></script>

  <script type="text/javascript">

   $(function(){

    /*========================================================*/

    /* Ranges

    /*========================================================*/

    $('#demo1').jrumble({

     x: 2,

     y: 2,

     rotation: 1

    });

    

    $('#demo2').jrumble({

     x: 10,

     y: 10,

     rotation: 4

    });

    

    $('#demo3').jrumble({

     x: 4,

     y: 0,

     rotation: 0

    });

    

    $('#demo4').jrumble({

     x: 0,

     y: 0,

     rotation: 5

    });

    

    $('#demo1, #demo2, #demo3, #demo4').hover(function(){

     $(this).trigger('startRumble');

    }, function(){

     $(this).trigger('stopRumble');

    });

   });

  </script>

 </head>

<body onLoad="prettyPrint()">

 <div id="content">

  <div class="demo-box">

   <h4>x: 2<br/>y: 2<br/>rotation: 1</h4>

   <div id="demo1">1</div>

  </div>

  <div class="demo-box">

   <h4>x: 10<br/>y: 10<br/>rotation: 4</h4>

   <div id="demo2">2</div>

  </div>

  

  <div class="demo-box">

   <h4>x: 4<br/>y: 0<br/>rotation: 0</h4>

   <div id="demo3">3</div>

  </div>

  

  <div class="demo-box last">

   <h4>x: 0<br/>y: 0<br/>rotation: 5</h4>

   <div id="demo4">4</div>

  </div>

 </div>

 </body>

</html>

Jquery控件jrumble的更多相关文章

  1. 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库(MVC5+EF6)

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  2. jQuery控件有所感悟

    两种写法对比: 第一种: ;(function($){ $.fn.myplugin = function(op,params){ if (typeof op == 'string'){ return ...

  3. jquery控件的学习

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. Tag It 一款 Jquery控件,当你在文本框中输入逗号时,自动帮你分隔开相关内容

    Demo地址:http://webspirited.com/tagit/ 使用方法: 除了JQuery脚本外,下面的脚本也是必须的,这些脚本你都可以去GitHub下载:https://github.c ...

  5. jQuery控件之分页控件-- kkpager v1.3使用简介

    js分页展示控件,传入简单参数就能使用的分页效果控件 在线测试链接: http://pgkk.github.io/kkpager/example/pager_test.html http://pgkk ...

  6. [JS] jquery控件基本要点备份

    (1)CDN Google CDN:<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min. ...

  7. Jquery 控件

    1. Jeditable 2. Select2 3. superfish 4. Jquery file upload https://blueimp.github.io/jQuery-File-Upl ...

  8. fineuploader 上传jquery 控件

    fineuploader 昨天用的一个jquery插件. 可参考这篇文章以前写的 file-uploader  跟 这个跟里面介绍的2个jquery 插件相比.觉得更强大写..版本号都3.9 了….. ...

  9. jquery控件-实现自定义样式的弹出窗口和确认框(转)

    (function () { $.MsgBox = { Alert: function (title, msg) { GenerateHtml("alert", title, ms ...

随机推荐

  1. CRM系统 - 总结 (一) 权限

    1. 问:为什么程序需要权限控制? 答:生活中的权限限制,① 看灾难片电影<2012>中富人和权贵有权登上诺亚方舟,穷苦老百姓只有等着灾难的来临:② 屌丝们,有没有想过为什么那些长得漂亮身 ...

  2. Hash大法

    内容参考<算法竞赛进阶指南> 之前集训的时候听老师讲过,字符串题目中,hash一般不是正解,但是是一个优秀的暴力,可以拿比较多的部分分. hash涉及内容很多,这里只讨论字符串hash 可 ...

  3. linux文件与用户和群组

    文件基本属性 在图片中alogrithm的文件属性为drwxrwxr-x,其中d代表此文件为目录. 后面rwx,rwx,r-x分别代表文件所属者(ower),组(group),其他用户(other)的 ...

  4. npm API文档

    npm API文档 https://docs.npmjs.com/

  5. poj3071之概率DP

    Football Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 2667   Accepted: 1361 Descript ...

  6. android:异步任务asyncTask介绍及异步任务下载图片(带进度条)

    为什么要用异步任务? 在android中仅仅有在主线程才干对ui进行更新操作.而其他线程不能直接对ui进行操作 android本身是一个多线程的操作系统,我们不能把全部的操作都放在主线程中操作 .比方 ...

  7. nyoj--90--整数划分(母函数)

    整数划分 时间限制:3000 ms  |  内存限制:65535 KB 难度:3 描述 将正整数n表示成一系列正整数之和:n=n1+n2+-+nk,  其中n1≥n2≥-≥nk≥1,k≥1.  正整数 ...

  8. Python 异常(Exception)

    1. 字符串为构造函数的参数 >> raise Exception('hyperdirve overload') Exception Traceback (most recent call ...

  9. Ubuntu 18.04 关闭GUI

    在安装显卡驱动时, 可能需要关闭GUI, 在终端中输入: sudo service gdm3 stop

  10. 移动端fixed后 横竖屏切换时上部或下部出现空隙问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...