jquery窗口震动特效js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery窗口震动特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jquery窗口震动特效</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jshaker.js"></script>

<script type="text/javascript">
	$(document).ready(function(){
	   $('.block').click(function(){
	       $(this).jshaker();
	   });
	});
</script>
<style type="text/css">
    #content .block {
        float: left;
        border: 1px solid #CCCCCC;
        background: #F0F0F0;
        padding: 10px;
        margin: 10px;
        width: 300px;        
    }
</style>

</head>
<body>

    <div id="page">
        <h1>jquery窗口震动特效</h1>
        <p>Click any block to shake it ;)</p>
        <div id="content">
            <div class="block">
				<p><strong>Duo ne laudem essent feugait, nonumy delenit legendos usu id.</strong> <span>Usu timeam invenire moderatius cu,</span> cum tale harum alterum ne, an pro senserit euripidis efficiendi. <span>Lorem ipsum vix ad albucius maluisset rationibus, mea eirmod</span> eleifend repudiare et.</p> 
				<p>Ferri albucius appareat pro id, <span>qui aliquam feugait quaestio eu,</span> ne pri natum docendi voluptatum. <em>Cu tale atomorum laboramus usu, summo causae iriure cu pri.</em></p>
				<p>Pro facer audiam vituperatoribus ei, mea liber pertinax mediocritatem eu, <span>qui ut vituperatoribus option malis.</span> <span>Nisl eligendi recusabo sed in, ut sint veri efficiendi mel.</span></p> 
            </div>
            <div class="block">
                <p>Idque atqui convenire quo et, vel justo civibus explicari no. Idque atqui convenire quo et, vel justo civibus explicari no. Te clita doctus facilis ius, vix movet nonummy luptatum an.</p>
                <p>Ferri albucius appareat pro id, qui aliquam feugait quaestio eu, ne pri natum docendi voluptatum. Cu tale atomorum laboramus usu, summo causae iriure cu pri.</p>
            </div>
            <div class="block">
                <p>Ullum alienum accusata an nam, ea per stet altera scaevola, nostro appareat comprehensam eam ea. Mel quod ipsum appetere ea, ex vis quod amet idque.</p>
                <ul>
                    <li>Item 1</li>
                    <li>Item 2</li>
                    <li>
                        Item 3
                        <ul>
                            <li>Sub Item 1</li>
                            <li>Sub Item 2</li>
                            <li>Sub Item 3</li>
                            <li>Sub Item 4</li>
                            <li>Sub Item 5</li>
                        </ul>
                    </li>
                    <li>Item 4</li>
                    <li>Item 5</li>
                </ul>
            </div>
            <div class="block">
                <form action="#">
                    <p>
                        <label for="inp1">Text Field 1:</label>
	                    <input type="text" name="inp1" id="inp1" value="" />                    
                    </p>
                    <p>
                        <label for="inp2">Text Field 2:</label>
	                    <input type="text" name="inp2" id="inp2" value="" />                    
                    </p>
                    <p>
                        <button type="submit">Submit</button>
                    </p>
                </form>
            </div>
        </div>
        <p class="script-link">
        </p>
    </div>
</body>
</html>

JS代码(jshaker.js):

/*jShaker jQuery Plugin(C)2010 ajaxBlender.comFor any questions please visit www.ajaxblender.comor email us at support@ajaxblender.com*/
;
	(function($){
	var element ={
}
;
	$.fn.jshaker = function(){
	element = $(this);
	element.css('position','relative');
	element.find('*').each(function(i,el){
	$(el).css('position','relative');
}
);
	var iFunc = 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);
}
);
	var iFunc = function(){
	$.fn.jshaker.animate(el);
}
;
	setTimeout(iFunc,50);
}
$.fn.jshaker.shake = function(el){
	var pos = $(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);

CSS代码(main.css):

/*jClip jQuery Plugin� 2009 ajaxBlender.com*/
BODY{font-family:"Lucida Grande",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:3px solid #CCCCCC;background:#F0F0F0;padding:10px;width:500px;}
P.script-link{clear:both;padding:10px 0;border-top:1px dotted #CCCCCC;}

附件:下载该文件资源,减少时间成本(增值服务)