设为首页 加入收藏
当前位置:首页 > 整站内容 > 特效代码 > 文本特效 > 详细内容
在屏幕内沿边框碰撞的文字
发布时间:2010-3-16  阅读次数:8561  字体大小: 【】 【】【

<html>

<head>
<title>网页特效|Linkweb.cn/Js|---在屏幕内沿边框碰撞的文字</title>
<meta content="text/html; charset=gb2312" http-equiv="Content-Type">
</head>

<body onload="setValues()">
<script>
<!-- Beginning of JavaScript -
var your_message="欢迎学习网页特效制作!"
var textfont="Verdana"
var textsize=20
var textcolor="ff0000"
var textboldness=7
var tempo=40
var stepx=30
var stepy=20
var msg=new Array()
var msg=your_message
var message=msg.split("")
var numberofletters=msg.length-1
var x,y
var marginbottom
var marginleft=0
var margintop=0
var marginright
textboldness=textboldness*100
var timer
var xpos=new Array()
var ypos=new Array()
var spancontent=new Array()

for (i=0; i<=numberofletters;i++) {
       xpos[i]=0
  ypos[i]=0
}

for (i=0;i<=numberofletters;i++) {
  spancontent[i]="<span style='position:relative;font-family:"+textfont+";font-size:"+textsize+"pt;color:"+textcolor+";font-weight:"+textboldness+"'>"+message[i]+"</span>"
}

function setValues() {
       var firsttimer= setTimeout("setValues2()",2000)
}

function setValues2() {
  if (document.all) {
         marginbottom = document.body.clientHeight-5
         marginright = document.body.clientWidth-5
    for (i=0;i<=numberofletters;i++) {                        
      var thisspan = eval("document.all.span"+i)
           thisspan.innerHTML=spancontent[i]
      var thisspan = eval("document.all.span"+(i)+".style")
                       thisspan.posLeft=0
      thisspan.postop=0  
    }
    moveball()
  }
  
  if (document.layers) {
         marginbottom = window.innerHeight-10
         marginright = window.innerWidth-10
    for (i=0;i<=numberofletters;i++) {                        
      var thisspan=eval("document.span"+i+".document")
           thisspan.write(spancontent[i])
      thisspan.close()
      var thisspan=eval("document.span"+i)
                       thisspan.left=0
      thisspan.top=0  
    }
         moveball()
  }
}

function randommaker(range) {    
  rand=Math.floor(range*Math.random())
       return rand
}

function moveball() {
  if (document.all) {
    checkposition()
         makesnake()
         document.all.span0.style.posTop+=stepy
         timer=setTimeout("moveball()",tempo)
  }
  if (document.layers) {
    checkposition()
         makesnake()
         document.span0.top+=stepy
         timer=setTimeout("moveball()",tempo)
  }
}

function makesnake() {
    for (i=numberofletters; i>=1; i--) {
           xpos[i]=xpos[i-1]
      ypos[i]=ypos[i-1]
         }
    if (document.all) {
      xpos[0]=document.all.span0.style.posLeft+stepx
      ypos[0]=document.all.span0.style.posTop+stepy
      for (i=0;i<=numberofletters;i++) {  
             var thisspan=eval("document.all.span"+(i)+".style")
             thisspan.posLeft=xpos[i]
        thisspan.posTop=ypos[i]
           }
    }
    if (document.layers) {
      xpos[0]=document.span0.left+stepx
      ypos[0]=document.span0.top+stepy
      for (i=0;i<=numberofletters;i++) {  
             var thisspan = eval("document.span"+i)
             thisspan.left=xpos[i]
        thisspan.top=ypos[i]
           }
    }
}

function checkposition() {
  if (document.all) {
    if (document.all.span0.style.posLeft>marginright) {
      stepx=(stepx+randommaker(2))*-1
      document.all.span0.style.posLeft-=1
    }
    if (document.all.span0.style.posLeft<marginleft) {
      stepx=(stepx+randommaker(2))*-1
      document.all.span0.style.posLeft+=1
    }  
    if (document.all.span0.style.posTop>marginbottom) {
      stepy=(stepy+randommaker(2))*-1
      document.all.span0.style.posTop-=1
    }
    if (document.all.span0.style.posTop<margintop) {
      stepy=(stepy+randommaker(2))*-1
      document.all.span0.style.posTop+=1
    }
  }
  if (document.layers) {
    if (document.span0.left>=marginright) {
      stepx=(stepx+randommaker(2))*-1
      document.span0.left-=10
    }
    if (document.span0.left<=marginleft) {
      stepx=(stepx+randommaker(2))*-1
      document.span0.left+=10
    }  
    if (document.span0.top>=marginbottom) {
      stepy=(stepy+randommaker(2))*-1
      document.span0.top-=10
    }
    if (document.span0.top<=margintop) {
      stepy=(stepy+randommaker(2))*-1
      document.span0.top+=10
    }
  }
}
// - End of JavaScript - -->
</script>
<script>
<!-- Beginning of JavaScript -

for (i=0;i<=numberofletters;i++) {
       document.write("<span id='span"+i+"' style='position:absolute'></span>")
       document.close()
}

// - End of JavaScript - -->
</script>

</body>
</html>

预览效果

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

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

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