首 页 | 联系我们 | 关于优化网 | 中国阀门网-阀门88网 WEB优化行业门户网站-WEB-YOUHUA.CN
当前位置 : 首页 >> PHP技术 >> php怎么生成动态的飘过效果
返回首页

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

时间:2012-12-20 20:55:37 来源:中国优化网 作者:youhua 人气: 794 发表评论  匿名投稿
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>&(中国阀门网-中国泵阀网-五金机械网)
<!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>
”欢迎转载www.web-youhua.com文章,谢谢

(责任编辑:youhua)
------分隔线----------------------------
本公司致力于网站建设,网站优化,搜索引擎优化(SEO),Google左侧排名等服务。欢迎转载收藏web-youhua.com
用户名:  验证码:   
理智评论文明上网,拒绝恶意谩骂  [ 查看全部 ] 网友评论
相关推荐