<!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>
posted on
