`

JS loading动画

javascriptjs 
阅读更多 
<html>
<body>
	<div id="a"></div>
	<div id="b"></div>
	<script>
		var point = function(id,msg,init){
			if (typeof(init)=='undefined'){
				init=3;
			}
			this.id=id;
			this.len= init;
			var show = function(p){
				document.getElementById(id).innerHTML = msg + p;
			};
			var initp = function(n){
				var p = [];
				for(var i=0;i<n;i++){
				   p.push(".");
				}
				return p.join("");
			}
			this.start=function(){
			  var len = this.len;	
			  this.timer = setInterval(function(){
				if (init!=len){
					show(initp(++init));
				}else{
					init=1;
					show(initp(init));
					
				}
			  },300);
			  	
			};
			this.stop = function(){
			  clearInterval(this.timer);
			}
			
		}
		var p = new point("a","loading");
		p.start();
		//setTimeout(function(){p.stop()},1000);

		var q = new point("b","加载中",6);
		q.start();
		//setTimeout(function(){q.stop()},1000);
		
	</script>
</body>
</html>
分享到：
评论
1 楼 uule 2012-04-21  
有木有图片可看看。。。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JavaScript Loading动画

    JavaScript Loading动画是网页加载过程中常用的一种视觉效果，用于告诉用户页面正在加载内容。在HTML5时代，这种动画的实现变得更加灵活和丰富。本教程将详细讲解如何使用GreenSock的TweenMax库来创建一个吸引人的、...

    酷炫 html5页面加载 loading动画效果 demo 基于原生无第三方依赖

    本示例"酷炫html5页面加载loading动画效果demo"是基于原生JavaScript和CSS实现的，无需任何第三方库，简化了开发流程，提高了性能。 首先，我们来详细了解一下如何实现这种加载动画。在HTML结构中，我们需要在`...

    40个创意loading动画

    "40个创意loading动画"集合提供了多样化的加载效果，旨在提升用户在浏览网页时的体验。 一、loading动画的基本概念 加载动画，也称为进度指示器，是当网页或应用程序正在加载内容时显示的一种视觉反馈。它们可以是...

    H5 文字loading动画

    制作H5文字loading动画，一般涉及以下知识点： 1. **HTML5的新特性**：包括`&lt;canvas&gt;`元素，用于在浏览器中绘制图形；`&lt;style&gt;`标签内联样式，使得CSS更灵活；以及`&lt;script&gt;`标签引入JavaScript代码。 2. **CSS3...

    HTML5 Loading动画加载 五彩的圆环Loading

    下面分享一下这款HTML5 Loading动画的实现过程，主要是HTML代码和CSS3代码，以及初始化的JS代码。 首先是HTML代码，只定义一个Loading容器，非常简单。 ”hold”&gt; 接下来是CSS代码，主要是定义每一个圆圈的动画效果...

    纯svg加载loading动画.zip

    在本压缩包“纯svg加载loading动画.zip”中，包含了11种不同的SVG加载动画效果。这些动画是通过编写SVG代码并结合CSS或JavaScript来实现动态效果的。每一种效果都通过`&lt;img&gt;`标签直接调用SVG文件，这种方式简洁高效...

    纯css loading动画

    纯CSS Loading动画是一种在网页加载过程中展示的交互元素，它使用CSS（层叠样式表）技术来创建动态效果，向用户表明页面正在加载。这种动画通常由简单的几何形状和过渡效果组成，不需要JavaScript或者额外的图像资源...

    基于jQuery实现的myProgress.js加载loading动画效果

    在本文中，我们将深入探讨如何使用基于jQuery的myProgress.js插件来创建吸引人的加载loading动画效果。这个插件提供了一种优雅的方式，通过动画的形式展示滚动条，从而提升用户体验，尤其是在网页内容加载过程中。 ...

    loading动画加载进度条效果.zip

    总的来说，"loading动画加载进度条效果.zip"中的内容可能包括一个纯CSS3的加载进度条动画，以及可能用JavaScript实现的动态加载进度跟踪。这个资源对于希望提升用户体验的前端开发者来说，是非常有价值的参考资料。

    js实现帧动画，完美解决loading动画

    本篇文章将详细探讨如何通过JavaScript实现帧动画，特别是如何解决loading动画的需求。 首先，我们需要准备一系列的静态图像，这些图像通常是连续的帧，构成一个完整的动态效果。这些帧可以是同一图像的不同状态，...

    jQuery制作Loading动画特效.zip

    jQuery制作的Loading动画特效是网页开发中常见的交互元素，它能提供一种视觉反馈，让用户知道网页正在加载数据或内容。这种动画效果可以帮助提高用户体验，减少因等待时间过长而产生的不耐烦感。在本教程中，我们将...

    loading加载gif动画

    4. **设计原则**：一个优秀的loading动画应简洁、直观，与品牌形象和用户体验保持一致。颜色选择、大小、速度和样式都需精心设计，避免干扰用户视线，同时传达出进度信息。 5. **性能优化**：由于GIF文件可能会比较...

    CSS3扁平化Loading动画特效.zip

    在现代网页设计中，用户体验是至关重要的，而Loading动画正是提升这一体验的重要组成部分。CSS3扁平化Loading动画特效是一种流行的设计趋势，它为用户提供了一种简洁、直观的方式来表示页面内容正在加载。本文将深入...

    两种单个swf loading 动画

    2. Loading动画原理：Loading动画通常由一系列帧组成，随着加载进度逐帧显示，或者通过改变图形的填充进度来展示加载状态。ActionScript，Flash的编程语言，可以用来控制动画的播放、暂停和停止，以及与服务器通信...

    58loading动画

    在压缩包中的“wubaLoading”文件可能是实现58loading动画的源代码，包括HTML、CSS和JavaScript文件，或者是预编译后的资源文件。通过分析这些文件，我们可以更深入地了解动画的具体实现方式，学习并应用到自己的...

    Canvas 发光loading动画

    总的来说，通过Canvas API，我们可以创建各种复杂的加载动画，发光loading动画只是其中之一。利用JavaScript的灵活性和Canvas的绘图能力，开发者可以构建出引人入胜的交互式用户体验。在实际项目中，可以根据需求...

    SVG实现Loading加载按钮动画图标特效.zip

    这个压缩包文件"SVG实现Loading加载按钮动画图标特效.zip"包含了实现SVG加载动画效果的相关资源，包括HTML、JavaScript（js）和CSS（样式表）文件。下面我们将详细探讨SVG、加载动画以及如何通过这些技术来创建按钮...

    前端canvas例子，loading动画。加载动画

    内容概要：canvas案例，loading动画。加载动画。 实现技术：htm+js实现。双击浏览器打开即可看效果 能学到什么：canvas技术 适用人群： 前端canvas学习新手 阅读建议：支持canvas的浏览器

    css3实现加载loading特效小动画效果

    CSS3的引入为开发者提供了更多创建动态和交互式元素的工具，其中之一就是制作加载（loading）动画效果。本文将深入探讨如何利用CSS3来实现吸引人的加载特效小动画效果。 首先，CSS3中的关键帧动画（@keyframes）是...

    页面loading插件

    在JSP（JavaServer Pages）环境中，开发者可以利用JavaScript、jQuery、Vue.js等前端框架，结合CSS来创建自定义的loading插件。例如，可以使用jQuery的ajaxStart和ajaxStop事件监听AJAX请求的开始和结束，然后显示或...

Magicbox
Global site tag (gtag.js) - Google Analytics