<!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. s5pv210 fimc 之 fimc-dev.c

    fimc-dev.c 是Samsung FIMC 设备的V4L2 驱动.上层应用直接操作这个设备,进行capture,图片处理,以及overlay输出 http://blog.csdn.net/cxw ...

  2. (转载)springboot集成httpinvoker的客户端

    原文:https://blog.csdn.net/geanwan/article/details/51505679 由于新项目采用了springboot,需要调用之前远程服务(之前项目用的spring ...

  3. Linux下MySql数据库常用操作

    1.显示数据库 show databases; 2.选择数据库 use 数据库名; 3.显示数据库中的表 show tables; 4.显示数据表的结构 describe 表名; 5.显示表中记录 S ...

  4. 极路由设置共享磁盘密码、跨网访问samba服务

    极路由插上移动硬盘后会自动建立samba服务器,但我们没法去配置哪些盘符需要密码,这样只要在同一个wifi下的电脑都能去访问这些东西了,比较弱智.另外我还想再公司中去读写这个移动硬盘. 设置密码 首先 ...

  5. 【中山市选2010】【BZOJ2467】生成树

    Description 有一种图形叫做五角形圈.一个五角形圈的中心有1个由n个顶点和n条边组成的圈. 在中心的这个n边圈的每一条边同一时候也是某一个五角形的一条边,一共同拥有n个不同的五角形.这些五角 ...

  6. ZOJ 2836

    求不比M大的可以被集合任一个数整除的数的个数.(容斥原理) #include <iostream> #include <cstdio> #include <algorit ...

  7. 15 个经常使用的 SQL Server 高级语法

    1.case-end (详细的值) case后面有值,相当于c#中的switch case 注意:case后必须有条件,而且when后面必须是值不能为条件. -----------------case ...

  8. Java生成验证码_转

    为了防止用户恶意,或者使用软件外挂提交一些内容,就得用验证码来阻止,虽然这个会影响用户体验,但为了避免一些问题很多网站都使用了验证码;今天下午参考文档弄了一个验证码,这里分享一下;这是一个web工程, ...

  9. JAVA设计模式之【迭代器模式】

    迭代器模式 聚合类,聚合对象 电视机遥控器,迭代器,遍历局和对象中的成员 灵活新增遍历方法 将负责遍历数据的方法提取出来,封装到专门的类中,实现数据存储和数据遍历分离.这就是迭代器模式. 灵活性,可扩 ...

  10. MYSQL主从复制搭建及切换操作(GTID与传统)

    结构如下: MYSQL主从复制方式有默认的复制方式异步复制,5.5版本之后半同步复制,5.6版本之后新增GTID复制,包括5.7版本的多源复制. MYSQL版本:5.7.20 操作系统版本:linux ...