利用js实现页面等待效果我们经常会看到许多

利用js实现页面等待效果我们经常会看到许多页面有CSS3的loading效果，一般都是利用ajax的页面加载过渡动画来实现的，其实，光利用js和css也可以实现首先，我们需要找到合适的CSS3loading效果这里我就用我另一站的loading来做例子 HTML： <div id="loading" class="spinner"> <div class="rect1"></div> <div class="rect2"></div> <div class="rect3"></div> <div class="rect4"></div> <div class="rect5"></div> </div> CSS： .spinner { color: fff;position:absolute; top:50%; left:50%; margin:50px 0 0 30px; position:fixed !important;position:absolute;top:0;left:0;height:100%; width:100%; z-index:999; background: 000 margin: 100px auto; width: 50px; height: 60px; text-align: center; font-size: 10px; } .spinner > div { background-color: 67CF22; height: 100%; width: 6px; display: inline-block; -webkit-animation: stretchdelay 1.2s infinite ease-in-out; animation: stretchdelay 1.2s infinite ease-in-out; } .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY 0.4 } 20% { -webkit-transform: scaleY 1.0 } } @keyframes stretchdelay { 0%, 40%, 100% { transform: scaleY 0.4 ; -webkit-transform: scaleY 0.4 ; } 20% { transform: scaleY 1.0 ; -webkit-transform: scaleY 1.0 ; } } ::-webkit-scrollbar { width: 8px;}::-webkit-scrollbar-button { width: 8px; height:5px;}::-webkit-scrollbar-track { background: eee; border: thin solid lightgray; box-shadow: 0px 0px 3px dfdfdf inset; border-radius:10px;}::-webkit-scrollbar-thumb { background: 999; border: thin solid gray; border-radius:10px;}::-webkit-scrollbar-thumb:hover { background: 7d7d7d;} 效果是这样的然后再加入控制div隐藏的js代码 function lick { $ " loading" .hide ; } window.setTimeout "lick ",3000 ; 其中的3000代表loading在页面加载完成后三秒隐藏

利用js实现页面等待效果 我们经常会看到许多 - Assbbs

利用js实现页面等待效果我们经常会看到许多 - Assbbs