文字搬运

最新推荐文章于 2024-11-13 17:27:29 发布
weixin_30544657
最新推荐文章于 2024-11-13 17:27:29 发布
阅读量112
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/zyq562550692/p/6924661.html
版权
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div,textarea,ul,li{
                margin: 0;
                padding: 0;
            }
            li{
                list-style: none;
            }
            #wrap{
                width: 820px;
                height: 260px;
                border: 10px solid #e7eff7;
                position: relative;
            }
            #content{
                width: 780px;
                height: 220px;
                border: 10px solid #c0c0c0;
                padding: 10px;
            }
            #texts{
                width: 280px;
                height: 204px;
                outline:none;
                resize:none;
                font-family: "微软雅黑";
                font-size: 12px;
                line-height: 20px;
                padding:10px 20px 0 20px;
                background: efefd6;
                border: 1px dashed #000000;
                background: #efefd6;
            }
            #btn{
                width: 120px;
                height: 40px;
                background: #f76300;
                position: absolute;
                top: 20px;
                left: 350px;
                line-height: 40px;
                text-align: center;
                font-family: "微软雅黑";
                color: #FFFFFF;
                cursor: pointer;
            }
            #btn:hover{
                background: red;
            }
            #lamp{
                width: 80px;
                height: 10px;
                position: absolute;
                top: 120px;
                left: 370px;
                filter: alpha(opacity=0);
                opacity: 0;
            }
            #count{
                position: absolute;
                top: 84px;
                left: 384px;
            }
            #lamp li{
                float: left;
                width: 8px;
                height: 10px;
                background:#e7a521;
                margin-left: 2px;
            }
            #right{
                width: 280px;
                height: 206px;
                border: 1px dashed #000000;
                position: absolute;
                top: 20px;
                right: 20px;
                font-family: "微软雅黑";
                font-size: 12px;
                line-height: 20px;
                background: #63eff7;
                padding:10px 20px 0 20px;
                
            }
            #lamp .active{
                background: red;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="content">
                <textarea id="texts">***祝贺马克龙当选法国总统。***指出，中法关系具有深厚历史底蕴，在中国外交中占有重要地位。建交53年来，两国关系经受住了国际风云变幻考验，战略性不断增强。推动中法关系在新起点上迈上新台阶，符合两国人民和国际社会共同期待。</textarea>
            </div>
            <div id="btn">
                把文字右移
            </div>
            <span id="count">0/0</span>
            <ul id="lamp">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div id="right"></div>
        </div>
        
        <script type="text/javascript" src="js/move.js" ></script>
        <script>
            function addLoadEvent(func){
                var oldonload = window.onload;
                if (typeof window.onload != 'function') {
                    window.onload = func;
                } else{
                    window.onload = function(){
                        oldonload();
                        func;
                    }
                }
            }
            addLoadEvent(main)
            function main(){
                var wrap = document.getElementById("wrap");
                var texts = document.getElementById("texts");
                var btn = document.getElementById("btn");
                var count = document.getElementById("count");
                var lamp = document.getElementById("lamp");
                var aLi = lamp.getElementsByTagName("li");
                var right = document.getElementById("right");
                var timer = null;
                var len = aLi.length;
                var newStr = '';
                var rightStr = '';
                btn.onclick = function(){
                    startMove(btn,'opacity',30);
                    clearInterval(timer);
                    var strTexts = texts.value;
                    var num = 0 ;
                    timer = setInterval(function(){
                        for (var i=0;i<len;i++) {
                            aLi[i].className = "";
                        }
                        lamp.style.display = "block";
                        if (strTexts.length > 0) {
                            startMove(lamp,'opacity',100);
                            aLi[num%len].className = "active";
                            count.innerHTML = num +'/'+ strTexts.length;
                            newStr = strTexts.substring(num);
                            texts.value = newStr;
                            rightStr = strTexts.substring(0,num);
                            right.innerHTML = rightStr;
                            num++;
                            if (num == strTexts.length+1) {
                                startMove(lamp,'opacity',0);
                                startMove(btn,'opacity',100);
                                clearInterval(timer);        
                            }
                        }else{
                            alert('请您输入要转移的文字');
                            clearInterval(timer);
                        }                
                    },50)
                }            
            }            
        </script>
    </body>
</html>