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

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

WBOY
發布: 2016-06-21 08:50:34
原創
1479 人瀏覽過

 

在群里有人在讨论用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);



相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板