Implementierung des Div-Fenstervibrations-Spezialeffektcodes basierend auf jQuery

Heim

Web-Frontend

js-Tutorial

Implementierung des Div-Fenstervibrations-Spezialeffektcodes basierend auf jQuery – einfacher code_jquery

May 16, 2016 pm 03:41 PM

Dies ist ein jQuery-Fenstervibrationseffektcode. Klicken Sie mit der Maus auf den Div-Rahmen und er beginnt zu vibrieren. Anwendbare Browser: IE8, 360, Firefox, Chrome, Opera, Maxthon, Sogou, Window of the World usw.

Die Darstellung ist wie folgt:

Der Code lautet wie folgt:

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; 
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; 
&lt;head&gt; 
&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt; 
&lt;title&gt;jquery窗口震动特效&lt;/title&gt; 
&lt;script type="text/javascript" src="http://www.jb51.net/ajaxjs/jquery-1.6.2.min.js"&gt;&lt;/script&gt; 
&lt;script type="text/javascript"&gt; 
;(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() &gt; 0.5){ 
$(el).css(top, pos[top] + Math.random() * 20 &lt; 10 &#63; (Math.random() * 20 * (-1)) : Math.random() * 20); 
} else { 
$(el).css(left, pos[left] + Math.random() * 20 &lt; 10 &#63; (Math.random() * 20 * (-1)) : Math.random() * 20); 
} 
} 
})(jQuery); 
&lt;/script&gt; 
&lt;script type="text/javascript"&gt; 
$(document).ready(function(){ 
$(.block).click(function(){ 
$(this).jshaker(); 
}); 
}); 
&lt;/script&gt; 
&lt;style type="text/css"&gt; 
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;} 
&lt;/style&gt; 
&lt;/head&gt; 
&lt;body&gt; 
&lt;div id="page"&gt; 
&lt;h1&gt;jquery窗 口 震 动 特 效&lt;/h1&gt; 
&lt;div id="content"&gt; 
&lt;div class="block"&gt; 
&lt;p&gt;点击本框内，可实现震动&lt;/p&gt; 
&lt;ul&gt; 
&lt;li&gt;Item 1&lt;/li&gt; 
&lt;li&gt;Item 2&lt;/li&gt; 
&lt;li&gt; 
Item 3 
&lt;ul&gt; 
&lt;li&gt;Sub Item 1&lt;/li&gt; 
&lt;li&gt;Sub Item 2&lt;/li&gt; 
&lt;li&gt;Sub Item 3&lt;/li&gt; 
&lt;li&gt;Sub Item 4&lt;/li&gt; 
&lt;li&gt;Sub Item 5&lt;/li&gt; 
&lt;/ul&gt; 
&lt;/li&gt; 
&lt;li&gt;Item 4&lt;/li&gt; 
&lt;li&gt;Item 5&lt;/li&gt; 
&lt;/ul&gt; 
&lt;/div&gt; 
&lt;div class="block"&gt; 
&lt;form action="#"&gt; 
&lt;p&gt;&lt;label for="inp1"&gt;Text Field 1:&lt;/label&gt;&lt;input type="text" name="inp1" id="inp1" value="" /&gt;&lt;/p&gt; 
&lt;p&gt;&lt;label for="inp2"&gt;Text Field 2:&lt;/label&gt;&lt;input type="text" name="inp2" id="inp2" value="" /&gt;&lt;/p&gt; 
&lt;p&gt;&lt;button type="submit"&gt;Submit&lt;/button&gt;&lt;/p&gt; 
&lt;/form&gt; 
&lt;/div&gt; 
&lt;/div&gt; 
&lt;p class="script-link"&gt; 
&lt;/p&gt; 
&lt;/div&gt; 
&lt;/body&gt; 
&lt;/html&gt;

Nach dem Login kopieren

Der obige Code ist sehr einfach. Der spezielle Effekt der Div-Fenstervibration basiert auf JQuery. Beeilen Sie sich und laden Sie ihn herunter.

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn