To achieve this goal, we need to use Jquery and Jquery UI.
First, let me create a vibration block, which can be an image or a common dom element, such as div and span. Name the element id as shake, which can be any name here.
We use the following picture:Copy codeThe Code is as follows:
Jquery UI has no ready-made method to shake elements. We need to use the effect method. The syntax is as follows:Copy codeThe Code is as follows: effect ('shake ', options, speed );
Parameter options (three parameters are provided here ):
• Times: specifies the number of element vibrations
• Distance: Specifies the vibration amplitude of an element.
• Direction: Specifies the direction of element vibration.
The specific implementation method is as follows:Copy codeThe Code is as follows: function interval (){
$ ('# Shake'). effect ('shake ', {times: 3}, 100 );
}
$ (Document). ready (function (){
Var shake = setInterval (interval, 500 );
});
<Script src = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"> </script>
The latest version is introduced here.
Complete code is attached below Copy codeThe Code is as follows: <Head>
<Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> </script>
<Script src = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"> </script>
<Script>
Function interval (){
$ ('# Shake'). effect ('shake ', {times: 3}, 100 );
}
$ (Document). ready (function (){
Var shake = setInterval (interval, 500 );
});
</Script>
<Style>
. Body {
Background: # F9F9F9;
}
H1 {
Text-align: center;
Top: 30px;
Position: relative;
Font-size: 36px;
Line-height: 40px;
Margin: 0;
Position: relative;
Font-weight: 300;
Color: # C91622;
Padding: 5px 0px;
Text-shadow: 1px 1px 0px # F2F2F2, 1px 2px 0px # B1B1B2;
Font-family: 'kenyancoffeerg-Regular ';
Height: 70px;
}
. Container {
Display: table;
Width: 50%;
Border-collapse: collapse;
Margin: 0 auto;
}
. Container img {
Width: 253px;
}
</Style>
<Title> jQuery Shake Effect </title>
</Head>
<Body>
<H1> jQuery Shake Effect <Br/>
<Div class = "container">
</Div>
</Body>
</Html>
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
