First of all I want to say about the Web page to do CSS jitter is not difficult, with JS command is not difficult, I will give you a detailed introduction to specific practices.
First, we have to have a basic structure of the Web code, such as
<!doctype html>
Second, in order to make our jitter more obvious we can insert a few pictures in the page, such as<!doctype html>
Third, to create a jitter style, CSS is certainly not, CSS jitter style we can write their own, we can also go directly to the online download, due to the online great God made CSS Jitter style more comprehensive and fun, I downloaded from the Internet. I can give you the address of the website directly. Download CSS jitter style Web site address: http://elrumordelaluz.github.io/csshake/css/csshake.min.cssYou can directly save the page as the desktop, then you can call the CSS style directly. However, it is important to note that CSS styles and Web pages are placed in the same folder, and can be placed on the computer desktop.
If you do not download CSS style, there is another way, you can directly call the CSS style online, that is, directly to the site's address as a link, such as (suggest that you use CSS style download)
<!doctype html>
Four, when the CSS jitter style is linked, we can call the CSS style in the Web page, let me first introduce you how to call CSS style of a methodUsing the class label method, insert the class tag-based jitter style into the tag like this
<!doctype html>
A class tag can be inserted into a normal double tag, with a dithering style. Here's one thing to note: When we insert the class jitter style into that tag, the page generated by that tag produces a dithering effect.However, for this CSS jitter style sheet We have a variety of different jitter styles, I use the code to show you
<div class= "Shake Shake-hard" ></div><div class= "Shake Shake-slow" ></div><div class= "Shake Shake-little" ></div><div class= "Shake Shake-horizontal" ></div><div class= "Shake Shake.vertical" ></div><div class= "Shake Shake-rotate" ></div><div class= "Shake Shake-opacity" ></div>A total of nine kinds.<div class= "Shake Shake-crazy" ></div>After you import the CSS jitter style, your Web site will have a shaky setting.
Five, if you want to make your Web page more tall, of course, JS this part of it.
To generate a JS command, first define an ID in the area block you want to command, such as
<!doctype html>
Then is set about the JS style, the code is not difficult.JS code is wrapped within the script tag
The effect we have to make is to enter jitter commands in the command box, so that the Web page executes the command, shaking the original page.
The main property tag involved is the input onclick onchange
Let's explain the code first.
<!doctype html>
Let's first introduce the meaning of this label <input id= "B" type= "text" onchange= "Dou ()"/>This tab shows an input box ID indicating the ID of the input box, which is related to the JS command above, and the Onchang tag indicates that the user executes the JavaScript code when changing the input field content, so the following equals sign content is the same as the JS content .
Next Introduction
<input type= "Submit" onclick= "Dou ()"/>
This tag indicates that the Submit box OnClick property executes the JS command when the button is clicked, so the content after the equals sign is the same as the JS content.
function represents a
var represents a defined variable, followed by an if function, which is the most indispensable classname after judging the function of the object.
Here's my other dithering page and code.
<!doctype html>Css+javascript page jitter icon, jitter Production tutorial, input jitter Command JS Execute command to make Web page jitter (detailed version)
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
