jQuery打字机文字输入特效

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、查看效果。