JavaScript 拖動條改變打字速度，真不錯_表單按鈕特效

純JavaScript實現(xiàn)的打字效果，單就“打字”就已經(jīng)挺吸引人了，而且它還有個更個性的功能，用拖動條可以調(diào)整打字的速度，還能夠自動滾屏，單擊即可調(diào)節(jié)，學(xué)習(xí)JS挺有用處。

<html>
<head>
<title>拖動條改變打字速度，真不錯</title>
<meta http-equiv=mrc-type mrc="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<art.length){
		w=art.substr(i,1);
		mm+=(w=="<")?m=art.substr(i,art.substr(i).indexOf(">")+1):w;
		p=(w=="<")?art.substr(i).indexOf(">")+1:1;
		id("ar").innerHTML=mm+b;
		id("pro").style.width=(i*100/art.length)+"%";//進度條
		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>關(guān)于模板無憂</h3>
		<p>模板無憂（mb5u.com）提供各類網(wǎng)頁模板、視頻教程、JavaScript/CSS特效代碼以及常用軟件下載等，做有質(zhì)量的學(xué)習(xí)型源碼下載站。</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;">動畫速度(單擊調(diào)節(jié))</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>
</div>
</html>

所屬頻道：表單按鈕特效/更新時間：2012-11-28

[收藏][報錯][返回列表]

相關(guān)表單按鈕特效：

表單按鈕特效Rss訂閱特效代碼搜索

表單按鈕特效推薦

猜你也喜歡看這些

相關(guān)鏈接：
復(fù)制本頁鏈接| 搜索JavaScript 拖動條改變打字速度，真不錯
特效說明：
表單按鈕模板-JavaScript 拖動條改變打字速度，真不錯。

日韩天天综合网_野战两个奶头被亲到高潮_亚洲日韩欧美精品综合_av女人天堂污污污_视频一区**字幕无弹窗_国产亚洲欧美小视频_国内性爱精品在线免费视频_国产一级电影在线播放_日韩欧美内地福利_亚洲一二三不卡片区

JavaScript 拖動條改變打字速度，真不錯_表單按鈕特效

表單按鈕特效Rss訂閱特效代碼搜索

表單按鈕特效推薦

猜你也喜歡看這些