Home > php教程 > php手册 > php怎么生成动态的飘过效果

php怎么生成动态的飘过效果

WBOY
Release: 2016-06-21 08:50:34
Original
1481 people have browsed it

 

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

 

// 初始化

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 += '

' + rp('.',pos) + '飘过
';

if((pos=_x&&direcation>=0))

direcation *= -1; // 更新方向

pos += direcation * 1; // 更新位置

}

$('#happy').html(output);

 

// 更新初始数据

if((_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);

}

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

div{margin:5px 20px;}

setInterval('update()',80);



Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template