文字搬运 

<!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);
};

 

posted @ 2014-12-27 15:19  mayufo  阅读(182)  评论(0)    收藏  举报