<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
<title>jquery窗口震动特效</title>
<scripttype="text/javascript"src="https://www.nhooo.com/ajaxjs/jquery-1.6.2.min.js"></script>
<scripttype="text/javascript">
;(function($){
varelement={};
$.fn.jshaker=function(){
element=$(this);
element.css('position','relative');
element.find('*').each(function(i,el){
$(el).css('position','relative');
});
variFunc=function(){$.fn.jshaker.animate($(element));};
setTimeout(iFunc,50);
};
$.fn.jshaker.animate=function(el){
$.fn.jshaker.shake(el);
el.find('*').each(function(i,el){
$.fn.jshaker.shake(el);
});
variFunc=function(){$.fn.jshaker.animate(el);};
setTimeout(iFunc,50);
}
$.fn.jshaker.shake=function(el){
varpos=$(el).position();
if(Math.random()>0.5){
$(el).css('top',pos['top']+Math.random()*20<10?(Math.random()*20*(-1)):Math.random()*20);
}else{
$(el).css('left',pos['left']+Math.random()*20<10?(Math.random()*20*(-1)):Math.random()*20);
}
}
})(jQuery);
</script>
<scripttype="text/javascript">
$(document).ready(function(){
$('.block').click(function(){
$(this).jshaker();
});
});
</script>
<styletype="text/css">
BODY{font-family:"LucidaGrande",Arial,Helvetica,sans-serif;color:#666666;font-size:12px;background:#FFFFFF;}
A{color:#0A8ECC;}
A:HOVER{text-decoration:none;color:#8FCB2F;}
H1{font-weight:normal;color:#0A8ECC;margin:0;padding:0;}
BODY{margin:20px;padding:20px;}
STRONG{color:#000000;}
.vspacer{height:20px;}
PRE.code{padding:7px;background:#777777;color:#F0F0F0;width:400px;overflow:auto;}
#content-area{border:3pxsolid#CCCCCC;background:#F0F0F0;padding:10px;width:500px;}
P.script-link{clear:both;padding:10px0;border-top:1pxdotted#CCCCCC;}
#content.block{float:left;border:1pxsolid#CCCCCC;background:#F0F0F0;padding:10px;margin:10px;width:300px;}
</style>
</head>
<body>
<divid="page">
<h1>jquery窗口震动特效</h1>
<divid="content">
<div>
<p>点击本框内，可实现震动</p>
<ul>
<li>Item1</li>
<li>Item2</li>
<li>
Item3
<ul>
<li>SubItem1</li>
<li>SubItem2</li>
<li>SubItem3</li>
<li>SubItem4</li>
<li>SubItem5</li>
</ul>
</li>
<li>Item4</li>
<li>Item5</li>
</ul>
</div>
<div>
<formaction="#">
<p><labelfor="inp1">TextField1:</label><inputtype="text"name="inp1"id="inp1"value=""/></p>
<p><labelfor="inp2">TextField2:</label><inputtype="text"name="inp2"id="inp2"value=""/></p>
<p><buttontype="submit">Submit</button></p>
</form>
</div>
</div>
<p>
</p>
</div>
</body>
</html>
