js实现loading简单的遮套层

弹出个div  设置div的背景色及透明度
当加载完成后remove这个div  或者 隐藏
至于淡入淡出通过setTimeout 或者setInterval改变透明度试试

.test{

    width:100%;

    height:100%;

    position:absolute;

    background-color:#5c5c5c;

    z-index:100;

    display:none;

    filter:Alpha(Opacity=40,finishOpacity=40,style=0,startX=100,startY=100,finishX=100,finishY=100);

}

这个是你说的灰色透明的背景,透明度什么的可以在那个滤镜中修改。

至于你说的淡入淡出效果就用setTimeout来做。  这个方法应该是显示这个界面和登陆成功后隐藏这个界面时条用。

时间: 2024-10-12 15:51:15

js实现loading简单的遮套层的相关文章

JavaScript(JS)之简单介绍

JavaScript(JS)之简单介绍 一.JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言) Netscape(网景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0产品中开发出一套livescript的脚本语言.Sun和Netscape共同完成.后改名叫Javascript 微软随后模仿在其IE3.0

JS实现一个简单的计算器

使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择框的值. 提示:document.getElementById( id名 ).value 获取或设置 id名的值. 第三步: 获取通过下拉框来选择的值来改变加减乘除的运算法则. 提示:使用switch判断运算法则. 第四步:  通过 = 按钮来调用创建的函数,得到结果. 注意: 使用parseInt

【转】九个Console命令,让js调试更简单

一.显示信息的命令 1: <!DOCTYPE html> 2: <html> 3: <head> 4: <title>常用console命令</title> 5: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6: </head> 7: <body> 8: <script

实现一个简单的弹出层

弹出层的实现方式是让一个块层遮挡住最底下的层,在最顶上显示相应的内容,因为最底下的块级和最上面的块级属于一个页面,他们之间也可以共享一些数据(实现一些特定的操作) 下面是简单的一个实现的过程 首先我们定义一个基本的页面结构 <div id="show"> //最底下的层 <input type="button" value="测试" id="test"/> </div> <div id

分别用css3、JS实现图片简单的无缝轮播功效

本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个img标签:为了实现无缝轮播,注意第一张图片要与最后一张图片相同: <div class="out"> <div class="imgs"> <img src="img/beatuy.jpg"/> <img s

js日期格式简单转换代码

js日期格式简单转换代码: 未经修饰的东西总是狂野粗糙的,比如人没有经过良好的教育,这人可能会有各种问题,同样js中的时间格式也是如此,所以要对时间进行一定的格式化操作,下面是一段非常简单的代码实例和大家分享一下. 代码如下: function dateStr(x,y) { var z={ y:x.getFullYear(), M:x.getMonth()+1, d:x.getDate(), h:x.getHours(), m:x.getMinutes(), s:x.getSeconds() }

[3] 用D3.js做一个简单的图表吧!

本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为可缩放矢量图形(Scalable Vector Graphics),SVG 使用 XML 格式定义图像,不清楚什么是SVG的朋友请先在 w3cschools 学习下

用JS做一个简单的电商产品放大镜功能

使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. 实验:制作产品焦点放大图. 所需技能:1.基本的获取页面元素的方法: 2.几个简单的事件: 3.会使用dom设置元素的属性: 案例原理:1.焦点框的跟随鼠标事件: 2.焦点框的移动区域规定: 3.大盒子内容的显示: 适合对象:js初学者 -------------------------------

分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业不是百度来的,我只是百度了一些示例代码的意思,怎么用!算了,越解释万一越黑呢!哈哈O(∩_∩)O哈哈~) ----------------------------------------------------------------分界线------------------------------