您当前位置：首页 > web前端 > jscript > JavaScript打造的打字效果,拖动条改变速度

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

来源：程序员人生发布时间：2014-05-28 06:59:47 阅读次数：2742次

　　网(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><script>function id(obj){ return document.getElementById(obj);}var speed;window.onload=function(){ speed=parseInt((1-id("hand").offsetWidth/id("spdbdr").offsetWidth)*300); id("spdbdr").onmousedown=function(e){ if(!e) e=e||window.event; var x=(e.pageX)?e.pageX:e.clientX; id("hand").style.width=x-642; speed=parseInt((1-id("hand").offsetWidth/id("spdbdr").offsetWidth)*300); } art=id("ar").innerHTML; id("ar").innerHTML=b; show();}var art;var b="<b>|</b>";var i=0;var p;var mm="";function show(){ if(i")+1):w; p=(w=="<")?art.substr(i).indexOf(">")+1:1; id("ar").innerHTML=mm+b; id("pro").style.width=(i*100/art.length)+"%";//进度条 LIEHUO.NET if(id("autoscroll").checked){ id("con").scrollTop=id("con").scrollHeight-id("con").clientHeight; } i+=p; window.setTimeout("show();",speed); }else{ id("ar").innerHTML=art; }}</script><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.wfuyu.com/ target="new" _fcksavedurl="http://www.wfuyu.com/ target="new"">http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 站长请别在抱怨自己没钱赚是你的懒惰害了你

下一篇 配置SQL SERVER 2005 分布式水平分片

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点