search

Home  >  Article  >  Web Front-end  >  Implementation of Div window vibration special effect code based on jQuery - simple code_jquery

Implementation of Div window vibration special effect code based on jQuery - simple code_jquery

WBOY
WBOYOriginal
2016-05-16 15:41:491331browse

This is a jQuery window vibration effect code. Click the mouse in the Div border and it will start to vibrate. Applicable browsers: IE8, 360, FireFox, Chrome, Opera, Maxthon, Sogou, Window of the World, etc.

The rendering is as follows:

The code is as follows: 

<!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> 
<script type="text/javascript" src="http://www.jb51.net/ajaxjs/jquery-1.6.2.min.js"></script> 
<script type="text/javascript"> 
;(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 &#63; (Math.random() * 20 * (-1)) : Math.random() * 20); 
} else { 
$(el).css(left, pos[left] + Math.random() * 20 < 10 &#63; (Math.random() * 20 * (-1)) : Math.random() * 20); 
} 
} 
})(jQuery); 
</script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$(.block).click(function(){ 
$(this).jshaker(); 
}); 
}); 
</script> 
<style type="text/css"> 
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;} 
#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> 
<div id="content"> 
<div class="block"> 
<p>点击本框内，可实现震动</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>

The above code is very simple. The special effect of div window vibration is created based on jquery. Friends, hurry up and download it.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jquery clothes color selection plug-in effect code sharing_jqueryNext article：jquery clothes color selection plug-in effect code sharing_jquery

Related articles

See more