css+javascript网页抖动图标、抖动制作教程，输入抖动命令js执行命令让网页抖动起来（详细版）

浏览数：16 / 时间：2015年06月08日

首先我想说关于网页中做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内容相同

接下来介绍

这个标签表示提交框 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>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

css+javascript网页抖动图标、抖动制作教程，输入抖动命令js执行命令让网页抖动起来（详细版）