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>

时间: 2024-08-05 17:44:53

Jquery控件jrumble的相关文章

jQuery控件简易日历表格

jQuery控件简易日历表格代码,jquery表格,jquery插件 ,jquery,日期,时间,日历表格,表格代码,jQuery控件简易日历表格代码是一款较为简单的显示日历的代码,兼容firefox,chrome,ie. 下载地址:http://www.huiyi8.com/sc/6362.html(转载请注明此处)

jQuery控件有所感悟

两种写法对比: 第一种: ;(function($){ $.fn.myplugin = function(op,params){ if (typeof op == 'string'){ return $.fn.myplugin.methods[op](this,params); } //默认参数 var settings = { "text" : "hehe", "color" : "red" } settings = $.e

Jquery控件superfish

<!DOCTYPE html> <html> <head> <title>index.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page&quo

jquery控件的学习

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

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

Demo地址:http://webspirited.com/tagit/ 使用方法: 除了JQuery脚本外,下面的脚本也是必须的,这些脚本你都可以去GitHub下载:https://github.com/hailwood/jQuery-Tagit <link href="~/Content/jquery.tagit.css" rel="stylesheet" /><link href="~/Content/tagit.ui-zendes

jquery控件基本要点备份

(1)CDN Google CDN:<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> Microsoft CDN:<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script> 使用谷歌或微软的 jQue

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

[javascript] view plain copy (function () { $.MsgBox = { Alert: function (title, msg) { GenerateHtml("alert", title, msg); btnOk();  //alert只是弹出消息,因此没必要用到回调函数callback btnNo(); }, Confirm: function (title, msg, callback) { GenerateHtml("conf

精确到秒的JQuery日期控件

项目中需要用到精确到秒的日期控件,到网上搜了一下,发现有一个JQuery控件可以实现该功能---TimerPicker.但是官网上没有提供该控件的完整Demo,而且没有提供汉化包,所以自己汉化了一下,以供需要的朋友参考. 效果图如下: 首先在页面中引用一下库: <link type="text/css" href="css/jquery-ui-1.8.17.custom.css" rel="stylesheet" /> <lin

基于 jQuery 的专业 ASP.NET WebForms/MVC 控件库!

目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策略(MVC5+EF6) [第四篇]ASP.NET MVC快速入门之完整示例(MVC5+EF6) [番外篇]ASP.NET MVC快速入门之免费jQuery控件库(MVC5+EF6) 请关注三石的博客:http://cnblogs.com/sanshi 新建项目 打开VS2015,找到菜单项[文件->