JS.跪求高手

文字是放在DIV里面的。。麻烦写个出来呵呵

关键的是这段文字如何一分为2，向左右两边移动
用JS实现难除非这段文字固定，排版也固定，人为预先拆分为2个DIV

我的想法是找到那个DIV。然后取他的宽度/2.应为wenz文字在我设置了 align="center"..所以用DIV的宽度/2也就是文字的宽度了。。然后在想办法做后面的效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>
  .wrap{width:1000px;height:800px;position:relative;}
   #ak,#bk{position:absolute;left:400px;}
  </style>

</HEAD> <BODY>
<div class="wrap"> <span id="ak">aaaaa</span><span id="bk">bbbbbbbbb</span></div>
  <script>
var aLeft=400,bLeft=500,i=0;
function c(){
var timer=setInterval(function(){
var a=document.getElementById("ak");
var b=document.getElementById("bk");
aLeft-=50;bLeft+=50;
a.style.left=aLeft;
b.style.left=bLeft;
if(parseInt(a.offsetLeft)<=0&&parseInt(b.offsetLeft)>=1000){
clearInterval(timer);
d();
}
},200);
}
c();
function d(){var sTimer=setInterval(function(){
var a=document.getElementById("ak");
var b=document.getElementById("bk");
aLeft+=50;bLeft-=50;
a.style.left=aLeft;
b.style.left=bLeft;
if(parseInt(a.offsetLeft)>=400&&parseInt(b.offsetLeft)<=500){
clearInterval(sTimer);
c()
}
},200)}
  </script>
</BODY>
</HTML>
你自己去完善吧~~~~~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var overdelay = $("#overdelay");
var textContainer = $("#textContainer");
var height = textContainer.height();
overdelay.css({"height":height+"px","marginTop":0-height-1+"px","width":"0px"});
setTimeout(function(){
overdelay.animate({width:360},1000,function(){
setTimeout(function(){
overdelay.animate({width:0},1000);
},5000);
});
},5000);
});
</script>
<style type="text/css">

</style>
</head><body>
<div align="center">
    <div id="textContainer">
    测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
    </div>
    <div id="overdelay">
    </div>
</div>
</body>
</html>

你猜对了。不过既然能达到目的，为何要用最复杂的方法？
要拆字符串达到这个目的，得要计算字符宽度，计算容器宽度，计算每行字符长度，拆分，再分别合并2个字符串，再构造2个DIV，再填充，然后才是做动画……反正我懒，不想这么麻烦。呵呵。
遇到半个字符在中间，拆起来更费劲…………

的确是的。。用的层覆盖。不过不是技术人员看上去的话就认为是被移走了。这样的做法唯一不好的是有可能留下印迹在上面。然后用Firefox来打开网页的话是看不到效果的。。只能用IE才能看到这样的效果。。我也不太清楚为什么。。6楼的哥们的确是移动了字。但是我希望得到的效果要和8楼一样。。如果按6楼的来做的话。。字会跑出来。。更重要的是我后面还要在字第2次出现的时候更换。。这样的话就没办法实现了。。如果用覆盖的话。我可以再后面显示的时候更换DIV里面得内容。。呵呵。。可能是我没说清楚把。。我觉得6楼按我上面说的做了。。但是我想要的结果是8楼那个样子的。我的错啊

我是LZ。。换了个账号登陆的刚刚忘记说了。。现在补充下。。楼主就是我。。2个号都是一个人在用O(∩_∩)O~

那个是大概，你样式化下（overflow:hidden)就不会超出了(细微的东西根据自己调节优化下就可以）
你这回来还要换文字.........为什么不弄个flash就行了，JS脚本多麻烦....

你一说我才发现。firefox居然还有这等问题。唉，再添个HACK吧：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var overdelay = $("#overdelay");
var textContainer = $("#textContainer");
var height = textContainer.height();
overdelay.css({"height":height+"px","marginTop":0-height-1+"px","width":"0px"});
overdelay.css("opacity",0.999);
setTimeout(function(){
overdelay.animate({"width":360+"px"},1000,function(){
setTimeout(function(){
overdelay.animate({"width":0+"px"},1000);
},5000);
});
},5000);
});
</script>
<style type="text/css">

</style>
</head><body>
<div align="center">
    <div id="textContainer">
    测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
    </div>
    <div id="overdelay"></div>
</div>
</body>
</html>

框架只在加载的时候慢，现在计算机性能越来越强大，框架用来辅助做大型开发非常合适。比如JQUERY，它能大大简化你的开发量。其中的核心选择器部分尤其实用。事实上具体程序运行的快慢还是主要由你的逻辑结构决定的，框架只不过就是一套函数集而已。也就在客户端下载JS的时候有些慢，加载的时候还是很快。可以考虑通过AJAX加载框架，能改善客户体验。

最后再恶搞一下这个程序：
有兴趣的朋友不妨试试把它改为不使用JQ框架的话要多少行代码～～
JQ的确是好东西啊！<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ var textContainer = $("#textContainer");
var cwidth = textContainer.width(); var strLineHeight = textContainer.css("lineHeight");
var LineHeight = strLineHeight == "normal" ? parseInt(textContainer.css("fontSize"))+2 : parseInt(strLineHeight); //获取真正的行高实在是比较麻烦，就先不写了。这里要求行高不能是百分比。 var str = textContainer.text(); //内部文字
textContainer.html(""); //清空
var arrtext = str.split(""); //分解文字
var arrInnerHTML = []; //装载HTML
for(var i=0,j=arrtext.length;i<j;i++){ //用DIV填充
arrInnerHTML.push("<span class='inner'>"+arrtext[i]+"</span>");
}
textContainer.html(arrInnerHTML.join(""));//填充拆分好的DIV

