20、文字破碎形式组合

20、文字破碎形式组合

<html>

 

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>网页特效---文字以破碎形式组合</title>

<SCRIPT>

var textwidth=200

var textheight=40

var message=new Array()

message[0]="你好"

message[1]="欢迎"

message[2]="光临"

message[3]="网页特效"

var x_finalpos=-1

var y_finalpos=50

var x_slices=24

var y_slices=1

var pause=10

var screenwidth=700

var screenheight=400

var x_step=new Array()

var y_step=new Array()

var x_randompos=0

var y_randompos=0

var i_loop=0

var max_loop=24

var i_text=0

var width_slice=Math.floor(textwidth/x_slices)

var height_slice=Math.floor(textheight/y_slices)

var cliptop=0

var clipbottom=height_slice

var clipleft=0

var clipright=width_slice

var spancounter=0

 

function initiate() {

       if (x_finalpos==-1) {

              x_finalpos=Math.floor(document.body.clientWidth/2)-Math.floor(textwidth/2)

       }

       if (y_finalpos==-1) {

              y_finalpos=Math.floor(document.body.clientHeight/2)-Math.floor(textheight/2)

       }

       cliptop=0

       clipbottom=height_slice

       clipleft=0

       clipright=width_slice

       i_loop=0

       spancounter=0

    if (document.all) {

          for (i=0;i<=y_slices-1;i++) {

                     for (ii=0;ii<=x_slices-1;ii++) {

                            var thisspan=eval("document.all.span"+spancounter+".style")

                            x_randompos=Math.ceil(screenwidth*Math.random())

                            y_randompos=Math.ceil(screenheight*Math.random())

                            thisspan.posLeft=x_randompos

                            thisspan.posTop=y_randompos

                thisspan.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"

                            clipleft+=width_slice

                      clipright+=width_slice

                      spancounter++

                     }

               clipleft=0

               clipright=width_slice

               cliptop+=height_slice

               clipbottom+=height_slice

              }

   }

   explode_IE()

}

 

function changetext() {

       spancounter=0

       for (i=0;i<=y_slices-1;i++) {

              for (ii=0;ii<=x_slices-1;ii++) {

                     var thisspan=eval("document.all.span"+spancounter+".style")          

                     thisspan.posLeft=-5000

                     spancounter++

              }

       }

       spancounter=0

       if (i_text>message.length-1) {i_text=0}

       for (i=0;i<=y_slices-1;i++) {

              for (ii=0;ii<=x_slices-1;ii++) {

                     var thisinnerspan=eval("span"+spancounter)

                  thisinnerspan.innerHTML=message[i_text]

                     spancounter++

              }

       }

       i_text++

       initiate()

}

 

 

function explode_IE() {

       spancounter=0

       if (i_loop<=max_loop-1) {

              for (i=0;i<=y_slices-1;i++) {

                     for (ii=0;ii<=x_slices-1;ii++) {

                            var thisspan=eval("document.all.span"+spancounter+".style")

                            x_step[spancounter]=(x_finalpos-thisspan.posLeft)/(max_loop-i_loop)

                            y_step[spancounter]=(y_finalpos-thisspan.posTop)/(max_loop-i_loop)            

                            thisspan.posLeft+=x_step[spancounter]

                            thisspan.posTop+=y_step[spancounter]

                            spancounter++

                     }

              }

              i_loop++

              var timer=setTimeout("explode_IE()",pause)

       }

       else {

              spancounter=0

              clearTimeout(timer)

              var timer=setTimeout("changetext()",2000)

       }

}

 

 

// - End of JavaScript - -->

</SCRIPT>

 

<STYLE>.spanstyle {

       BACKGROUND-COLOR: #ffffff; BORDER-BOTTOM-STYLE: solid; BORDER-LEFT-STYLE: solid; BORDER-RIGHT-STYLE: solid; BORDER-TOP-STYLE: solid; COLOR: #ff00ff; FONT-FAMILY: 宋体; FONT-SIZE: 20px; HEIGHT: 30px; LEFT: -5000px; PADDING-BOTTOM: 1px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; PADDING-TOP: 1px; POSITION: absolute; TEXT-ALIGN: center; WIDTH: 192px

}

</STYLE><script language="JavaScript">

<!--

<!--

function MM_reloadPage(init) {  //reloads the window if Nav4 resized

  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {

    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}

  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();

}

MM_reloadPage(true);

// -->

 

function MM_findObj(n, d) { //v4.01

  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

  if(!x && d.getElementById) x=d.getElementById(n); return x;

}

 

function MM_showHideLayers() { //v3.0

  var i,p,v,obj,args=MM_showHideLayers.arguments;

  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];

    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }

    obj.visibility=v; }

}

//-->

</script>

 

</head>

 

<body onload=changetext()>

<SCRIPT>

<!-- Beginning of JavaScript -

if (document.all) {

       for (i=0;i<=y_slices-1;i++) {

              for (ii=0;ii<=x_slices-1;ii++) {

                  document.write("<span id='span"+spancounter+"' class='spanstyle'></span>")

                     spancounter++

              }

       }

       spancounter=0

}

// - End of JavaScript - -->

</SCRIPT>

 

</body>

 

</html>

 

Write a comment

Comments: 1
  • #1

    csr04 (Tuesday, 01 September 2009 14:05)

    test