zoukankan      html  css  js  c++  java
  • 一个有趣的例子,JS+CSS实现【兴趣是最好的老师】

    <html>
    <body onload="makesnake()" style="overflow-x: hidden; overflow-y: hidden">
    <STYLE>.spanstyle {
    //这段CSS也很重要,没有它也就没有效果了
    
        color: #FF9966; font-family: 宋体; font-size: 9pt; position: absolute; top: -50px; visibility: visible
    }
    </STYLE>
    
    <SCRIPT>
    <!--
    var x,y
    var step=20
    var flag=0
    var message="爱你中国,爱你母亲!"
    message=message.split("")
    var xpos=new Array()
    
    for (i=0;i<=message.length;i++) {
        xpos[i]=-50
    }
    
    var ypos=new Array()
    
    for (i=0;i<=message.length;i++) {
        ypos[i]=-50
    }
    
    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 makesnake() {
        if (flag==1 && document.all) {
            for (i=message.length; 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; 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; 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; i++) {
                var thisspan = eval("document.span"+i)
                thisspan.left=xpos[i]
                thisspan.top=ypos[i]
            }
        }
    
            var timer=setTimeout("makesnake()",30)
    }
    
    for (i=0;i<=message.length;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;
    </SCRIPT>
    </body>
    </html>

    这里的爱你中国,爱你母亲,会随鼠标而移动,非常的有趣。

  • 相关阅读:
    django -- 信号
    django缓存设置
    django-debug-toolbar 插件的使用
    scrapy基本操作流程
    scrapy框架持久化存储
    scrapy基础
    phantomJS,谷歌无头浏览器, 模拟登陆qq空间
    python爬虫--selenium
    pytorch掉坑记录:model.eval的作用
    numpy常用函数
  • 原文地址:https://www.cnblogs.com/jiqing9006/p/2620251.html
Copyright © 2011-2022 走看看