设为首页 加入收藏
当前位置:首页 > 整站内容 > 特效代码 > 文本特效 > 详细内容
文字以破碎形式组合
发布时间:2010-3-16  阅读次数:8577  字体大小: 【】 【】【

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页特效|Linkweb.cn/Js|---文字以破碎形式组合</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>

预览效果

天猫商城    聚划算    天猫电器城    淘宝旅行    天猫超市    淘宝游戏    天猫品牌特卖    天猫母婴

我要评论
  • 匿名发表
  • [添加到收藏夹]
  • 发表评论:(匿名发表无需登录,已登录用户可直接发表。) 登录状态:未登录
最新评论
所有评论[0]
    暂无已审核评论!

全站链接: 
收录查询
分享按钮