jQuery打字机文字输入特效
工具/原料
adobedreamweaver
方法/步骤
1、新建html文档。
2、书写hmtl代码。<divid="btnBox"effext="effext"><divclass="speed"><span>点击选择效果及速度</span></div><ulclass="clearfix"><lieffext="normal">正常:normal</li><lieffext="right"class="effF">近右:right</li><lieffext="left">近左:left</li><lieffext="down">近下:down</li><lieffext="up">近上:up</li><lieffext="random">随机:random</li><lieffext="rightBig">远右:rightBig</li><lieffext="leftBig">远左:leftBig</li><lieffext="downBig">远下:downBig</li><lieffext="upBig">远上:upBig</li></ul><divclass="speedBtn"><spanstyle="font-weight:bold;">速度:</span><ispeed="400">慢</i><ispeed="200"class="speedF">正常</i><ispeed="60">快</i><ispeed="15">极快</i></div></div><divid="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;}#btnBoxul{display:inline-block;}#btnBoxulli{float:left;padding:14px0;background-color:rgba(93,207,255,0.7);width:18%;margin:5px;border-radius:5px;-webkit-box-shadow:2px2px2px2pxrgba(64,116,153,0.7);-moz-box-shadow:2px2px2px2pxrgba(57,114,148,0.7);box-shadow:2px2px2px2pxrgba(59,127,157,0.7);cursor:pointer;}#btnBoxul.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.speedBtni{padding:6px10px;cursor:pointer;}@mediascreenand(max-width:1430px){#btnBox{top:14px;}}#text{width:420px;height:280px;background:rgba(187,236,234,0.2);margin:0auto;margin-top:35px;padding:15px;color:#fff;font-size:25px;line-height:45px;border-radius:5px;}
4、书写并添加js代码。<scriptsrc="js/jquery.min.js"></script><scriptsrc="js/parameter.js"></script><script>$(function(){ text({ str:"土地是以它的肥沃和收获而被估价的。才能也是土地，不过它生产的不是粮食，而是真理。如果只能滋生瞑想和幻想的话，即使再大的才能也只是砂地或盐池，那上面连小草也长不出来的。", effect:"rightBig", speed:200, });});</script>
5、代码整体结构。
6、查看效果。
