JavaScript 拖动条改变打字速度，真不错_表单按钮特效

纯JavaScript实现的打字效果，单就“打字”就已经挺吸引人了，而且它还有个更个性的功能，用拖动条可以调整打字的速度，还能够自动滚屏，单击即可调节，学习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>关于模板无忧</h3>
		<p>模板无忧（mb5u.com）提供各类网页模板、视频教程、JavaScript/CSS特效代码以及常用软件下载等，做有质量的学习型源码下载站。</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>
</div>
</html>

所属频道：表单按钮特效/更新时间：2012-11-28

[收藏][报错][返回列表]

JavaScript 拖动条改变打字速度，真不错_表单按钮特效

表单按钮特效Rss订阅特效代码搜索

表单按钮特效推荐

猜你也喜欢看这些