文档章节

js实现飘过效果

findever
 findever
发布于 2012/12/12 22:49
字数 286
阅读 59
收藏 1

在群里有人在讨论用php怎么生成动态的飘过效果(具体可参考下面的demo),于是耐不住手痒,用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>

效果可以参见 DEMO

© 著作权归作者所有

findever
粉丝 7
博文 1
码字总数 286
作品 0
深圳
程序员
私信 提问
前端基础-JavaScript

开发工具与关键技术:DW/浏览器 ;简单使用js。 作者:刘佳明 撰写时间:2019年1月 18 日 前面已经随手写过了关于网页编辑的一些基础布局和标签的认识;这篇文章在这里为大家简单的介绍一下关...

没有,
01/18
0
0
《JavaScript实用效果整理》系列分享专栏

整理一些使用的JavaScript效果,在Web开发中遇到的比较好的动态效果,都收藏在这里,对以后的网站开发增加不少的色彩 《JavaScript实用效果整理》已整理成PDF文档,点击可直接下载至本地查阅...

开元中国2015
2018/10/29
60
0
iOS与JS交互之UIWebView-协议拦截

级别:★★☆☆☆ 标签:「iOS与JS交互」「UIWebView与JS交互」「UIWebView拦截协议」 作者: Xs·H 审校: QiShare团队 先解释下标题:“iOS与JS交互”。iOS指原生代码(文章只有示例),J...

QiShare
2018/08/28
0
0
iOS与JS交互之UIWebView-JavaScriptCore框架

级别:★★☆☆☆ 标签:「iOS与JS交互」「UIWebView与JS交互」「JavaScriptCore」 作者: Xs·H 审校: QiShare团队 先解释下标题:“iOS与JS交互”。iOS指原生代码(文章只有示例),JS指前...

QiShare
2018/08/30
0
0
iOS与JS交互之WKWebView-协议拦截

级别:★★☆☆☆ 标签:「iOS与JS交互」「WKWebView与JS交互」「WKWebView拦截协议」 作者: Xs·H 审校: QiShare团队 先解释下标题:“iOS与JS交互”。iOS指原生代码(文章只有示例),J...

QiShare
2018/09/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

作为一个(IT)程序员!聊天没有话题?试试这十二种技巧

首先呢?我是一名程序员,经常性和同事没话题。 因为每天都会有自己的任务要做,程序员对于其他行业来说;是相对来说比较忙的。你会经常看到程序员在发呆、调试密密麻麻代码、红色报错发呆;...

小英子wep
今天
14
0
【SpringBoot】产生背景及简介

一、SpringBoot介绍 Spring Boot 是由 Pivotal 团队提供的全新框架,其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程,该框架使用了特定的方式来进行配置,从而使开发人员不再需要...

zw965
今天
5
0
简述并发编程分为三个核心问题:分工、同步、互斥。

总的来说,并发编程可以总结为三个核心问题:分工、同步、互斥。 所谓分工指的是如何高效地拆解任务并分配给线程,而同步指的是线程之间如何协作,互斥则是保证同一时刻只允许一个线程访问共...

dust8080
今天
6
0
OSChina 周四乱弹 —— 当你简历注水但还是找到了工作

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @花间小酌 :#今日歌曲推荐# 分享成龙的单曲《男儿当自强》。 《男儿当自强》- 成龙 手机党少年们想听歌,请使劲儿戳(这里) @hxg2016 :刚在...

小小编辑
今天
3.3K
22
靠写代码赚钱的一些门路

作者 @mezod 译者 @josephchang10 如今,通过自己的代码去赚钱变得越来越简单,不过对很多人来说依然还是很难,因为他们不知道有哪些门路。 今天给大家分享一个精彩的 GitHub 库,这个库整理...

高级农民工
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部