css+javascript網頁抖動圖示、抖動製作教程，輸入抖動命令js執行命令讓網頁抖動起來（詳細版）
阿新 • • 發佈：2019-02-18
首先我想說關於網頁中做css抖動不難，用js命令也不難，下面我將為大家詳細介紹具體做法。
一、我們要先有個網頁程式碼的基本架構，比如
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>抖動網頁的基本框架</title> </head> <body> <div> <h1>我們先隨便建一點標籤</h1> <p>我們先隨便建一點標籤</p> <span></span> <p>我們先隨便建一點標籤</p> <p>我們先隨便建一點標籤</p> <p>我們先隨便建一點標籤</p> <span></span> </div> </body> </html>
二、為了使我們的抖動更加明顯我們可以在網頁中插入幾張圖片，比如
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>抖動網頁的基本框架</title> </head> <body> <div> <h1>我們先隨便建一點標籤</h1> <p>我們先隨便建一點標籤</p> <span><img src="2.jpg" height="100" width="200" alt=""></span> <p>我們先隨便建一點標籤</p> <p>我們先隨便建一點標籤</p> <p>我們先隨便建一點標籤</p> <span><img src="5.jpg" height="100" width="200" alt=""></span> </div> </body> </html>
三、要想產生抖動樣式，css當然是少不了的，css抖動樣式我們可以自己寫，我們也可以直接去網上下載，由於網上大神製作的css抖動樣式比較全面和好玩，我就從網上下載了。 我可以直接把網站的地址給大家。 下載css抖動樣式網站地址：http://elrumordelaluz.github.io/csshake/css/csshake.min.css
大家可以直接把網頁另存為桌面上，到時候就可以直接呼叫css樣式了。但是要注意一點的是要把css樣式和所製作的網頁放在同一個資料夾，也可以都放在電腦桌面上。
要是大家不會下載css樣式，還有另外一種方法，大家可以直接在網上呼叫css樣式，就是直接把網站的地址當做連結，比如（建議大家css樣式下載使用）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抖動網頁的基本框架</title>
<link rel="stylesheet" href="http://elrumordelaluz.github.io/csshake/css/csshake.min.css">
</head>
<body>
<div>
<h1>我們先隨便建一點標籤</h1>
<p>我們先隨便建一點標籤</p>
<span><img src="2.jpg" height="100" width="200" alt=""></span>
<p>我們先隨便建一點標籤</p>
<p>我們先隨便建一點標籤</p>
<p>我們先隨便建一點標籤</p>
<span><img src="5.jpg" height="100" width="200" alt=""></span>
</div>
</body>
</html>四、當連結好了css抖動樣式後，我們就可以在網頁中呼叫css樣式了，下面我先為大家介紹一下怎麼呼叫css樣式的一種方法
利用類標籤的方法，在標籤中插入class類標籤導用抖動樣式比如可以這樣<h1 class="shake">我們先隨便建一點標籤</h1>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抖動網頁的基本框架</title>
<link rel="stylesheet" href="http://elrumordelaluz.github.io/csshake/css/csshake.min.css">
</head>
<body>
<div>
<h1 class="shake">我們先隨便建一點標籤</h1>
<p class="shake">我們先隨便建一點標籤</p>
<span class="shake"><img src="2.jpg" height="100" width="200" alt=""></span>
<p class="shake">我們先隨便建一點標籤</p>
<p class="shake">我們先隨便建一點標籤</p>
<p class="shake">我們先隨便建一點標籤</p>
<span class="shake"><img src="5.jpg" height="100" width="200" alt=""></span>
</div>
</body>
</html>一般雙標籤內都可以插入class類標籤，導用抖動樣式。在這裡我們要注意一點：當我們在那個標籤插入class類抖動樣式時，那個標籤所產生的網頁就會產生抖動的效果。
然而對於這個css抖動樣式表我們有好多種不同的抖動樣式，我用程式碼為大家展示
<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>
<div class="shake shake-crazy"></div>一共有九種。
匯入了css抖動樣式後你的網頁坑定就會產生抖動了。
五、要是想讓你的網頁更加高大上的話，當然少不了js這一部分吧。
要想產生js命令，首先要先在你想要命令的區域塊內定義一個id，比如
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抖動網頁的基本框架</title>
<link rel="stylesheet" href="csshake.min.css">
</head>
<body>
<div id="a">
<h1 class="shake">我們先隨便建一點標籤</h1>
<p class="shake">我們先隨便建一點標籤</p>
<span class="shake"><img src="2.jpg" height="100" width="200" alt=""></span>
<p class="shake">我們先隨便建一點標籤</p>
<p class="shake">我們先隨便建一點標籤</p>
<p class="shake">我們先隨便建一點標籤</p>
<span class="shake"><img src="5.jpg" height="100" width="200" alt=""></span>
</div>
</body>
</html>然後就是設定有關js樣式，程式碼不難。
js程式碼被包在script標籤內
我們要產生的效果就是在命令框內輸入抖動指令，讓網頁執行命令，讓原本不抖的網頁抖動起來。
主要涉及到的屬性標籤有input onclick onchange
先將程式碼展示再解釋吧
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抖動網頁的基本框架</title>
<link rel="stylesheet" href="http://elrumordelaluz.github.io/csshake/css/csshake.min.css">
</head>
<body>
<div id="a">
<h1>我們先隨便建一點標籤</h1>
<p>我們先隨便建一點標籤</p>
<span><img src="2.jpg" height="100" width="200" alt=""></span>
<p>我們先隨便建一點標籤</p>
<p>我們先隨便建一點標籤</p>
<p>我們先隨便建一點標籤</p>
<span><img src="5.jpg" height="100" width="200" alt=""></span>
</div>
<script>
function dou(){
var x=document.getElementById('b').value;
if(x=="抖動"){
var y=document.getElementById('a').className="preview-item big shake shake-hard shake-constant hover-stop";
}
}
</script>
<p>請輸入抖動，網頁即可抖</p>
<input id="b" type="text" onchange="dou()" />
<input type="submit" onclick="dou()"/ >
</body>
</html>我們先介紹這條標籤的意思<input id="b" type="text" onchange="dou()" />
這個標籤顯示了一個輸入框id表示這個輸入框的id，與上面的js命令有關，onchang標籤表示 使用者改變輸入域內容時執行 JavaScript 程式碼 所以後面的等號內容與js內容相同
接下來介紹
<input type="submit" onclick="dou()"/ >
這個標籤表示提交框 onclick 屬性當按鈕被單擊時執行js命令 所以等號後面的內容也與js內容相同
function表示一個函式
var 後面表示定義的變數，後面還有個if函式，起判斷作用 後面的className才是最不可缺少的，這個對物件起命令作用
下面是我另外做的抖動頁面和程式碼
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抖動網頁的基本框架</title>
<link rel="stylesheet" href="csshake.min.css">
</head>
<body>
<div id="a">
<h1>我們先隨便建一點標籤</h1>
<p>我們先隨便建一點標籤</p>
<span><img src="2.jpg" height="100" width="200" alt=""></span>
<p>我們先隨便建一點標籤</p>
<p>我們先隨便建一點標籤</p>
<p>我們先隨便建一點標籤</p>
<span><img src="5.jpg" height="100" width="200" alt=""></span>
</div>
<script>
function dou(){
var x=document.getElementById('b').value;
if(x=="抖動"){
var y=document.getElementById('a').className="preview-item big shake shake-hard shake-constant hover-stop";
}
}
</script>
<p>請輸入抖動，網頁即可抖</p>
<input id="b" type="text" onchange="dou()" />
<input type="submit" onclick="dou()"/ >
</body>
</html>