萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> js生成動態的飄過效果

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>

copyright © 萬盛學電腦網 all rights reserved