天涯部落

小圈子,大声音!呼朋引伴网聚部落!

创建新部落?

[字体特效]如何制作跟着鼠标跑的文字~

楼主:bread_joker 时间:2009-01-31 13:31:47 点击:84412 回复:2
脱水模式给他打赏只看楼主 阅读设置
   请观看我的博客效果 http://bread_joker.blog.tianya.cn/
    
    
    把下段代码添加到博客模板第一个“<head> ”后面 。
    
    <style type="text/css">
    .spanstyle {
    COLOR: #33CCFF ; FONT-FAMILY: 宋体; FONT-SIZE: 10pt; POSITION: absolute; TOP: -50px; VISIBILITY: visible
    }
    </style>
    <script>
    var x,y
    var step=18
    var flag=0
    var message="需要跟随鼠标的文字"
    message=message.split("")
    var xpos=new Array()
    for (i=0;i<=message.length-1;i++) {
    xpos[i]=-50
    }
    var ypos=new Array()
    for (i=0;i<=message.length-1;i++) {
    ypos[i]=-200
    }
    function handlerMM(e){
    x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
    y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
    flag=1
    }
    function www_helpor_net() {
    if (flag==1 && document.all) {
    for (i=message.length-1; i>=1; i--) {
    xpos[i]=xpos[i-1]+step
    ypos[i]=ypos[i-1]
    }
    xpos[0]=x+step
    ypos[0]=y
    for (i=0; i<message.length-1; i++) {
    var thisspan = eval("span"+(i)+".style")
    thisspan.posLeft=xpos[i]
    thisspan.posTop=ypos[i]
    }
    }
    else if (flag==1 && document.layers) {
    for (i=message.length-1; i>=1; i--) {
    xpos[i]=xpos[i-1]+step
    ypos[i]=ypos[i-1]
    }
    xpos[0]=x+step
    ypos[0]=y
    for (i=0; i<message.length-1; i++) {
    var thisspan = eval("document.span"+i)
    thisspan.left=xpos[i]
    thisspan.top=ypos[i]
    }
    }
    var timer=setTimeout("www_helpor_net()",30)
    }
    for (i=0;i<=message.length-1;i++) {
    document.write("<span id=’span"+i+"’ class=’spanstyle’>")
    document.write(message[i])
    document.write("</span>")
    }
    if (document.layers){
    document.captureEvents(Event.MOUSEMOVE);
    }
    document.onmousemove = handlerMM;
    www_helpor_net();
    // -->
    </script>
    </body>
    </html>
     
楼主bread_joker 时间:2009-02-07 00:03:00
  这个不好用么?
作者 :GomesJustin 时间:2009-02-11 19:53:00
  太复杂了,不懂......

相关推荐

    发表回复

    请遵守天涯社区公约言论规则,不得违反国家法律法规