JavaScript打造的打字效果,拖动条改变速度

发布时间：2018-08-17 13:36:34 所属栏目：模式来源：站长网

导读：烈火网(LieHuo.Net)教程利用纯 Java Script实现的打字效果，单就打字就已经挺吸引人了，而且它还有个更个性的功能，用拖动条可以调整打字的速度，还能够自动滚屏，单击即可调节，学习JS挺有用处。 htmlheadtitle拖动条改变打字速度，真不错/titlemeta htt

　　烈火网(LieHuo.Net)教程利用纯JavaScript实现的打字效果，单就“打字”就已经挺吸引人了，而且它还有个更个性的功能，用拖动条可以调整打字的速度，还能够自动滚屏，单击即可调节，学习JS挺有用处。

<html> <head> <title>拖动条改变打字速度，真不错</title> <meta http-equiv=content-type content="text/html; charset=gb2312"> <style> body{ border:0px; margin:0px; overflow:hidden; background-color:transparent; font-family:宋体; } *{ color:#999; } #con{ float:left; width:620px; height:400px; overflow-y:auto; background-color:#000; filter:alpha(opacity=80); opacity:0.8; } #opt{ float:left; width:230px; height:150px; background-color:#333; filter:alpha(opacity=80); opacity:0.8; text-align:center; } fieldset{ margin:10px; border:1px solid #999; padding:0px 10px 10px; text-align:left; } legend{ font-size:12px; *margin-left:-7px; color:#999; } label{ font-size:12px; color:#999; } #spdbdr{ float:left; clear:left; width:185px; height:15px; overflow:hidden; border:1px solid #999; } #hand{ width:50%; height:15px; overflow:hidden; background-color:#666; } #comment{ float:left; width:230px; height:250px; background-color:#555; filter:alpha(opacity=80); opacity:0.8; } #fd2{ padding-bottom:5px; *padding-bottom:10px; } #probdr{ float:left; clear:both; width:185px; height:15px; overflow:hidden; border:1px solid #999; } #pro{ width:0px; height:15px; overflow:hidden; background-color:#666; } h5{ margin:0px; margin-left:10px; margin-top:10px; } #ar{ margin:40px; text-align:center; } #date{ font-size:14px; font-weight:bold; text-align:left; } #sep{ width:100%; height:1px; overflow:hidden; background-color:#999; } #heart{ margin-left:20px; font-weight:normal; font-size:12px; text-align:left; } h3{ font-size:14px; text-align:center; margin:20px auto; } p{ margin:10px auto 0px; font-size:14px; line-height:1.5em; text-indent:2em; text-align:left; } </style> </head> <body> <div id=con> <div id=ar> <div id=date>Aug. 22<sup>TH</sup><span id=heart>（天气：阵雨转小雨）</span></div> <div id=sep></div> <h3>烈火简介</h3> <p>烈火是互联网的倡导与服务媒体，以烈火网(LieHuo.Net)为中心的互联网技术、资讯为中心，旗下有烈火导航(LieHuo.Org、烈火论坛、站长工具、alexa排名、软件下载与烈火百科等多个频道，烈火以火热的信心和不断进取的精神，每时每刻都在为互联网的发展做出微薄的贡献！) </p> <H3>网址大全</H3> <P>　　烈火网址导航<http://www.liehuo.org>的宗旨就是方便网友迅速找到自已需要的网站，而不必记住太多复杂的网址。同时也避免了使用搜索引擎时信息纷杂，良莠不齐的问题。从今天起，烈火网址导航将以更专业的眼光，最专注的态度，广泛地收集网址，并客观地挑选出各类网址中的精品奉献给大家。此外，烈火网址导航会随时更新网址，力求做到最新、最精、最全面！烈火网址导航的目标是成为中国最权威的分类网址网站，免费为广大网民提供最方便快捷的服务。</P> </div> </div> <div id=opt> <fieldset> <legend>控制台</legend> <input id=autoscroll type=checkbox checked><label for=autoscroll>自动滚屏</label> <label style="float:left;margin-top:5px;">动画速度(单击调节)</label> <div id=spdbdr><div id=hand></div></div> </fieldset> <fieldset id=fd2> <legend>进度</legend> <div id=probdr><div id=pro></div></div> </fieldset> </div> <div id=comment> <h5>日志评论</h5> <p>烈火网-关注站长,建设互联网！</p> </div> </html><center>本代码来自烈火网，更多教程请访问：<a href=http://www.veryhuo.com/ target="new" _fcksavedurl="http://www.veryhuo.com/ target="new"">http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：威海站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!