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>