Jquery控件jrumble
<!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的更多相关文章
- 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库（MVC5+EF6）
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
- jQuery控件有所感悟
两种写法对比: 第一种: ;(function($){ $.fn.myplugin = function(op,params){ if (typeof op == 'string'){ return ...
- jquery控件的学习
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Tag It 一款 Jquery控件，当你在文本框中输入逗号时，自动帮你分隔开相关内容
Demo地址:http://webspirited.com/tagit/ 使用方法: 除了JQuery脚本外,下面的脚本也是必须的,这些脚本你都可以去GitHub下载:https://github.c ...
- jQuery控件之分页控件-- kkpager v1.3使用简介
js分页展示控件,传入简单参数就能使用的分页效果控件 在线测试链接: http://pgkk.github.io/kkpager/example/pager_test.html http://pgkk ...
- [JS] jquery控件基本要点备份
(1)CDN Google CDN:<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min. ...
- Jquery 控件
1. Jeditable 2. Select2 3. superfish 4. Jquery file upload https://blueimp.github.io/jQuery-File-Upl ...
- fineuploader 上传jquery 控件
fineuploader 昨天用的一个jquery插件. 可参考这篇文章以前写的 file-uploader 跟 这个跟里面介绍的2个jquery 插件相比.觉得更强大写..版本号都3.9 了….. ...
- jquery控件-实现自定义样式的弹出窗口和确认框（转）
(function () { $.MsgBox = { Alert: function (title, msg) { GenerateHtml("alert", title, ms ...
随机推荐
- Laravel源码解析之从入口开始
前言 提升能力的方法并非使用更多工具,而是解刨自己所使用的工具.今天我们从Laravel启动的第一步开始讲起. 入口文件 laravel是单入口框架,所有请求必将经过index.php define( ...
- VUE：渐进式JavaScript框架（小白自学）
VUE:渐进式JavaScript框架 一.官网 英文 https://vuejs.org/ 中文 https://cn.vuejs.org/ 二:渐进式 即有一个核心库,在需要的时候再逐渐添加插件的 ...
- js特效——自动滚动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 关于thinkpadU盘系统盘启动不了解决方法
http://www.laomaotao.org/softhelp/bios/382.html(原文章地址,比较全面) thinkpad笔记本uefi无法启动详细解决教程 最近有个别用户反映说thin ...
- [Google Guava] 2.2-新集合类型
转自:并发编程网 原文链接:http://ifeve.com/google-guava-newcollectiontypes/ 链接博客其他文章中还有更多的guava其他功能的描述,有空可慢慢看. G ...
- XP单机版安装金蝶K3的13.1版本号，金蝶K3Wise安装步骤，安装成功
在我们安装金蝶K3时往往会出现各种报错.主要是由于我们的Windows Xp操作系统是Ghost版本号.或者是windows XP HOME或者是精简版,因此某些组件在系统里没有.导致我们安装金蝶K3 ...
- postMan模拟get和post请求，支持局域网和外网
chrome应用postMan,可以安装一下,非常方便. 可以FQ下载安装. post参数要在body中设置 get参数直接在url中
- Oracle RAC 实施
第 1 步 — 确定项目范围 理由 我们实施 Oracle RAC 是为了使我们的应用程序可伸缩和高度可用,以及为我们的客户提供更可靠的服务. 目标/可交付产品 该项目的最终产品将是一个新的 Orac ...
- vue 如何实现在函数中触发路由跳转
this.$router.push({path:'/index'}) 欢迎加入前端交流群交流知识&&获取视频资料:749539640 methods:{ click(){ if(dat ...
- Server Tomcat v7.0 Server at localhost failed to start.解决办法（图文详解）
问题描述 Server Tomcat v7.0 Server at localhost failed to start. 解决办法 把你工作空间文件夹下的如下路径打开: <workspace-d ...