1、新建html文档。
2、书写hmtl代码。<div id="btnBox" effext="effext"> <div class="speed"> <span>点击选择效果及速度</span> </div> <ul class="clearfix"> <li effext="normal">正常 : normal</li> <li effext="right" class="effF">近右 : right</li> <li effext="left">近左 : left</li> <li effext="down">近下 : down</li> <li effext="up">近上 : up</li> <li effext="random">随机 : random</li> <li effext="rightBig">远右 : rightBig</li> <li effext="leftBig">远左 : leftBig</li> <li effext="downBig">远下 : downBig</li> <li effext="upBig">远上 : upBig</li> </ul> <div class="speedBtn"> <span style="font-weight: bold;">速度 : </span> <i speed="400">慢</i> <i speed="200" class="speedF">正常</i> <i speed="60">快</i> <i speed="15">极快</i> </div></div><div id="text"></div>
3、书写css代码。body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, img { margin: 0; padding: 0; }body, html { font-size: 16px; font-family: "微软雅黑"; height: 100%; width: 100%; box-sizing: border-box; overflow: hidden; background-size: 100% 100%; background-color: #1F1F1F; color: #FFFFFF; }a { color: #3e3e3e; text-decoration: none; }img, input, button, textarea { border: none; padding: 0; margin: 0; outline-style: none; }ul { list-style: none; }input { padding-top: 0; padding-bottom: 0; font-family: "SimSun", "宋体"; }/*去掉行内替换元素空白缝隙*/img { border: 0; vertical-align: middle; }h1, h2, h3, h4, h5, h6 { text-decoration: none; font-weight: normal; font-size: 100%; }s, i, em, u { font-style: normal; text-decoration: none; }.fl { float: left; }.fr { float: right; }/*清除浮动*/.clearfix:before, .clearfix:after { content: ""; display: table; }.clearfix:after { clear: both; }.clearfix { *zoom: 1;/*IE/7/6*/}#btnBox { text-align: center; margin-top: 30px; }#btnBox .speed { font-size: 18px; color: #ff4747; font-weight: bold; }#btnBox ul { display: inline-block; }#btnBox ul li { float: left; padding: 14px 0; background-color: rgba(93,207,255,0.7); width: 18%; margin: 5px; border-radius: 5px; -webkit-box-shadow: 2px 2px 2px 2px rgba(64, 116, 153, 0.7); -moz-box-shadow: 2px 2px 2px 2px rgba(57, 114, 148, 0.7); box-shadow: 2px 2px 2px 2px rgba(59, 127, 157, 0.7); cursor: pointer; }#btnBox ul .effF { background-color: rgba(26,187,255,0.9); }#btnBox .speedF { color: #c15404; }#btnBox .speedBtn { position: absolute; left: 50%; -webkit-transform: translate(-50%, 0%); -moz-transform: translate(-50%, 0%); -ms-transform: translate(-50%, 0%); -o-transform: translate(-50%, 0%); transform: translate(-50%, 0%); }#btnBox .speedBtn i { padding: 6px 10px; cursor: pointer; }@media screen and (max-width: 1430px) {#btnBox { top: 14px; }}#text { width: 420px; height: 280px; background: rgba(187, 236, 234, 0.2); margin: 0 auto; margin-top: 35px; padding: 15px; color: #fff; font-size: 25px; line-height: 45px; border-radius: 5px; }
4、书写并添加js代码。<script src="js/jquery.min.js"></script><script src="js/parameter.js"></script><script>$(function () { text({ str: "土地是以它的肥沃和收获而被估价的。才能也是土地，不过它生产的不是粮食，而是真理。如果只能滋生瞑想和幻想的话，即使再大的才能也只是砂地或盐池，那上面连小草也长不出来的。", effect: "rightBig", speed : 200, });});</script>
5、代码整体结构。
6、查看效果。
