zoukankan      html  css  js  c++  java
  • js生成动态的飘过效果

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery.min.js" ></script>
    <script type="text/javascript">
    // 初始化
    var _pos = 0; // 初始位置
    var _direcation = 1; // 初始方向,1为x+方向,-1为x-方向
    var _x = 5; // 最大宽度
    var _y = 40; // 最大高度
     
    // 动态更新
    function update(){
    var pos = _pos; // 当前位置
    var direcation = _direcation; // 当前方向
    var output = '';
     
    for(var i=0; i<_y; i++){
    output += '<div>' + rp('.',pos) + '飘过</div>';
    if((pos<=0&&direcation<=0)||(pos>=_x&&direcation>=0))
    direcation *= -1; // 更新方向
    pos += direcation * 1; // 更新位置
    }
    $('#happy').html(output);
     
    // 更新初始数据
    if((_pos<=0&&_direcation<=0)||(_pos>=_x&&_direcation>=0))
    _direcation *= -1; // 更新方向
    _pos += _direcation * 1; // 更新位置
    }
     
    // 重复输出字符串N次
    function rp(str,len){
    //if(!len&&len!==0) len += 2;
    return new Array(len+1).join(str);
    }
    </script>
    <style type="text/css">
    body,html{font-size:12px; letter-spacing: 0.2em;}
    div{margin:5px 20px;}
    </style>
    </head>
    <body>
    <div id="happy"></div>
    <script type="text/javascript">
    setInterval('update()',80);
    </script>
    </body>
    </html>
  • 相关阅读:
    java 截取pdf
    webService 发送soap请求,并解析返回的soap报文
    常用网址
    扫描文件夹下代码行数
    CodeMIrror 简单使用
    常用 linux 命令(部分)
    windows下RabbitMQ 监控
    一定要写的日志
    创业思路
    10月9日后计划
  • 原文地址:https://www.cnblogs.com/xingmeng/p/2889416.html
Copyright © 2011-2022 走看看