textContainer.css("height",textContainer.height()+"px"); var containerPosition = textContainer.position();
var ct = containerPosition.top+1;
var cl = containerPosition.left+1; var middleEdage = cl + textContainer.width()/2; var arrInner = [];
var infloor = 0;
var fheight = ct; //楼层高度
var arrFloors = []; //所有楼层
var arrFloor = []; //单个楼层

$(".inner").each(function(){
var _this = $(this);
var position = _this.position();
var _inner = {};
_inner.width = _this.width();
_inner.height = _this.height();
_inner.obj = _this;
_inner.position = position;
if(_inner.position.left + _inner.obj.width()/2 > middleEdage){
_inner.goto = "right";
_inner.moveto = cl + cwidth - _inner.position.left; //去右边
}else{
_inner.goto = "left";
_inner.moveto = cl - _inner.position.left - _inner.obj.width() - 1; //去左边
}

if( _inner.position.top > fheight+LineHeight/2 ){
infloor++;
fheight = _inner.position.top;
arrFloors.push(arrFloor);
arrFloor = new Array();
}

_inner.atfloor = infloor;
arrFloor.push(_inner);

arrInner.push(_inner);
});
arrFloors.push(arrFloor);

textContainer.html("");
var arrForShowLeftFloors = []; //演示用楼层
var arrForShowRightFloors = [];
$.each(arrFloors,function(i,n){
var ForShowLeftFloor = [];
var ForShowRightFloor = [];
textContainer.append("<div class='floor' style='width:"+cwidth+"px; text-align:left;height:"+LineHeight+"px;overflow:hidden;'></div>");
var lastfloor = $(".floor:last");
$.each(arrFloors[i],function(j,o){
lastfloor.append("<div class='innerdiv' style='width:"+o.width+"px;height:"+o.height+"px;float:left;'><div id='text'>"+o.obj.text()+"</div></div>");
o.obj = lastfloor.find(".innerdiv:last");
o.text = o.obj.find("#text"); //文字区块
if(o.goto=="left"){
ForShowLeftFloor.unshift(o);
}else{
ForShowRightFloor.push(o);
}
});
arrForShowLeftFloors.push(ForShowLeftFloor);
arrForShowRightFloors.push(ForShowRightFloor);
}); function ExecuteAnimateHide(obj,callback){ //执行动画 - 消失
if(!!obj){
obj.text.animate({marginLeft:obj.moveto+"px"},function(){
if($.isFunction(callback)){
callback();
}
});
}
}

function ExecuteAnimateShow(obj,callback){ //执行动画 - 出现
if(!!obj){
obj.text.animate({marginLeft:0+"px"},function(){
if($.isFunction(callback)){
callback();
}
});
}
}

var arrHideText = []; //用于装载文字队列

function RandomHideAllText(callback){
var arrFSLFs = arrForShowLeftFloors;
var arrFSRFs = arrForShowRightFloors; function hidetext(){

function chooseLeftT(){
var leftflen = arrFSLFs.length;
if(leftflen>0){
var leftf = Math.floor(Math.random()*arrFSLFs.length);
var l_len = arrFSLFs[leftf].length;
if(l_len>0){
var lobj = arrFSLFs[leftf].pop();
if(arrFSRFs.length == 0 && leftflen==1 && arrFSLFs[leftf].length==0){
ExecuteAnimateHide(lobj,callback);
}else{
ExecuteAnimateHide(lobj);
}
arrHideText.push(lobj);
}else{
arrFSLFs.splice(leftf,1);
chooseLeftT();
}
}
}
chooseLeftT(); function chooseRightT(){
var rightflen = arrFSRFs.length;
if(rightflen>0){
var rightf = Math.floor(Math.random()*rightflen);
var r_len = arrFSRFs[rightf].length;
if(r_len>0){
var robj = arrFSRFs[rightf].pop();
if(arrFSLFs.length==0 && rightflen==1 && arrFSRFs[rightf].length==0){
ExecuteAnimateHide(robj,callback);
}else{
ExecuteAnimateHide(robj);
}
arrHideText.push(robj);
}else{
arrFSRFs.splice(rightf,1);
chooseRightT();
}
}
}
chooseRightT();

if( arrFSLFs.length + arrFSRFs.length > 0 ){
setTimeout(function(){
hidetext();
},50);
}
}
hidetext();
} function RandomShowAllText(callback){
var obj = arrHideText.pop();
if(arrHideText.length>0){
ExecuteAnimateShow(obj);
}else{
ExecuteAnimateShow(obj,callback);
}
setTimeout(function(){
RandomShowAllText(callback);
},50);
}

RandomHideAllText(function(){
setTimeout(function(){
RandomShowAllText(function(){
alert("演示完成！");
});
},1000);
});});
</script>
<style type="text/css">

</style>
</head><body>
<div id="test"></div>
<div align="center">

    <div id="textContainer" align="left">测试文字a sdfas fdasdf测试文字测试 asdfasdf文字测试文字测试asdf文字测试文字测 asdfas dfasdf试文字测asdfasfd试文字测试asdf文字测试文字测试asdf文字测试文测试文字</div></div>
</body>
</html>

解决方案 »