您當前位置：首頁 > web前端 > jscript > JavaScript打造的打字效果,拖動條改變速度

JavaScript打造的打字效果,拖動條改變速度

來源：程序員人生發布時間：2014-05-28 06:59:47 閱讀次數：2913次

　　網(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.vxbq.cn/ target="new" _fcksavedurl="http://www.vxbq.cn/ target="new"">http://www.vxbq.cn/</a></center>
提示：可修改后代碼再運行!

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 站長請別在抱怨自己沒錢賺是你的懶惰害了你

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

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

JavaScript打造的打字效果,拖動條改變速度