Example of Div window vibration effect implemented by jQuery and jquerydiv window
This article describes the Div window vibration effect implemented by jQuery. Share it with you for your reference. The details are as follows:
This is a jQuery window vibration effect code. Click the mouse in the Div border and it starts to vibrate. Applicable to browsers: IE8, 360, FireFox, Chrome, Opera, aoyou, sogou, and windows of the world.
The running effect 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 window vibration effects </title> <script type =" text/javascript "src =" 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) {comment (elast.css ('position', 'relative ') ;}); var I Func = 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) {detail (elast.css ('top', pos ['top'] + Math. random () * 20 <10? (Math. random () * 20 * (-1): Math. random () * 20);} else {detail (el).css ('left', pos ['left'] + Math. random () * 20 <10? (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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
