Java动态加载类(java动态加载代码)

通过java、JavaScript和css实现点击按钮后出现灰色遮罩层,并显示动态加载的字样,提高用户体验,废话不多说,上代码(写这个博客的原因是网上代码太多新手根本不知道哪里对哪里,这里剔除所有无关代码,只显示可以出现功能的最少代码)。第一:效果图为第二:实现如上效果的代码为1:遮罩层css代码#load{position:fixed;top:0px;right:0px;bottom:0…

大家好,又见面了,我是你们的朋友全栈君。

通过java、JavaScript和css实现点击按钮后出现灰色遮罩层,并显示动态加载的字样,提高用户体验,废话不多说,上代码(写这个博客的原因是网上代码太多新手根本不知道哪里对哪里,这里剔除所有无关代码,只显示可以出现功能的最少代码)。

第一:效果图为

b32d24a1c423e09b5fdda2d379ff066f.gif

第二:实现如上效果的代码为

2c31bbf0e93ae016780af1c3114fe19c.png

1:遮罩层css代码

#load{position:fixed; top: 0px; right:0px; bottom:0px;filter: alpha(opacity=60); background-color: #777;

z-index: 1002; left: 0px; display:none;

opacity:0.5; -moz-opacity:0.5;padding-top:100px;color: #000000}

2:加载中div

loading.gif加载中…

3:触发遮罩效果的按钮

4:界面初始化js,使得遮罩层效果在界面加载时被隐藏

$(document).ready(function() {

$(‘#load‘).hide();

});

5:点击加载按钮,触发遮罩层效果显示,加载数据完成在退出效果

$(‘#load‘).fadeIn();

$(‘#load‘).fadeOut();

最后附上实现该效果的loading.gif图,如有需要尽可下载使用:

689f73745fd0a54c43a5c5a1b5e4d56d.gif

原文:http://www.cnblogs.com/miaomiaokaixin/p/5408499.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/129159.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 图像尺度空间理论_16位灰度图像

    图像尺度空间理论_16位灰度图像《SIFT原理与源码分析》系列文章索引:http://blog.csdn.net/xiaowei_cqu/article/details/8069548尺度空间理论自然界中的物体随着观测尺度不同有不同的表现形态。例如我们形容建筑物用“米”,观测分子、原子等用“纳米”。更形象的例子比如Google地图,滑动鼠标轮可以改变观测地图的尺度,看到的地图绘制也不同;还有电影中的拉

    2022年10月9日
    3
  • gridview属性_GridView

    gridview属性_GridViewGridView在生成HTML代码的时候会自动加上style=”border-collapse:collapse;”以及border=1,rules=”all”这些属性,这些在IE下都没什么影响,但是在FF下就会影响显示,style=”border-collapse:collapse;”;是由于设置了CellSpacing=”0″产生的,当设置CellSpacing=”1″后就没有,可以去掉sty

    2022年9月25日
    4
  • mysql 查看函数fsync_fsync()函数 Unix/Linux「建议收藏」

    mysql 查看函数fsync_fsync()函数 Unix/Linux「建议收藏」fsync,fdatasync-同步文件在内核态与存储设备内容简介#includeintfsync(intfd);intfdatasync(intfd);描述fsync()transfers(“flushes”)allmodifiedin-coredataof(i.e.,modifiedbuffercachepagesfor)thefilereferre…

    2022年5月18日
    47
  • 时滞微分方程求解_泛函微分方程内容设计

    时滞微分方程求解_泛函微分方程内容设计时滞微分方程(DDE)是当前时间的解与过去时间的解相关的常微分方程。该时滞可以固定不变、与时间相关、与状态相关或与导数相关。要开始积分,通常必须提供历史解,以便求解器可以获取初始积分点之前的时间的解。常时滞DDE具有常时滞的微分方程组的形式如下:y′(t)=f(t,y(t),y(t−τ1),…,y(t−τk)).y'(t)=f(t,y(t),y(t−τ_1),…,y(t−τ_k)).y′(t)=f(t,y(t),y(t−τ1​),…,y(t−τk​)).此处,t为自变量,y为因变量的列向量,

    2022年10月1日
    2
  • Vue(3)webstorm代码格式规范设置与vue模板配置

    Vue(3)webstorm代码格式规范设置与vue模板配置编译器代码格式规范设置通常我们写代码时,代码缩进都是4个空格,但是在前端中,据全球投票统计,建议使用2个空格来进行代码缩进。首先我们打开webstorm中的设置,如果使用的是mac的同学直接使用c

    2022年8月7日
    7
  • QtreeView 树形结构「建议收藏」

    QtreeView 树形结构「建议收藏」QtreeView是ui中最常用的控件,Qt中QTreeWidget比QTreeView更简单,但没有QTreeView那么灵活(QTreeWidget封装的和MFC的CTreeCtrl很类似,没有mvc的特点)。1.QStandardItemModel在QTreeView中的使用使用QTreeView的对应模型是QStandardItemModel,这个是Qt对应ui界面最有用的模型,…

    2022年6月4日
    35

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号