<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{
margin:0px;
padding:0px;
}
body{
background:#C0C0C0;
}
#progress{
opacity:0;
}
li{
list-style:none;
display:inline-block;
width:8px;
height:10px;
margin:2px;
background:#E7A521;
}
#wrap{
margin:50px auto;
width:800px;
background:#fff;
overflow:hidden;
padding:20px;
border-radius:10px;
}
textarea{
background:#EFEFD6;
width:320px;
height:220px;
float:left;
padding:10px;
font-size:18px;
border:medium none;
}
#center{
float:left;
width:120px;
text-align:center;
}
#center ul {
margin: 0px;
padding: 0px;
font-size: 0px;
}
#center a{
display:block;
color:#fff;
background:#F76300;
text-decoration:none;
padding:10px;
margin:0px 5px;
font-family:"微软雅黑";
}
#center p{
font-size:20px;
font-family:"微软雅黑";
}
#right{
width:320px;
height:220px;
background:#63EFF7;
float:right;
padding:10px;
}
</style>
<script type="text/javascript" src="float.js"></script>
<script type="text/javascript">
window.onload = function ()
{
var obtn = document.getElementsByTagName('a')[0];
var otext = document.getElementsByTagName('textarea')[0];
var oright = document.getElementById('right');
var oall = document.getElementById('all');
var ocurrent = document.getElementById('current');
var oprogress = document.getElementById('progress');
var str = '';
var arr = [];
var timer = null;
obtn.onclick = function ()
{
clearInterval(timer);
if( otext.value == '' )
{
alert('请输入内容！');
}
else
{
str = otext.value;
arr = str.split('');
var ali = document.getElementsByTagName('li');
obtn.style.opacity = '0.5';
var m = n = 0;
ocurrent.innerHTML = 0;
oall.innerHTML = arr.length;
oright.innerHTML = '';
opacity(oprogress,10,100,20);
timer = setInterval( function ()
{
var oif = otext.value;
otext.value = oif.substring(1);
oright.innerHTML += arr[m];
m++;
ocurrent.innerHTML = m;
for ( var i = 0; i <ali.length; i++)
{
ali[i].style.background = 'yellow';
}
ali[n].style.background = 'red';
n++;
if( n == ali.length)
{
n = 0;
}
if( m == arr.length )
{
clearInterval(timer);
obtn.style.opacity = '1';
opacity(oprogress,10,0,20)
}
},50)
}
};
}
</script>
</head>
<body>
<div id="wrap">
<textarea id="left"></textarea>
<div id="center">
<a href="javascript:" style="opacity:1;">把文字向右</a>
<p>
<span id="current">
0
</span>
/
<span id="all">
0
</span>
</p>
<ul id="progress">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="right"></div>
</div>
</body>
</html>
function getstyle(obj,attr)
{
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}
function domove (obj,attr,step,frequency,target,endfn)
{
step = parseInt(getstyle(obj,attr))<target?step:-step;
clearInterval(obj.timer);
obj.timer = setInterval( function ()
{
var speed = parseInt(getstyle(obj,attr)) + step;
if(step>0&&speed>target||step<0&&speed<target)
{
speed = target;
}
obj.style[attr] = speed + 'px';
if( speed == target )
{
clearInterval(obj.timer);
endfn&&endfn();
}
},frequency);
};
function opacity(obj,step,target,frequency,endfn)
{
var currentOpacity = getstyle(obj,'opacity') * 100;
step = currentOpacity < target?step:-step;
clearInterval(obj.opacity)
obj.opacity = setInterval (function ()
{
currentOpacity = getstyle(obj,'opacity') *100;
var nextOpacity = currentOpacity + step;
if(step>0&& nextOpacity>target || step<0&& nextOpacity < target )
{
nextOpacity = target;
}
obj.style.opacity = nextOpacity/100;
obj.style.filter = 'alpha(opacity:)' + nextOpacity +')';
if(nextOpacity == target )
{
clearInterval(obj.opacity);
endfn&&endfn();
}
},frequency);
};
function shake(obj,attr,endfn)
{
if( obj.shaked ) { return; }
obj.shaked = true;
var num = 0;
var timer = null;
var arr = [];
var pos = parseInt(getstyle(obj,attr));
for( var i = 20; i > 0; i-=2 )
{
arr.push(i,-i);
}
arr.push(0);
clearInterval(obj.shake);
obj.shake = setInterval(function ()
{
obj.style[attr] = pos + arr[num] +'px';
num++;
if(num==arr.length)
{
clearInterval(obj.shake);
endfn&&endfn();
obj.shaked = false;
}
},50);
};
