标签:html css javascript
首先我想说关于网页中做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样式,就是直接把网站的地址当做链接,比如(建议大家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>
利用类标签的方法,在标签中插入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>
然而对于这个css抖动样式表我们有好多种不同的抖动样式,我用代码为大家展示
导入了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代码被包在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>
这个标签显示了一个输入框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>
css+javascript网页抖动图标、抖动制作教程,输入抖动命令js执行命令让网页抖动起来(详细版)
标签:html css javascript
原文地址:http://blog.csdn.net/qq_24928451/article/details/44836393