在群里有人在讨论用php怎么生成动态的飘过效果（具体可参考下面的demo），于是耐不住手痒，用js写了个实现版本。

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

<html>

<head>

// 初始化

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>

body,html{font-size:12px; letter-spacing: 0.2em;}

div{margin:5px 20px;}

</style>

</head>

<body>

setInterval('update()',80);

</script>

</body>

</html>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。