博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
页面加载中jquery逐渐消失效果实现
阅读量:6268 次
发布时间:2019-06-22

本文共 642 字,大约阅读时间需要 2 分钟。

为了获得更好的用户体验,现在大多数网页都会在页面中加一个加载中效果,这里实现一个加载中逐渐消失的效果,以至于看上去不那么生硬。

html:

css:

/*加载中*/#loading{
position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color:#333; z-index: 2000; opacity: 1;}#loading img{
width:400px; height:300px; position:absolute; top:50%; left:50%; margin-top:-150px; margin-left:-200px; z-index: 2001;}

这里的加载中为一个gif的动态图,相对css,要更简单好用,多样化,但是gif图片容易太大,导致图片加载过慢,所以要到网上找一些在线压缩图片的地方压缩一下,尽可能不失真的情况下减小体积。

js:

给加载中效果默认opacity设为1,逐渐消失的效果则把opacity变为0,但是元素在页面中不消失,这样会影响页面其他元素的点击使用,所以要把元素隐藏掉。

转载于:https://www.cnblogs.com/beileixinqing/p/6905328.html

你可能感兴趣的文章
《互联网运营智慧》第7章“简单cdn”正式版下载
查看>>
如何解决SQL Server 2008 R2中“阻止保存要求重新创建表的更改”的问题!
查看>>
基于Xcode原型驱动的iOS应用设计
查看>>
SOA标准之----SCA架构思想
查看>>
9.VMware View 4.6安装与部署-connection server(View Replica Server)
查看>>
项目管理和产品管理绉议
查看>>
一步一步SharePoint 2007之三十七:在SharePoint中实现Workflow(3)——运行Workflow
查看>>
后端码农谈前端(CSS篇)第三课:选择器
查看>>
Rafy 领域实体框架设计 - 重构 ORM 中的 Sql 生成
查看>>
编程之基础:数据类型(二)
查看>>
倒排索引PForDelta压缩算法——基本假设和霍夫曼压缩同
查看>>
java基础--相等
查看>>
记一次网站服务器搬迁实录
查看>>
Sql server restore script(还原数据库正确的步骤)
查看>>
探秘重编译(Recompilations)(1/2)
查看>>
Lucene.Net 的“System.IndexOutOfRangeException: 索引超出了数组界限”错误
查看>>
Android杂谈--layout的横竖屏处理
查看>>
升级Windows Phone Developer Tools Beta
查看>>
从四个数字中选出三个,一共有多少组合?不重复的
查看>>
Kotlin 一个好用的新功能:Parcelize
查看>>